| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Overview | |
| 4 | 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. | |
| 5 | group: layout | |
| 6 | redirect_from: "/docs/4.2/layout/" | |
| 7 | toc: true | |
| 8 | --- | |
| 9 | ||
| 10 | ## Containers | |
| 11 | ||
| 12 | Containers are the most basic layout element in Bootstrap and are **required when using our default 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). | |
| 13 | ||
| 14 | While containers *can* be nested, most layouts do not require a nested container. | |
| 15 | ||
| 16 | <div class="bd-example"> | |
| 17 | <div class="bd-example-container"> | |
| 18 | <div class="bd-example-container-header"></div> | |
| 19 | <div class="bd-example-container-sidebar"></div> | |
| 20 | <div class="bd-example-container-body"></div> | |
| 21 | </div> | |
| 22 | </div> | |
| 23 | ||
| 24 | {% highlight html %} | |
| 25 | <div class="container"> | |
| 26 | <!-- Content here --> | |
| 27 | </div> | |
| 28 | {% endhighlight %} | |
| 29 | ||
| 30 | Use `.container-fluid` for a full width container, spanning the entire width of the viewport. | |
| 31 | ||
| 32 | <div class="bd-example"> | |
| 33 | <div class="bd-example-container bd-example-container-fluid"> | |
| 34 | <div class="bd-example-container-header"></div> | |
| 35 | <div class="bd-example-container-sidebar"></div> | |
| 36 | <div class="bd-example-container-body"></div> | |
| 37 | </div> | |
| 38 | </div> | |
| 39 | ||
| 40 | {% highlight html %} | |
| 41 | <div class="container-fluid"> | |
| 42 | ... | |
| 43 | </div> | |
| 44 | {% endhighlight %} | |
| 45 | ||
| 46 | ||
| 47 | ## Responsive breakpoints | |
| 48 | ||
| 49 | 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. | |
| 50 | ||
| 51 | Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. | |
| 52 | ||
| 53 | {% highlight scss %} | |
| 54 | // Extra small devices (portrait phones, less than 576px) | |
| 55 | // No media query for `xs` since this is the default in Bootstrap | |
| 56 | ||
| 57 | // Small devices (landscape phones, 576px and up) | |
| 58 | @media (min-width: 576px) { ... } | |
| 59 | ||
| 60 | // Medium devices (tablets, 768px and up) | |
| 61 | @media (min-width: 768px) { ... } | |
| 62 | ||
| 63 | // Large devices (desktops, 992px and up) | |
| 64 | @media (min-width: 992px) { ... } | |
| 65 | ||
| 66 | // Extra large devices (large desktops, 1200px and up) | |
| 67 | @media (min-width: 1200px) { ... } | |
| 68 | {% endhighlight %} | |
| 69 | ||
| 70 | Since we write our source CSS in Sass, all our media queries are available via Sass mixins: | |
| 71 | ||
| 72 | {% highlight scss %} | |
| 73 | // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` | |
| 74 | @include media-breakpoint-up(sm) { ... } | |
| 75 | @include media-breakpoint-up(md) { ... } | |
| 76 | @include media-breakpoint-up(lg) { ... } | |
| 77 | @include media-breakpoint-up(xl) { ... } | |
| 78 | ||
| 79 | // Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint | |
| 80 | .custom-class { | |
| 81 | display: none; | |
| 82 | } | |
| 83 | @include media-breakpoint-up(sm) { | |
| 84 | .custom-class { | |
| 85 | display: block; | |
| 86 | } | |
| 87 | } | |
| 88 | {% endhighlight %} | |
| 89 | ||
| 90 | We occasionally use media queries that go in the other direction (the given screen size *or smaller*): | |
| 91 | ||
| 92 | {% highlight scss %} | |
| 93 | // Extra small devices (portrait phones, less than 576px) | |
| 94 | @media (max-width: 575.98px) { ... } | |
| 95 | ||
| 96 | // Small devices (landscape phones, less than 768px) | |
| 97 | @media (max-width: 767.98px) { ... } | |
| 98 | ||
| 99 | // Medium devices (tablets, less than 992px) | |
| 100 | @media (max-width: 991.98px) { ... } | |
| 101 | ||
| 102 | // Large devices (desktops, less than 1200px) | |
| 103 | @media (max-width: 1199.98px) { ... } | |
| 104 | ||
| 105 | // Extra large devices (large desktops) | |
| 106 | // No media query since the extra-large breakpoint has no upper bound on its width | |
| 107 | {% endhighlight %} | |
| 108 | ||
| 109 | {% include callout-info-mediaqueries-breakpoints.md %} | |
| 110 | ||
| 111 | Once again, these media queries are also available via Sass mixins: | |
| 112 | ||
| 113 | {% highlight scss %} | |
| 114 | @include media-breakpoint-down(xs) { ... } | |
| 115 | @include media-breakpoint-down(sm) { ... } | |
| 116 | @include media-breakpoint-down(md) { ... } | |
| 117 | @include media-breakpoint-down(lg) { ... } | |
| 118 | // No media query necessary for xl breakpoint as it has no upper bound on its width | |
| 119 | ||
| 120 | // Example: Style from medium breakpoint and down | |
| 121 | @include media-breakpoint-down(md) { | |
| 122 | .custom-class { | |
| 123 | display: block; | |
| 124 | } | |
| 125 | } | |
| 126 | {% endhighlight %} | |
| 127 | ||
| 128 | There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. | |
| 129 | ||
| 130 | {% highlight scss %} | |
| 131 | // Extra small devices (portrait phones, less than 576px) | |
| 132 | @media (max-width: 575.98px) { ... } | |
| 133 | ||
| 134 | // Small devices (landscape phones, 576px and up) | |
| 135 | @media (min-width: 576px) and (max-width: 767.98px) { ... } | |
| 136 | ||
| 137 | // Medium devices (tablets, 768px and up) | |
| 138 | @media (min-width: 768px) and (max-width: 991.98px) { ... } | |
| 139 | ||
| 140 | // Large devices (desktops, 992px and up) | |
| 141 | @media (min-width: 992px) and (max-width: 1199.98px) { ... } | |
| 142 | ||
| 143 | // Extra large devices (large desktops, 1200px and up) | |
| 144 | @media (min-width: 1200px) { ... } | |
| 145 | {% endhighlight %} | |
| 146 | ||
| 147 | These media queries are also available via Sass mixins: | |
| 148 | ||
| 149 | {% highlight scss %} | |
| 150 | @include media-breakpoint-only(xs) { ... } | |
| 151 | @include media-breakpoint-only(sm) { ... } | |
| 152 | @include media-breakpoint-only(md) { ... } | |
| 153 | @include media-breakpoint-only(lg) { ... } | |
| 154 | @include media-breakpoint-only(xl) { ... } | |
| 155 | {% endhighlight %} | |
| 156 | ||
| 157 | Similarly, media queries may span multiple breakpoint widths: | |
| 158 | ||
| 159 | {% highlight scss %} | |
| 160 | // Example | |
| 161 | // Apply styles starting from medium devices and up to extra large devices | |
| 162 | @media (min-width: 768px) and (max-width: 1199.98px) { ... } | |
| 163 | {% endhighlight %} | |
| 164 | ||
| 165 | The Sass mixin for targeting the same screen size range would be: | |
| 166 | ||
| 167 | {% highlight scss %} | |
| 168 | @include media-breakpoint-between(md, xl) { ... } | |
| 169 | {% endhighlight %} | |
| 170 | ||
| 171 | ## Z-index | |
| 172 | ||
| 173 | 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. | |
| 174 | ||
| 175 | These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There's no reason we couldn't have used `100`+ or `500`+. | |
| 176 | ||
| 177 | We don't encourage customization of these individual values; should you change one, you likely need to change them all. | |
| 178 | ||
| 179 | {% highlight scss %} | |
| 180 | $zindex-dropdown: 1000 !default; | |
| 181 | $zindex-sticky: 1020 !default; | |
| 182 | $zindex-fixed: 1030 !default; | |
| 183 | $zindex-modal-backdrop: 1040 !default; | |
| 184 | $zindex-modal: 1050 !default; | |
| 185 | $zindex-popover: 1060 !default; | |
| 186 | $zindex-tooltip: 1070 !default; | |
| 187 | {% endhighlight %} | |
| 188 | ||
| 189 | To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements. | |
