Layout Basics

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) { ... }
								

Containers

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>