Custom components

Bootlaterus includes out-of-the-box some new components to create an awesome responsive UI.

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

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)

Extended Carousel

Bootlaterus includes extended classes to create carousels that look great with images of different sizes forcing a fixed aspect ratio (see previous paragraph Aspect Ratio Utilities) and using background-images that scale safely.

• .carousel-{AN_ASPECT_RATIO}.
  • .carousel-16-10
  • .carousel-16-9
  • .carousel-4-3
  • .carousel-3-2
  • .carousel-8-5
• Instead of adding images to carousel-items, add a div with the class .carousel-content and define a background image for it (by using an in-line style -recommended- or by creating additional css classes).

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

Additional colors

Bootlaterus has additional classes to add shadows and alpha-colors to your components:

• .light-alpha-lo
• .light-alpha-med
• .light-alpha-hi
• .dark-alpha-low
• .dark-alpha-med
• .dark-alpha-hi
• .shadow-low
• .shadow-med
• .shadow-hi

Dark dropdowns

Add .dropdown-dark to a dropdown.

• .dropdown .dropdown-dark

JSFiddle full sample: open