2015-08-10 21:47:02 +02:00
---
2015-08-15 07:45:55 +02:00
layout: docs
2015-08-10 21:47:02 +02:00
title: Overview
2016-10-03 03:19:47 +02:00
description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
2015-08-10 21:47:02 +02:00
group: layout
2015-08-18 05:34:11 +02:00
redirect_from: "/layout/"
2015-08-10 21:47:02 +02:00
---
Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
2016-11-25 23:01:06 +01:00
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
2015-08-10 21:47:02 +02:00
## Containers
2015-09-07 16:07:35 +02:00
Containers are the most basic layout element in Bootstrap and are **required when using our grid system** . Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time).
2015-08-10 21:47:02 +02:00
While containers *can* be nested, most layouts do not require a nested container.
2015-08-11 08:07:50 +02:00
< div class = "bd-example" >
< div class = "bd-example-container" >
< div class = "bd-example-container-header" > < / div >
< div class = "bd-example-container-sidebar" > < / div >
< div class = "bd-example-container-body" > < / div >
< / div >
< / div >
2015-08-10 21:47:02 +02:00
{% highlight html %}
< div class = "container" >
<!-- Content here -->
< / div >
{% endhighlight %}
Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
2015-08-11 08:07:50 +02:00
< div class = "bd-example" >
< div class = "bd-example-container bd-example-container-fluid" >
< div class = "bd-example-container-header" > < / div >
< div class = "bd-example-container-sidebar" > < / div >
< div class = "bd-example-container-body" > < / div >
< / div >
< / div >
2015-08-10 21:47:02 +02:00
{% highlight html %}
< div class = "container-fluid" >
...
< / div >
{% endhighlight %}
## Responsive breakpoints
2016-11-08 13:36:04 +01:00
Since Bootstrap is developed to be mobile first, we use a handful of [media queries ](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries ) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
2015-08-10 21:47:02 +02:00
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
{% highlight scss %}
2016-11-26 07:47:40 +01:00
// Extra small devices (portrait phones, less than 576px)
2015-08-10 21:47:02 +02:00
// No media query since this is the default in Bootstrap
2016-11-26 07:47:40 +01:00
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
2015-08-10 21:47:02 +02:00
2015-12-09 21:26:38 +01:00
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
2015-08-10 21:47:02 +02:00
2015-12-09 21:26:38 +01:00
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
2015-08-10 21:47:02 +02:00
2015-12-09 21:26:38 +01:00
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
2015-08-10 21:47:02 +02:00
{% endhighlight %}
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
{% highlight scss %}
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example usage:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
{% endhighlight %}
We occasionally use media queries that go in the other direction (the given screen size *or smaller* ):
{% highlight scss %}
2016-11-26 07:47:40 +01:00
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
2015-08-10 21:47:02 +02:00
2015-12-09 21:26:38 +01:00
// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }
2015-08-10 21:47:02 +02:00
2015-12-09 21:26:38 +01:00
// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }
2015-08-10 21:47:02 +02:00
2015-12-09 21:26:38 +01:00
// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }
2015-08-10 21:47:02 +02:00
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
{% endhighlight %}
Once again, these media queries are also available via Sass mixins:
{% highlight scss %}
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
{% endhighlight %}
2016-04-24 11:44:01 +02:00
We also have media between the breakpoint's minimum and maximum widths for only the given screen size:
{% highlight scss %}
2016-11-26 07:47:40 +01:00
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
2016-04-24 11:44:01 +02:00
2016-11-26 07:47:40 +01:00
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }
2016-04-24 11:44:01 +02:00
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
{% endhighlight %}
These media queries are also available via Sass mixins:
{% highlight scss %}
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
2016-04-24 11:54:50 +02:00
{% endhighlight %}
2016-04-24 11:44:01 +02:00
And finally media that spans multiple breakpoint widths:
{% highlight scss %}
2016-07-12 21:27:06 +02:00
// Example
2016-04-24 11:44:01 +02:00
// Medium devices (tablets, 768px and up) and Large devices (desktops, 992px and up)
@media (min-width: 768px) and (max-width: 1199px) { ... }
{% endhighlight %}
The Sass mixin for the above example look like that shown beneath:
{% highlight scss %}
@include media-breakpoint-between(md, lg) { ... }
{% endhighlight %}
2016-10-27 18:26:23 +02:00
## Z-index
Several Bootstrap components utilize `z-index` , the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more.
We don't encourage customization of these values; should you change one, you likely need to change them all.
```scss
$zindex-dropdown-backdrop: 990 !default;
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-navbar-sticky: 1030 !default;
2016-10-27 18:31:38 +02:00
$zindex-modal-backdrop: 1040 !default;
2016-10-27 18:26:23 +02:00
$zindex-modal: 1050 !default;
2016-10-27 18:31:38 +02:00
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
2016-10-27 18:26:23 +02:00
```
Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index` s, while navigation and popovers utilize higher `z-index` s to ensure they overlay surrounding content.