]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
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: "/layout/" | |
7 | --- | |
8 | ||
9 | Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful flexbox grid system, a flexible media object, and responsive utility classes. | |
10 | ||
11 | ## Contents | |
12 | ||
13 | * Will be replaced with the ToC, excluding the "Contents" header | |
14 | {:toc} | |
15 | ||
16 | ## Containers | |
17 | ||
18 | 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). | |
19 | ||
20 | While containers *can* be nested, most layouts do not require a nested container. | |
21 | ||
22 | <div class="bd-example"> | |
23 | <div class="bd-example-container"> | |
24 | <div class="bd-example-container-header"></div> | |
25 | <div class="bd-example-container-sidebar"></div> | |
26 | <div class="bd-example-container-body"></div> | |
27 | </div> | |
28 | </div> | |
29 | ||
30 | {% highlight html %} | |
31 | <div class="container"> | |
32 | <!-- Content here --> | |
33 | </div> | |
34 | {% endhighlight %} | |
35 | ||
36 | Use `.container-fluid` for a full width container, spanning the entire width of the viewport. | |
37 | ||
38 | <div class="bd-example"> | |
39 | <div class="bd-example-container bd-example-container-fluid"> | |
40 | <div class="bd-example-container-header"></div> | |
41 | <div class="bd-example-container-sidebar"></div> | |
42 | <div class="bd-example-container-body"></div> | |
43 | </div> | |
44 | </div> | |
45 | ||
46 | {% highlight html %} | |
47 | <div class="container-fluid"> | |
48 | ... | |
49 | </div> | |
50 | {% endhighlight %} | |
51 | ||
52 | ||
53 | ## Responsive breakpoints | |
54 | ||
55 | 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. | |
56 | ||
57 | Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. | |
58 | ||
59 | {% highlight scss %} | |
60 | // Extra small devices (portrait phones, less than 576px) | |
61 | // No media query since this is the default in Bootstrap | |
62 | ||
63 | // Small devices (landscape phones, 576px and up) | |
64 | @media (min-width: 576px) { ... } | |
65 | ||
66 | // Medium devices (tablets, 768px and up) | |
67 | @media (min-width: 768px) { ... } | |
68 | ||
69 | // Large devices (desktops, 992px and up) | |
70 | @media (min-width: 992px) { ... } | |
71 | ||
72 | // Extra large devices (large desktops, 1200px and up) | |
73 | @media (min-width: 1200px) { ... } | |
74 | {% endhighlight %} | |
75 | ||
76 | Since we write our source CSS in Sass, all our media queries are available via Sass mixins: | |
77 | ||
78 | {% highlight scss %} | |
79 | @include media-breakpoint-up(xs) { ... } | |
80 | @include media-breakpoint-up(sm) { ... } | |
81 | @include media-breakpoint-up(md) { ... } | |
82 | @include media-breakpoint-up(lg) { ... } | |
83 | @include media-breakpoint-up(xl) { ... } | |
84 | ||
85 | // Example usage: | |
86 | @include media-breakpoint-up(sm) { | |
87 | .some-class { | |
88 | display: block; | |
89 | } | |
90 | } | |
91 | {% endhighlight %} | |
92 | ||
93 | We occasionally use media queries that go in the other direction (the given screen size *or smaller*): | |
94 | ||
95 | {% highlight scss %} | |
96 | // Extra small devices (portrait phones, less than 576px) | |
97 | @media (max-width: 575px) { ... } | |
98 | ||
99 | // Small devices (landscape phones, less than 768px) | |
100 | @media (max-width: 767px) { ... } | |
101 | ||
102 | // Medium devices (tablets, less than 992px) | |
103 | @media (max-width: 991px) { ... } | |
104 | ||
105 | // Large devices (desktops, less than 1200px) | |
106 | @media (max-width: 1199px) { ... } | |
107 | ||
108 | // Extra large devices (large desktops) | |
109 | // No media query since the extra-large breakpoint has no upper bound on its width | |
110 | {% endhighlight %} | |
111 | ||
112 | Once again, these media queries are also available via Sass mixins: | |
113 | ||
114 | {% highlight scss %} | |
115 | @include media-breakpoint-down(xs) { ... } | |
116 | @include media-breakpoint-down(sm) { ... } | |
117 | @include media-breakpoint-down(md) { ... } | |
118 | @include media-breakpoint-down(lg) { ... } | |
119 | {% endhighlight %} | |
120 | ||
121 | There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. | |
122 | ||
123 | {% highlight scss %} | |
124 | // Extra small devices (portrait phones, less than 576px) | |
125 | @media (max-width: 575px) { ... } | |
126 | ||
127 | // Small devices (landscape phones, 576px and up) | |
128 | @media (min-width: 576px) and (max-width: 767px) { ... } | |
129 | ||
130 | // Medium devices (tablets, 768px and up) | |
131 | @media (min-width: 768px) and (max-width: 991px) { ... } | |
132 | ||
133 | // Large devices (desktops, 992px and up) | |
134 | @media (min-width: 992px) and (max-width: 1199px) { ... } | |
135 | ||
136 | // Extra large devices (large desktops, 1200px and up) | |
137 | @media (min-width: 1200px) { ... } | |
138 | {% endhighlight %} | |
139 | ||
140 | These media queries are also available via Sass mixins: | |
141 | ||
142 | {% highlight scss %} | |
143 | @include media-breakpoint-only(xs) { ... } | |
144 | @include media-breakpoint-only(sm) { ... } | |
145 | @include media-breakpoint-only(md) { ... } | |
146 | @include media-breakpoint-only(lg) { ... } | |
147 | @include media-breakpoint-only(xl) { ... } | |
148 | {% endhighlight %} | |
149 | ||
150 | Similarly, media queries may span multiple breakpoint widths: | |
151 | ||
152 | {% highlight scss %} | |
153 | // Example | |
154 | // Apply styles starting from medium devices and up to extra large devices | |
155 | @media (min-width: 768px) and (max-width: 1199px) { ... } | |
156 | {% endhighlight %} | |
157 | ||
158 | The Sass mixin for targeting the same screen size range would be: | |
159 | ||
160 | {% highlight scss %} | |
161 | @include media-breakpoint-between(md, xl) { ... } | |
162 | {% endhighlight %} | |
163 | ||
164 | ## Z-index | |
165 | ||
166 | 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. | |
167 | ||
168 | We don't encourage customization of these values; should you change one, you likely need to change them all. | |
169 | ||
170 | ```scss | |
171 | $zindex-dropdown-backdrop: 990 !default; | |
172 | $zindex-navbar: 1000 !default; | |
173 | $zindex-dropdown: 1000 !default; | |
174 | $zindex-fixed: 1030 !default; | |
175 | $zindex-sticky: 1030 !default; | |
176 | $zindex-modal-backdrop: 1040 !default; | |
177 | $zindex-modal: 1050 !default; | |
178 | $zindex-popover: 1060 !default; | |
179 | $zindex-tooltip: 1070 !default; | |
180 | ``` | |
181 | ||
182 | 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. |