Custom components

Side navbars

bootlaterus has built-in support for side navbars without any additional javascript code.

• Support for either left or right navbars.
• Support for responsive collapsing of sidebars.
• Support for responsive replacer visible when the sidebar is collapsed.
• Support to add a margin for contents when the sidebar is visible.
• Compatible with bootstrap color utilities and base navbars.

Side Navbar Replacer has a fixed height (56px by default), if you want to change that value, in your custom CSS or in-line style set a different value for both .navbar-side-replacer -> height and .navbar-side -> top. Note: This limitation is to avoid using javascript while keeping a relatively good looking responsive behavior for the side navbars.

JSFiddle full sample: open

Backgrounds

Add a beautiful background to your website.

JSFiddle full sample: open

Interactables

Cards and other UI components are easier to implement as interactive elements.

• .interactable class will add hover shadows and transitions.
• We still recommend:
  • When cards have a button-link: Use Stretched Link
  • When link is for the full card: Use Text-reset

Aspect Ratio Utilities

We've added some CSS Classes to define Aspect Ratio (.ar- classes) of a given element.

• .ar-16-10 (16/10 aspect ratio)
• .ar-16-9 (16/9 aspect ratio)
• .ar-4-3 (4/3 aspect ratio)
• .ar-3-2 (3/2 aspect ratio)
• .ar-8-5 (8/5 aspect ratio)