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 - 767pxmd
- medium 768px - 991pxlg
- large 992px - 1367pxxl
- 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