Layout Basics

These are the basics to keep in mind while developing custom components or interfaces.

Responsive breakpoints

Prefixes for responsive breakpoints:

  • '' - base 0 - 575px
  • sm - small 576px - 767px
  • md - medium 768px - 991px
  • lg - large 992px - 1367px
  • xl - extra large >= 1368px 


/* Extra small devices (portrait phones, less than 576px) */
/* No media query 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: 1368px) { ... }

Fixed width container

A container div which keeps content centered and keeps spacing from both sides. To use it just add class container to the element. The container have following widths:

  • 100%
  • 540px
  • 720px
  • 960px
  • 1140px

container 

<div class="container">
	<!-- Content here -->
</div>

Full width container

This container has 100% width on all breakpoints. To use it just add class container-fluid to the element.

container-fluid 

<div class="container-fluid">
	<!-- Content here -->
</div>

Z-index

Various elements have set their z-index property to ensure they won't be covered or overlapped by other element.

  • Dropdown - 1000
  • Sticky - 1020
  • Fixed - 1030
  • Modal Overlay - 1040
  • Modal - 1050
  • Popover - 1060
  • Tooltip - 1070
  • Main overlay - 1080
  • Nav bar - 1090