]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
2 | layout: docs | |
3 | title: Responsive utilities | |
4 | description: Use responsive display utility classes for showing and hiding content by device, via media query. | |
5 | group: layout | |
6 | --- | |
7 | ||
8 | For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed. | |
9 | ||
10 | Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. | |
11 | ||
12 | ## Contents | |
13 | ||
14 | * Will be replaced with the ToC, excluding the "Contents" header | |
15 | {:toc} | |
16 | ||
17 | ## Available classes | |
18 | ||
19 | * The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports. | |
20 | * The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports. | |
21 | * There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size. | |
22 | * You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless. | |
23 | * These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases. | |
24 | ||
25 | <table class="table table-bordered table-striped responsive-utilities table-responsive"> | |
26 | <thead> | |
27 | <tr> | |
28 | <th></th> | |
29 | <th> | |
30 | Extra small devices | |
31 | <small>Portrait phones (<544px)</small> | |
32 | </th> | |
33 | <th> | |
34 | Small devices | |
35 | <small>Landscape phones (≥544px - <768px)</small> | |
36 | </th> | |
37 | <th> | |
38 | Medium devices | |
39 | <small>Tablets (≥768px - <992px)</small> | |
40 | </th> | |
41 | <th> | |
42 | Large devices | |
43 | <small>Desktops (≥992px - <1200px)</small> | |
44 | </th> | |
45 | <th> | |
46 | Extra large devices | |
47 | <small>Desktops (≥1200px)</small> | |
48 | </th> | |
49 | </tr> | |
50 | </thead> | |
51 | <tbody> | |
52 | <tr> | |
53 | <th scope="row"><code>.hidden-xs-down</code></th> | |
54 | <td class="is-hidden">Hidden</td> | |
55 | <td class="is-visible">Visible</td> | |
56 | <td class="is-visible">Visible</td> | |
57 | <td class="is-visible">Visible</td> | |
58 | <td class="is-visible">Visible</td> | |
59 | </tr> | |
60 | <tr> | |
61 | <th scope="row"><code>.hidden-sm-down</code></th> | |
62 | <td class="is-hidden">Hidden</td> | |
63 | <td class="is-hidden">Hidden</td> | |
64 | <td class="is-visible">Visible</td> | |
65 | <td class="is-visible">Visible</td> | |
66 | <td class="is-visible">Visible</td> | |
67 | </tr> | |
68 | <tr> | |
69 | <th scope="row"><code>.hidden-md-down</code></th> | |
70 | <td class="is-hidden">Hidden</td> | |
71 | <td class="is-hidden">Hidden</td> | |
72 | <td class="is-hidden">Hidden</td> | |
73 | <td class="is-visible">Visible</td> | |
74 | <td class="is-visible">Visible</td> | |
75 | </tr> | |
76 | <tr> | |
77 | <th scope="row"><code>.hidden-lg-down</code></th> | |
78 | <td class="is-hidden">Hidden</td> | |
79 | <td class="is-hidden">Hidden</td> | |
80 | <td class="is-hidden">Hidden</td> | |
81 | <td class="is-hidden">Hidden</td> | |
82 | <td class="is-visible">Visible</td> | |
83 | </tr> | |
84 | <tr> | |
85 | <th scope="row"><code>.hidden-xl-down</code></th> | |
86 | <td class="is-hidden">Hidden</td> | |
87 | <td class="is-hidden">Hidden</td> | |
88 | <td class="is-hidden">Hidden</td> | |
89 | <td class="is-hidden">Hidden</td> | |
90 | <td class="is-hidden">Hidden</td> | |
91 | </tr> | |
92 | <tr> | |
93 | <th scope="row"><code>.hidden-xs-up</code></th> | |
94 | <td class="is-hidden">Hidden</td> | |
95 | <td class="is-hidden">Hidden</td> | |
96 | <td class="is-hidden">Hidden</td> | |
97 | <td class="is-hidden">Hidden</td> | |
98 | <td class="is-hidden">Hidden</td> | |
99 | </tr> | |
100 | <tr> | |
101 | <th scope="row"><code>.hidden-sm-up</code></th> | |
102 | <td class="is-visible">Visible</td> | |
103 | <td class="is-hidden">Hidden</td> | |
104 | <td class="is-hidden">Hidden</td> | |
105 | <td class="is-hidden">Hidden</td> | |
106 | <td class="is-hidden">Hidden</td> | |
107 | </tr> | |
108 | <tr> | |
109 | <th scope="row"><code>.hidden-md-up</code></th> | |
110 | <td class="is-visible">Visible</td> | |
111 | <td class="is-visible">Visible</td> | |
112 | <td class="is-hidden">Hidden</td> | |
113 | <td class="is-hidden">Hidden</td> | |
114 | <td class="is-hidden">Hidden</td> | |
115 | </tr> | |
116 | <tr> | |
117 | <th scope="row"><code>.hidden-lg-up</code></th> | |
118 | <td class="is-visible">Visible</td> | |
119 | <td class="is-visible">Visible</td> | |
120 | <td class="is-visible">Visible</td> | |
121 | <td class="is-hidden">Hidden</td> | |
122 | <td class="is-hidden">Hidden</td> | |
123 | </tr> | |
124 | <tr> | |
125 | <th scope="row"><code>.hidden-xl-up</code></th> | |
126 | <td class="is-visible">Visible</td> | |
127 | <td class="is-visible">Visible</td> | |
128 | <td class="is-visible">Visible</td> | |
129 | <td class="is-visible">Visible</td> | |
130 | <td class="is-hidden">Hidden</td> | |
131 | </tr> | |
132 | </tbody> | |
133 | </table> | |
134 | ||
135 | <h2 id="responsive-utilities-print">Print classes</h2> | |
136 | <p>Similar to the regular responsive classes, use these for toggling content for print.</p> | |
137 | <table class="table table-bordered table-striped responsive-utilities table-responsive"> | |
138 | <thead> | |
139 | <tr> | |
140 | <th>Class</th> | |
141 | <th>Browser</th> | |
142 | <th>Print</th> | |
143 | </tr> | |
144 | </thead> | |
145 | <tbody> | |
146 | <tr> | |
147 | <th><code>.visible-print-block</code></th> | |
148 | <td class="is-hidden">Hidden</td> | |
149 | <td class="is-visible">Visible<br>(as <code>display: block</code>)</td> | |
150 | </tr> | |
151 | <tr> | |
152 | <th><code>.visible-print-inline</code></th> | |
153 | <td class="is-hidden">Hidden</td> | |
154 | <td class="is-visible">Visible<br>(as <code>display: inline</code>)</td> | |
155 | </tr> | |
156 | <tr> | |
157 | <th><code>.visible-print-inline-block</code></th> | |
158 | <td class="is-hidden">Hidden</td> | |
159 | <td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td> | |
160 | </tr> | |
161 | <tr> | |
162 | <th><code>.hidden-print</code></th> | |
163 | <td class="is-visible">Visible</td> | |
164 | <td class="is-hidden">Hidden</td> | |
165 | </tr> | |
166 | </tbody> | |
167 | </table> | |
168 | ||
169 | ## Test cases | |
170 | ||
171 | Resize your browser or load on different devices to test the responsive utility classes. | |
172 | ||
173 | Green checkmarks indicate the element **is visible** in your current viewport. | |
174 | ||
175 | <div class="row responsive-utilities-test visible-on"> | |
176 | <div class="col-6 col-sm-3"> | |
177 | <span class="hidden-sm-up visible">✔ Visible on extra small</span> | |
178 | <span class="hidden-xs-down not-visible">Extra small</span> | |
179 | </div> | |
180 | <div class="col-6 col-sm-3"> | |
181 | <span class="hidden-md-up visible">✔ Visible on small or narrower</span> | |
182 | <span class="hidden-sm-down not-visible">Small or narrower</span> | |
183 | </div> | |
184 | <div class="col-6 col-sm-3"> | |
185 | <span class="hidden-lg-up visible">✔ Visible on medium or narrower</span> | |
186 | <span class="hidden-md-down not-visible">Medium or narrower</span> | |
187 | </div> | |
188 | <div class="col-6 col-sm-3"> | |
189 | <span class="hidden-xl-up visible">✔ Visible on large or narrower</span> | |
190 | <span class="hidden-lg-down not-visible">Large or narrower</span> | |
191 | </div> | |
192 | </div> | |
193 | ||
194 | <hr> | |
195 | ||
196 | <div class="row responsive-utilities-test visible-on"> | |
197 | <div class="col-6 col-sm-3"> | |
198 | <span class="hidden-xs-down visible">✔ Visible on small or wider</span> | |
199 | <span class="hidden-sm-up not-visible">Small or wider</span> | |
200 | </div> | |
201 | <div class="col-6 col-sm-3"> | |
202 | <span class="hidden-sm-down visible">✔ Visible on medium or wider</span> | |
203 | <span class="hidden-md-up not-visible">Medium or wider</span> | |
204 | </div> | |
205 | <div class="col-6 col-sm-3"> | |
206 | <span class="hidden-md-down visible">✔ Visible on large or wider</span> | |
207 | <span class="hidden-lg-up not-visible">Large or wider</span> | |
208 | </div> | |
209 | <div class="col-6 col-sm-3"> | |
210 | <span class="hidden-lg-down visible">✔ Visible on extra large</span> | |
211 | <span class="hidden-xl-up not-visible">Extra large</span> | |
212 | </div> | |
213 | </div> | |
214 | ||
215 | <hr> | |
216 | ||
217 | <div class="row responsive-utilities-test visible-on"> | |
218 | <div class="col-6 col-sm-4"> | |
219 | <span class="hidden-sm-up visible">✔ Your viewport is exactly extra small</span> | |
220 | <span class="hidden-xs-down not-visible">Your viewport is NOT exactly extra small</span> | |
221 | </div> | |
222 | <div class="col-6 col-sm-4"> | |
223 | <span class="hidden-xs-down hidden-md-up visible">✔ Your viewport is exactly small</span> | |
224 | <span class="hidden-sm-only not-visible">Your viewport is NOT exactly small</span> | |
225 | </div> | |
226 | <div class="col-6 col-sm-4"> | |
227 | <span class="hidden-sm-down hidden-lg-up visible">✔ Your viewport is exactly medium</span> | |
228 | <span class="hidden-md-only not-visible">Your viewport is NOT exactly medium</span> | |
229 | </div> | |
230 | </div> | |
231 | ||
232 | <div class="row responsive-utilities-test visible-on"> | |
233 | <div class="col-6 col-sm-4"> | |
234 | <span class="hidden-md-down hidden-xl-up visible">✔ Your viewport is exactly large</span> | |
235 | <span class="hidden-lg-only not-visible">Your viewport is NOT exactly large</span> | |
236 | </div> | |
237 | <div class="col-6 col-sm-4"> | |
238 | <span class="hidden-lg-down visible">✔ Your viewport is exactly extra large</span> | |
239 | <span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span> | |
240 | </div> | |
241 | </div> |