Avant UI Kit

Documentation

Layout

Avant UI uses the same Bootstrap strategy for layout organization.

Containers

This is the most basic element and it can be used with fixed sizes (based on breakpoints) or with full size (width: 100%): 

<div class="container">
  ...
</div>

Use .container-fluid for a full width container: 

<div class="container-fluid">
  ...
</div>

Responsive breakpoints

The mobile-first concept uses media queries to control the layout on devices of different sizes with different breakpoints. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. 

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

More information about Bootstrap layout can be found in official documentation.