blob: fc33e6b117b3b37a61da9e70d418e34c006ee426 [file] [log] [blame]
Mark Otto47b3c9c2018-04-09 16:02:591<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta name="description" content="Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
7<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
Mark Otto1e258342018-07-12 16:39:258<meta name="generator" content="Jekyll v3.8.3">
Mark Otto47b3c9c2018-04-09 16:02:599
10<title>Navbar · Bootstrap</title>
11
XhmikosRc2635162019-02-28 10:48:0812<link rel="canonical" href="https://getbootstrap.com/docs/4.1/components/navbar/">
13
Mark Otto47b3c9c2018-04-09 16:02:5914<!-- Bootstrap core CSS -->
15
Mark Ottoea412982018-07-24 16:28:5316<link href="/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Mark Otto47b3c9c2018-04-09 16:02:5917
18
19<!-- Documentation extras -->
20
21<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
22
Mark Otto0f805a42018-06-27 02:09:3723<link href="/docs/4.1/assets/css/docs.min.css" rel="stylesheet">
Mark Otto47b3c9c2018-04-09 16:02:5924
25<!-- Favicons -->
Mark Ottof8215e22018-04-30 17:51:0326<link rel="apple-touch-icon" href="/docs/4.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
27<link rel="icon" href="/docs/4.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
28<link rel="icon" href="/docs/4.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
29<link rel="manifest" href="/docs/4.1/assets/img/favicons/manifest.json">
30<link rel="mask-icon" href="/docs/4.1/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
XhmikosRc35147e2019-03-15 08:32:1331<link rel="icon" href="/docs/4.1/assets/img/favicons/favicon.ico">
Mark Otto3543ba52018-05-21 06:32:0832<meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml">
Mark Otto47b3c9c2018-04-09 16:02:5933<meta name="theme-color" content="#563d7c">
34
35
36<!-- Twitter -->
37<meta name="twitter:card" content="summary">
38<meta name="twitter:site" content="@getbootstrap">
39<meta name="twitter:creator" content="@getbootstrap">
40<meta name="twitter:title" content="Navbar">
41<meta name="twitter:description" content="Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
Mark Ottoecb29932018-06-27 02:21:4842<meta name="twitter:image" content="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social-logo.png">
Mark Otto47b3c9c2018-04-09 16:02:5943
44<!-- Facebook -->
45<meta property="og:url" content="https://getbootstrap.com/docs/4.1/components/navbar/">
46<meta property="og:title" content="Navbar">
47<meta property="og:description" content="Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
48<meta property="og:type" content="website">
Mark Otto1e258342018-07-12 16:39:2549<meta property="og:image" content="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social.png">
Mark Ottoecb29932018-06-27 02:21:4850<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social.png">
Mark Otto47b3c9c2018-04-09 16:02:5951<meta property="og:image:type" content="image/png">
52<meta property="og:image:width" content="1200">
53<meta property="og:image:height" content="630">
54
55
Mark Otto0d0ca302022-05-09 23:59:0556<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
Mark Otto47b3c9c2018-04-09 16:02:5957<script>
Mark Otto1e258342018-07-12 16:39:2558 window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
Mark Otto47b3c9c2018-04-09 16:02:5959 ga('create', 'UA-146052-10', 'getbootstrap.com');
XhmikosR7c1330c2019-03-15 08:03:3860 ga('set', 'anonymizeIp', true);
Mark Otto47b3c9c2018-04-09 16:02:5961 ga('send', 'pageview');
62</script>
Mark Otto1e258342018-07-12 16:39:2563<script async src='https://www.google-analytics.com/analytics.js'></script>
Mark Otto47b3c9c2018-04-09 16:02:5964
65 </head>
66 <body>
67 <a id="skippy" class="sr-only sr-only-focusable" href="#content">
68 <div class="container">
69 <span class="skiplink-text">Skip to main content</span>
70 </div>
71</a>
Julien Déramond87498ce2023-05-17 16:39:0572<a href="https://getbootstrap.com/" class="d-block px-3 py-2 text-center text-bold text-white old-bv">There's a newer version of Bootstrap!</a>
Mark Otto47b3c9c2018-04-09 16:02:5973
74 <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
75 <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
76</a>
77
78 <div class="navbar-nav-scroll">
79 <ul class="navbar-nav bd-navbar-nav flex-row">
80 <li class="nav-item">
81 <a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
82 </li>
83 <li class="nav-item">
84 <a class="nav-link active" href="/docs/4.1/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
85 </li>
86 <li class="nav-item">
87 <a class="nav-link " href="/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
88 </li>
89 <li class="nav-item">
90 <a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
91 </li>
Mark Otto47b3c9c2018-04-09 16:02:5992 <li class="nav-item">
93 <a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
94 </li>
95 <li class="nav-item">
96 <a class="nav-link" href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
97 </li>
98 </ul>
99 </div>
100
101 <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
102 <li class="nav-item dropdown">
103 <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
104 v4.1
105 </a>
106 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
107 <a class="dropdown-item active" href="/docs/4.1/">Latest (4.1.x)</a>
108 <a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
109 <div class="dropdown-divider"></div>
110 <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
111 <a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
112 <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
113 </div>
114 </li>
115
116 <li class="nav-item">
117 <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
118</a>
119 </li>
120 <li class="nav-item">
121 <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
122</a>
123 </li>
Mark Otto47b3c9c2018-04-09 16:02:59124 </ul>
125
Mark Otto1e258342018-07-12 16:39:25126 <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.1/getting-started/download/">Download</a>
Mark Otto47b3c9c2018-04-09 16:02:59127</header>
128
129
130 <div class="container-fluid">
131 <div class="row flex-xl-nowrap">
132 <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
133 <form class="bd-search d-flex align-items-center">
Mark Otto275026b2018-04-25 05:29:52134 <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-siteurl="https://getbootstrap.com" data-docs-version="4.1">
Mark Otto47b3c9c2018-04-09 16:02:59135 <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
136</button>
137</form>
138
139<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
140 <a class="bd-toc-link" href="/docs/4.1/getting-started/introduction/">
141 Getting started
142 </a>
143
144 <ul class="nav bd-sidenav"><li>
145 <a href="/docs/4.1/getting-started/introduction/">
146 Introduction
147 </a></li><li>
148 <a href="/docs/4.1/getting-started/download/">
149 Download
150 </a></li><li>
151 <a href="/docs/4.1/getting-started/contents/">
152 Contents
153 </a></li><li>
154 <a href="/docs/4.1/getting-started/browsers-devices/">
155 Browsers & devices
156 </a></li><li>
157 <a href="/docs/4.1/getting-started/javascript/">
158 JavaScript
159 </a></li><li>
160 <a href="/docs/4.1/getting-started/theming/">
161 Theming
162 </a></li><li>
163 <a href="/docs/4.1/getting-started/build-tools/">
164 Build tools
165 </a></li><li>
166 <a href="/docs/4.1/getting-started/webpack/">
167 Webpack
168 </a></li><li>
169 <a href="/docs/4.1/getting-started/accessibility/">
170 Accessibility
171 </a></li></ul>
172 </div><div class="bd-toc-item">
173 <a class="bd-toc-link" href="/docs/4.1/layout/overview/">
174 Layout
175 </a>
176
177 <ul class="nav bd-sidenav"><li>
178 <a href="/docs/4.1/layout/overview/">
179 Overview
180 </a></li><li>
181 <a href="/docs/4.1/layout/grid/">
182 Grid
183 </a></li><li>
184 <a href="/docs/4.1/layout/media-object/">
185 Media object
186 </a></li><li>
187 <a href="/docs/4.1/layout/utilities-for-layout/">
188 Utilities for layout
189 </a></li></ul>
190 </div><div class="bd-toc-item">
191 <a class="bd-toc-link" href="/docs/4.1/content/reboot/">
192 Content
193 </a>
194
195 <ul class="nav bd-sidenav"><li>
196 <a href="/docs/4.1/content/reboot/">
197 Reboot
198 </a></li><li>
199 <a href="/docs/4.1/content/typography/">
200 Typography
201 </a></li><li>
202 <a href="/docs/4.1/content/code/">
203 Code
204 </a></li><li>
205 <a href="/docs/4.1/content/images/">
206 Images
207 </a></li><li>
208 <a href="/docs/4.1/content/tables/">
209 Tables
210 </a></li><li>
211 <a href="/docs/4.1/content/figures/">
212 Figures
213 </a></li></ul>
214 </div><div class="bd-toc-item active">
215 <a class="bd-toc-link" href="/docs/4.1/components/alerts/">
216 Components
217 </a>
218
219 <ul class="nav bd-sidenav"><li>
220 <a href="/docs/4.1/components/alerts/">
221 Alerts
222 </a></li><li>
223 <a href="/docs/4.1/components/badge/">
224 Badge
225 </a></li><li>
226 <a href="/docs/4.1/components/breadcrumb/">
227 Breadcrumb
228 </a></li><li>
229 <a href="/docs/4.1/components/buttons/">
230 Buttons
231 </a></li><li>
232 <a href="/docs/4.1/components/button-group/">
233 Button group
234 </a></li><li>
235 <a href="/docs/4.1/components/card/">
236 Card
237 </a></li><li>
238 <a href="/docs/4.1/components/carousel/">
239 Carousel
240 </a></li><li>
241 <a href="/docs/4.1/components/collapse/">
242 Collapse
243 </a></li><li>
244 <a href="/docs/4.1/components/dropdowns/">
245 Dropdowns
246 </a></li><li>
247 <a href="/docs/4.1/components/forms/">
248 Forms
249 </a></li><li>
250 <a href="/docs/4.1/components/input-group/">
251 Input group
252 </a></li><li>
253 <a href="/docs/4.1/components/jumbotron/">
254 Jumbotron
255 </a></li><li>
256 <a href="/docs/4.1/components/list-group/">
257 List group
258 </a></li><li>
259 <a href="/docs/4.1/components/modal/">
260 Modal
261 </a></li><li>
262 <a href="/docs/4.1/components/navs/">
263 Navs
264 </a></li><li class="active bd-sidenav-active">
265 <a href="/docs/4.1/components/navbar/">
266 Navbar
267 </a></li><li>
268 <a href="/docs/4.1/components/pagination/">
269 Pagination
270 </a></li><li>
271 <a href="/docs/4.1/components/popovers/">
272 Popovers
273 </a></li><li>
274 <a href="/docs/4.1/components/progress/">
275 Progress
276 </a></li><li>
277 <a href="/docs/4.1/components/scrollspy/">
278 Scrollspy
279 </a></li><li>
280 <a href="/docs/4.1/components/tooltips/">
281 Tooltips
282 </a></li></ul>
283 </div><div class="bd-toc-item">
284 <a class="bd-toc-link" href="/docs/4.1/utilities/borders/">
285 Utilities
286 </a>
287
288 <ul class="nav bd-sidenav"><li>
289 <a href="/docs/4.1/utilities/borders/">
290 Borders
291 </a></li><li>
292 <a href="/docs/4.1/utilities/clearfix/">
293 Clearfix
294 </a></li><li>
295 <a href="/docs/4.1/utilities/close-icon/">
296 Close icon
297 </a></li><li>
298 <a href="/docs/4.1/utilities/colors/">
299 Colors
300 </a></li><li>
301 <a href="/docs/4.1/utilities/display/">
302 Display
303 </a></li><li>
304 <a href="/docs/4.1/utilities/embed/">
305 Embed
306 </a></li><li>
307 <a href="/docs/4.1/utilities/flex/">
308 Flex
309 </a></li><li>
310 <a href="/docs/4.1/utilities/float/">
311 Float
312 </a></li><li>
313 <a href="/docs/4.1/utilities/image-replacement/">
314 Image replacement
315 </a></li><li>
316 <a href="/docs/4.1/utilities/position/">
317 Position
318 </a></li><li>
319 <a href="/docs/4.1/utilities/screenreaders/">
320 Screenreaders
321 </a></li><li>
322 <a href="/docs/4.1/utilities/shadows/">
323 Shadows
324 </a></li><li>
325 <a href="/docs/4.1/utilities/sizing/">
326 Sizing
327 </a></li><li>
328 <a href="/docs/4.1/utilities/spacing/">
329 Spacing
330 </a></li><li>
331 <a href="/docs/4.1/utilities/text/">
332 Text
333 </a></li><li>
334 <a href="/docs/4.1/utilities/vertical-align/">
335 Vertical align
336 </a></li><li>
337 <a href="/docs/4.1/utilities/visibility/">
338 Visibility
339 </a></li></ul>
340 </div><div class="bd-toc-item">
341 <a class="bd-toc-link" href="/docs/4.1/extend/approach/">
342 Extend
343 </a>
344
345 <ul class="nav bd-sidenav"><li>
346 <a href="/docs/4.1/extend/approach/">
347 Approach
348 </a></li><li>
349 <a href="/docs/4.1/extend/icons/">
350 Icons
351 </a></li></ul>
352 </div><div class="bd-toc-item">
353 <a class="bd-toc-link" href="/docs/4.1/migration/">
354 Migration
355 </a>
356
357 <ul class="nav bd-sidenav"></ul>
358 </div><div class="bd-toc-item">
359 <a class="bd-toc-link" href="/docs/4.1/about/overview/">
360 About
361 </a>
362
363 <ul class="nav bd-sidenav"><li>
364 <a href="/docs/4.1/about/overview/">
365 Overview
366 </a></li><li>
367 <a href="/docs/4.1/about/brand/">
368 Brand
369 </a></li><li>
370 <a href="/docs/4.1/about/license/">
371 License
372 </a></li><li>
373 <a href="/docs/4.1/about/translations/">
374 Translations
375 </a></li></ul>
376 </div></nav>
377
378 </div>
379
Mark Otto0d0ca302022-05-09 23:59:05380
Mark Otto47b3c9c2018-04-09 16:02:59381 <div class="d-none d-xl-block col-xl-2 bd-toc">
382 <ul class="section-nav">
383<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
384<li class="toc-entry toc-h2"><a href="#supported-content">Supported content</a>
385<ul>
386<li class="toc-entry toc-h3"><a href="#brand">Brand</a></li>
387<li class="toc-entry toc-h3"><a href="#nav">Nav</a></li>
388<li class="toc-entry toc-h3"><a href="#forms">Forms</a></li>
389<li class="toc-entry toc-h3"><a href="#text">Text</a></li>
390</ul>
391</li>
392<li class="toc-entry toc-h2"><a href="#color-schemes">Color schemes</a></li>
393<li class="toc-entry toc-h2"><a href="#containers">Containers</a></li>
394<li class="toc-entry toc-h2"><a href="#placement">Placement</a></li>
395<li class="toc-entry toc-h2"><a href="#responsive-behaviors">Responsive behaviors</a>
396<ul>
397<li class="toc-entry toc-h3"><a href="#toggler">Toggler</a></li>
398<li class="toc-entry toc-h3"><a href="#external-content">External content</a></li>
399</ul>
400</li>
401</ul>
402 </div>
Mark Otto0d0ca302022-05-09 23:59:05403
Mark Otto47b3c9c2018-04-09 16:02:59404
405 <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
406 <h1 class="bd-title" id="content">Navbar</h1>
407 <p class="bd-lead">Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.</p>
Mark Otto1e258342018-07-12 16:39:25408 <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
Mark Otto47b3c9c2018-04-09 16:02:59409
410 <h2 id="how-it-works">How it works</h2>
411
412<p>Here’s what you need to know before getting started with the navbar:</p>
413
414<ul>
415 <li>Navbars require a wrapping <code class="highlighter-rouge">.navbar</code> with <code class="highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> for responsive collapsing and <a href="#color-schemes">color scheme</a> classes.</li>
416 <li>Navbars and their contents are fluid by default. Use <a href="#containers">optional containers</a> to limit their horizontal width.</li>
417 <li>Use our <a href="/docs/4.1/utilities/spacing/">spacing</a> and <a href="/docs/4.1/utilities/flex/">flex</a> utility classes for controlling spacing and alignment within navbars.</li>
418 <li>Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.</li>
419 <li>Navbars are hidden by default when printing. Force them to be printed by adding <code class="highlighter-rouge">.d-print</code> to the <code class="highlighter-rouge">.navbar</code>. See the <a href="/docs/4.1/utilities/display/">display</a> utility class.</li>
420 <li>Ensure accessibility by using a <code class="highlighter-rouge">&lt;nav&gt;</code> element or, if using a more generic element such as a <code class="highlighter-rouge">&lt;div&gt;</code>, add a <code class="highlighter-rouge">role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</li>
421</ul>
422
423<p>Read on for an example and list of supported sub-components.</p>
424
425<h2 id="supported-content">Supported content</h2>
426
427<p>Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:</p>
428
429<ul>
430 <li><code class="highlighter-rouge">.navbar-brand</code> for your company, product, or project name.</li>
431 <li><code class="highlighter-rouge">.navbar-nav</code> for a full-height and lightweight navigation (including support for dropdowns).</li>
432 <li><code class="highlighter-rouge">.navbar-toggler</code> for use with our collapse plugin and other <a href="#responsive-behaviors">navigation toggling</a> behaviors.</li>
433 <li><code class="highlighter-rouge">.form-inline</code> for any form controls and actions.</li>
434 <li><code class="highlighter-rouge">.navbar-text</code> for adding vertically centered strings of text.</li>
435 <li><code class="highlighter-rouge">.collapse.navbar-collapse</code> for grouping and hiding navbar contents by a parent breakpoint.</li>
436</ul>
437
438<p>Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the <code class="highlighter-rouge">lg</code> (large) breakpoint.</p>
439
440<div class="bd-example">
441<nav class="navbar navbar-expand-lg navbar-light bg-light">
442 <a class="navbar-brand" href="#">Navbar</a>
443 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
444 <span class="navbar-toggler-icon"></span>
445 </button>
446
447 <div class="collapse navbar-collapse" id="navbarSupportedContent">
448 <ul class="navbar-nav mr-auto">
449 <li class="nav-item active">
450 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
451 </li>
452 <li class="nav-item">
453 <a class="nav-link" href="#">Link</a>
454 </li>
455 <li class="nav-item dropdown">
456 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
457 Dropdown
458 </a>
459 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
460 <a class="dropdown-item" href="#">Action</a>
461 <a class="dropdown-item" href="#">Another action</a>
462 <div class="dropdown-divider"></div>
463 <a class="dropdown-item" href="#">Something else here</a>
464 </div>
465 </li>
466 <li class="nav-item">
467 <a class="nav-link disabled" href="#">Disabled</a>
468 </li>
469 </ul>
470 <form class="form-inline my-2 my-lg-0">
471 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
472 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
473 </form>
474 </div>
475</nav>
476</div>
477<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="nt">&gt;</span>
478 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
479 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarSupportedContent"</span> <span class="na">aria-controls=</span><span class="s">"navbarSupportedContent"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
480 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
481 <span class="nt">&lt;/button&gt;</span>
482
483 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarSupportedContent"</span><span class="nt">&gt;</span>
484 <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto"</span><span class="nt">&gt;</span>
485 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
486 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
487 <span class="nt">&lt;/li&gt;</span>
488 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
489 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
490 <span class="nt">&lt;/li&gt;</span>
491 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
492 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"navbarDropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
493 Dropdown
494 <span class="nt">&lt;/a&gt;</span>
495 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"navbarDropdown"</span><span class="nt">&gt;</span>
496 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
497 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
498 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">&gt;&lt;/div&gt;</span>
499 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
500 <span class="nt">&lt;/div&gt;</span>
501 <span class="nt">&lt;/li&gt;</span>
502 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
503 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/a&gt;</span>
504 <span class="nt">&lt;/li&gt;</span>
505 <span class="nt">&lt;/ul&gt;</span>
506 <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline my-2 my-lg-0"</span><span class="nt">&gt;</span>
507 <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
508 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
509 <span class="nt">&lt;/form&gt;</span>
510 <span class="nt">&lt;/div&gt;</span>
511<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
512
513<p>This example uses <a href="/docs/4.1/utilities/colors/">color</a> (<code class="highlighter-rouge">bg-light</code>) and <a href="/docs/4.1/utilities/spacing/">spacing</a> (<code class="highlighter-rouge">my-2</code>, <code class="highlighter-rouge">my-lg-0</code>, <code class="highlighter-rouge">mr-sm-0</code>, <code class="highlighter-rouge">my-sm-0</code>) utility classes.</p>
514
515<h3 id="brand">Brand</h3>
516
517<p>The <code class="highlighter-rouge">.navbar-brand</code> can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.</p>
518
519<div class="bd-example">
520<!-- As a link -->
521<nav class="navbar navbar-light bg-light">
522 <a class="navbar-brand" href="#">Navbar</a>
523</nav>
524
525<!-- As a heading -->
526<nav class="navbar navbar-light bg-light">
527 <span class="navbar-brand mb-0 h1">Navbar</span>
528</nav>
529</div>
530<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- As a link --&gt;</span>
531<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
532 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
533<span class="nt">&lt;/nav&gt;</span>
534
535<span class="c">&lt;!-- As a heading --&gt;</span>
536<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
537 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-brand mb-0 h1"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/span&gt;</span>
538<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
539
540<p>Adding images to the <code class="highlighter-rouge">.navbar-brand</code> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.</p>
541
542<div class="bd-example">
543<!-- Just an image -->
544<nav class="navbar navbar-light bg-light">
545 <a class="navbar-brand" href="#">
Mark Otto3543ba52018-05-21 06:32:08546 <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="" />
Mark Otto47b3c9c2018-04-09 16:02:59547 </a>
548</nav>
549</div>
550<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Just an image --&gt;</span>
551<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
552 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
Mark Otto3543ba52018-05-21 06:32:08553 <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/docs/4.1/assets/brand/bootstrap-solid.svg"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
Mark Otto47b3c9c2018-04-09 16:02:59554 <span class="nt">&lt;/a&gt;</span>
555<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
556
557<div class="bd-example">
558<!-- Image and text -->
559<nav class="navbar navbar-light bg-light">
560 <a class="navbar-brand" href="#">
Mark Otto3543ba52018-05-21 06:32:08561 <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" />
Mark Otto47b3c9c2018-04-09 16:02:59562 Bootstrap
563 </a>
564</nav>
565</div>
566<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Image and text --&gt;</span>
567<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
568 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
Mark Otto3543ba52018-05-21 06:32:08569 <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/docs/4.1/assets/brand/bootstrap-solid.svg"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">class=</span><span class="s">"d-inline-block align-top"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
Mark Otto47b3c9c2018-04-09 16:02:59570 Bootstrap
571 <span class="nt">&lt;/a&gt;</span>
572<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
573
574<h3 id="nav">Nav</h3>
575
576<p>Navbar navigation links build on our <code class="highlighter-rouge">.nav</code> options with their own modifier class and require the use of <a href="#toggler">toggler classes</a> for proper responsive styling. <strong>Navigation in navbars will also grow to occupy as much horizontal space as possible</strong> to keep your navbar contents securely aligned.</p>
577
578<p>Active states—with <code class="highlighter-rouge">.active</code>—to indicate the current page can be applied directly to <code class="highlighter-rouge">.nav-link</code>s or their immediate parent <code class="highlighter-rouge">.nav-item</code>s.</p>
579
580<div class="bd-example">
581<nav class="navbar navbar-expand-lg navbar-light bg-light">
582 <a class="navbar-brand" href="#">Navbar</a>
583 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
584 <span class="navbar-toggler-icon"></span>
585 </button>
586 <div class="collapse navbar-collapse" id="navbarNav">
587 <ul class="navbar-nav">
588 <li class="nav-item active">
589 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
590 </li>
591 <li class="nav-item">
592 <a class="nav-link" href="#">Features</a>
593 </li>
594 <li class="nav-item">
595 <a class="nav-link" href="#">Pricing</a>
596 </li>
597 <li class="nav-item">
598 <a class="nav-link disabled" href="#">Disabled</a>
599 </li>
600 </ul>
601 </div>
602</nav>
603</div>
604<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="nt">&gt;</span>
605 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
606 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarNav"</span> <span class="na">aria-controls=</span><span class="s">"navbarNav"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
607 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
608 <span class="nt">&lt;/button&gt;</span>
609 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarNav"</span><span class="nt">&gt;</span>
610 <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">&gt;</span>
611 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
612 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
613 <span class="nt">&lt;/li&gt;</span>
614 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
615 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Features<span class="nt">&lt;/a&gt;</span>
616 <span class="nt">&lt;/li&gt;</span>
617 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
618 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Pricing<span class="nt">&lt;/a&gt;</span>
619 <span class="nt">&lt;/li&gt;</span>
620 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
621 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/a&gt;</span>
622 <span class="nt">&lt;/li&gt;</span>
623 <span class="nt">&lt;/ul&gt;</span>
624 <span class="nt">&lt;/div&gt;</span>
625<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
626
627<p>And because we use classes for our navs, you can avoid the list-based approach entirely if you like.</p>
628
629<div class="bd-example">
630<nav class="navbar navbar-expand-lg navbar-light bg-light">
631 <a class="navbar-brand" href="#">Navbar</a>
632 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
633 <span class="navbar-toggler-icon"></span>
634 </button>
635 <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
636 <div class="navbar-nav">
637 <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
638 <a class="nav-item nav-link" href="#">Features</a>
639 <a class="nav-item nav-link" href="#">Pricing</a>
640 <a class="nav-item nav-link disabled" href="#">Disabled</a>
641 </div>
642 </div>
643</nav>
644</div>
645<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="nt">&gt;</span>
646 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
647 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarNavAltMarkup"</span> <span class="na">aria-controls=</span><span class="s">"navbarNavAltMarkup"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
648 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
649 <span class="nt">&lt;/button&gt;</span>
650 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarNavAltMarkup"</span><span class="nt">&gt;</span>
651 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">&gt;</span>
652 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-item nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
653 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Features<span class="nt">&lt;/a&gt;</span>
654 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Pricing<span class="nt">&lt;/a&gt;</span>
655 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-item nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/a&gt;</span>
656 <span class="nt">&lt;/div&gt;</span>
657 <span class="nt">&lt;/div&gt;</span>
658<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
659
660<p>You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for <code class="highlighter-rouge">.nav-item</code> and <code class="highlighter-rouge">.nav-link</code> as shown below.</p>
661
662<div class="bd-example">
663<nav class="navbar navbar-expand-lg navbar-light bg-light">
664 <a class="navbar-brand" href="#">Navbar</a>
665 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
666 <span class="navbar-toggler-icon"></span>
667 </button>
668 <div class="collapse navbar-collapse" id="navbarNavDropdown">
669 <ul class="navbar-nav">
670 <li class="nav-item active">
671 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
672 </li>
673 <li class="nav-item">
674 <a class="nav-link" href="#">Features</a>
675 </li>
676 <li class="nav-item">
677 <a class="nav-link" href="#">Pricing</a>
678 </li>
679 <li class="nav-item dropdown">
Mark Otto1e258342018-07-12 16:39:25680 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Mark Otto47b3c9c2018-04-09 16:02:59681 Dropdown link
682 </a>
683 <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
684 <a class="dropdown-item" href="#">Action</a>
685 <a class="dropdown-item" href="#">Another action</a>
686 <a class="dropdown-item" href="#">Something else here</a>
687 </div>
688 </li>
689 </ul>
690 </div>
691</nav>
692</div>
693<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="nt">&gt;</span>
694 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
695 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarNavDropdown"</span> <span class="na">aria-controls=</span><span class="s">"navbarNavDropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
696 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
697 <span class="nt">&lt;/button&gt;</span>
698 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarNavDropdown"</span><span class="nt">&gt;</span>
699 <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">&gt;</span>
700 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
701 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
702 <span class="nt">&lt;/li&gt;</span>
703 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
704 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Features<span class="nt">&lt;/a&gt;</span>
705 <span class="nt">&lt;/li&gt;</span>
706 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
707 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Pricing<span class="nt">&lt;/a&gt;</span>
708 <span class="nt">&lt;/li&gt;</span>
709 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
Mark Otto1e258342018-07-12 16:39:25710 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"navbarDropdownMenuLink"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
Mark Otto47b3c9c2018-04-09 16:02:59711 Dropdown link
712 <span class="nt">&lt;/a&gt;</span>
713 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"navbarDropdownMenuLink"</span><span class="nt">&gt;</span>
714 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
715 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
716 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
717 <span class="nt">&lt;/div&gt;</span>
718 <span class="nt">&lt;/li&gt;</span>
719 <span class="nt">&lt;/ul&gt;</span>
720 <span class="nt">&lt;/div&gt;</span>
721<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
722
723<h3 id="forms">Forms</h3>
724
725<p>Place various form controls and components within a navbar with <code class="highlighter-rouge">.form-inline</code>.</p>
726
727<div class="bd-example">
728<nav class="navbar navbar-light bg-light">
729 <form class="form-inline">
730 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
731 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
732 </form>
733</nav>
734</div>
735<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
736 <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span>
737 <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
738 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
739 <span class="nt">&lt;/form&gt;</span>
740<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
741
742<p>Immediate children elements in <code class="highlighter-rouge">.navbar</code> use flex layout and will default to <code class="highlighter-rouge">justify-content: between</code>. Use additional <a href="/docs/4.1/utilities/flex/">flex utilities</a> as needed to adjust this behavior.</p>
743
744<div class="bd-example">
745<nav class="navbar navbar-light bg-light">
746 <a class="navbar-brand">Navbar</a>
747 <form class="form-inline">
748 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
749 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
750 </form>
751</nav>
752</div>
753<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
754 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
755 <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span>
756 <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
757 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
758 <span class="nt">&lt;/form&gt;</span>
759<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
760
761<p>Input groups work, too:</p>
762
763<div class="bd-example">
764<nav class="navbar navbar-light bg-light">
765 <form class="form-inline">
766 <div class="input-group">
767 <div class="input-group-prepend">
768 <span class="input-group-text" id="basic-addon1">@</span>
769 </div>
770 <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
771 </div>
772 </form>
773</nav>
774</div>
775<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
776 <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span>
777 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
778 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
779 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"basic-addon1"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/span&gt;</span>
780 <span class="nt">&lt;/div&gt;</span>
781 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-label=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"basic-addon1"</span><span class="nt">&gt;</span>
782 <span class="nt">&lt;/div&gt;</span>
783 <span class="nt">&lt;/form&gt;</span>
784<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
785
786<p>Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.</p>
787
788<div class="bd-example">
789<nav class="navbar navbar-light bg-light">
790 <form class="form-inline">
791 <button class="btn btn-outline-success" type="button">Main button</button>
792 <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
793 </form>
794</nav>
795</div>
796<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
797 <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span>
798 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">&gt;</span>Main button<span class="nt">&lt;/button&gt;</span>
799 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">&gt;</span>Smaller button<span class="nt">&lt;/button&gt;</span>
800 <span class="nt">&lt;/form&gt;</span>
801<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
802
803<h3 id="text">Text</h3>
804
805<p>Navbars may contain bits of text with the help of <code class="highlighter-rouge">.navbar-text</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>
806
807<div class="bd-example">
808<nav class="navbar navbar-light bg-light">
809 <span class="navbar-text">
810 Navbar text with an inline element
811 </span>
812</nav>
813</div>
814<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
815 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-text"</span><span class="nt">&gt;</span>
816 Navbar text with an inline element
817 <span class="nt">&lt;/span&gt;</span>
818<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
819
820<p>Mix and match with other components and utilities as needed.</p>
821
822<div class="bd-example">
823<nav class="navbar navbar-expand-lg navbar-light bg-light">
824 <a class="navbar-brand" href="#">Navbar w/ text</a>
825 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
826 <span class="navbar-toggler-icon"></span>
827 </button>
828 <div class="collapse navbar-collapse" id="navbarText">
829 <ul class="navbar-nav mr-auto">
830 <li class="nav-item active">
831 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
832 </li>
833 <li class="nav-item">
834 <a class="nav-link" href="#">Features</a>
835 </li>
836 <li class="nav-item">
837 <a class="nav-link" href="#">Pricing</a>
838 </li>
839 </ul>
840 <span class="navbar-text">
841 Navbar text with an inline element
842 </span>
843 </div>
844</nav>
845</div>
846<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="nt">&gt;</span>
847 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Navbar w/ text<span class="nt">&lt;/a&gt;</span>
848 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarText"</span> <span class="na">aria-controls=</span><span class="s">"navbarText"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
849 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
850 <span class="nt">&lt;/button&gt;</span>
851 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarText"</span><span class="nt">&gt;</span>
852 <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto"</span><span class="nt">&gt;</span>
853 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
854 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
855 <span class="nt">&lt;/li&gt;</span>
856 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
857 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Features<span class="nt">&lt;/a&gt;</span>
858 <span class="nt">&lt;/li&gt;</span>
859 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
860 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Pricing<span class="nt">&lt;/a&gt;</span>
861 <span class="nt">&lt;/li&gt;</span>
862 <span class="nt">&lt;/ul&gt;</span>
863 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-text"</span><span class="nt">&gt;</span>
864 Navbar text with an inline element
865 <span class="nt">&lt;/span&gt;</span>
866 <span class="nt">&lt;/div&gt;</span>
867<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
868
869<h2 id="color-schemes">Color schemes</h2>
870
871<p>Theming the navbar has never been easier thanks to the combination of theming classes and <code class="highlighter-rouge">background-color</code> utilities. Choose from <code class="highlighter-rouge">.navbar-light</code> for use with light background colors, or <code class="highlighter-rouge">.navbar-dark</code> for dark background colors. Then, customize with <code class="highlighter-rouge">.bg-*</code> utilities.</p>
872
873<div class="bd-example">
874 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
875 <a class="navbar-brand" href="#">Navbar</a>
876 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
877 <span class="navbar-toggler-icon"></span>
878 </button>
879
880 <div class="collapse navbar-collapse" id="navbarColor01">
881 <ul class="navbar-nav mr-auto">
882 <li class="nav-item active">
883 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
884 </li>
885 <li class="nav-item">
886 <a class="nav-link" href="#">Features</a>
887 </li>
888 <li class="nav-item">
889 <a class="nav-link" href="#">Pricing</a>
890 </li>
891 <li class="nav-item">
892 <a class="nav-link" href="#">About</a>
893 </li>
894 </ul>
895 <form class="form-inline">
896 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
897 <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
898 </form>
899 </div>
900 </nav>
901
902 <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
903 <a class="navbar-brand" href="#">Navbar</a>
904 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
905 <span class="navbar-toggler-icon"></span>
906 </button>
907
908 <div class="collapse navbar-collapse" id="navbarColor02">
909 <ul class="navbar-nav mr-auto">
910 <li class="nav-item active">
911 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
912 </li>
913 <li class="nav-item">
914 <a class="nav-link" href="#">Features</a>
915 </li>
916 <li class="nav-item">
917 <a class="nav-link" href="#">Pricing</a>
918 </li>
919 <li class="nav-item">
920 <a class="nav-link" href="#">About</a>
921 </li>
922 </ul>
923 <form class="form-inline">
924 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
925 <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
926 </form>
927 </div>
928 </nav>
929
930 <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
931 <a class="navbar-brand" href="#">Navbar</a>
932 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
933 <span class="navbar-toggler-icon"></span>
934 </button>
935
936 <div class="collapse navbar-collapse" id="navbarColor03">
937 <ul class="navbar-nav mr-auto">
938 <li class="nav-item active">
939 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
940 </li>
941 <li class="nav-item">
942 <a class="nav-link" href="#">Features</a>
943 </li>
944 <li class="nav-item">
945 <a class="nav-link" href="#">Pricing</a>
946 </li>
947 <li class="nav-item">
948 <a class="nav-link" href="#">About</a>
949 </li>
950 </ul>
951 <form class="form-inline">
952 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
953 <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
954 </form>
955 </div>
956 </nav>
957</div>
958
959<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-dark bg-dark"</span><span class="nt">&gt;</span>
960 <span class="c">&lt;!-- Navbar content --&gt;</span>
961<span class="nt">&lt;/nav&gt;</span>
962
963<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-dark bg-primary"</span><span class="nt">&gt;</span>
964 <span class="c">&lt;!-- Navbar content --&gt;</span>
965<span class="nt">&lt;/nav&gt;</span>
966
967<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light"</span> <span class="na">style=</span><span class="s">"background-color: #e3f2fd;"</span><span class="nt">&gt;</span>
968 <span class="c">&lt;!-- Navbar content --&gt;</span>
969<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
970
971<h2 id="containers">Containers</h2>
972
973<p>Although it’s not required, you can wrap a navbar in a <code class="highlighter-rouge">.container</code> to center it on a page or add one within to only center the contents of a <a href="#placement">fixed or static top navbar</a>.</p>
974
975<div class="bd-example">
976<div class="container">
977 <nav class="navbar navbar-expand-lg navbar-light bg-light">
978 <a class="navbar-brand" href="#">Navbar</a>
979 </nav>
980</div>
981</div>
982<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
983 <span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="nt">&gt;</span>
984 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
985 <span class="nt">&lt;/nav&gt;</span>
986<span class="nt">&lt;/div&gt;</span></code></pre></figure>
987
988<p>When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified <code class="highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.</p>
989
990<div class="bd-example">
991<nav class="navbar navbar-expand-lg navbar-light bg-light">
992 <div class="container">
993 <a class="navbar-brand" href="#">Navbar</a>
994 </div>
995</nav>
996</div>
997<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="nt">&gt;</span>
998 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
999 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
1000 <span class="nt">&lt;/div&gt;</span>
1001<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
1002
1003<h2 id="placement">Placement</h2>
1004
1005<p>Use our <a href="/docs/4.1/utilities/position/">position utilities</a> to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use <code class="highlighter-rouge">position: fixed</code>, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., <code class="highlighter-rouge">padding-top</code> on the <code class="highlighter-rouge">&lt;body&gt;</code>) to prevent overlap with other elements.</p>
1006
1007<p>Also note that <strong><code class="highlighter-rouge">.sticky-top</code> uses <code class="highlighter-rouge">position: sticky</code>, which <a href="https://caniuse.com/#feat=css-sticky">isn’t fully supported in every browser</a></strong>.</p>
1008
1009<div class="bd-example">
1010<nav class="navbar navbar-light bg-light">
1011 <a class="navbar-brand" href="#">Default</a>
1012</nav>
1013</div>
1014<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
1015 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/a&gt;</span>
1016<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
1017
1018<div class="bd-example">
1019<nav class="navbar fixed-top navbar-light bg-light">
1020 <a class="navbar-brand" href="#">Fixed top</a>
1021</nav>
1022</div>
1023<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar fixed-top navbar-light bg-light"</span><span class="nt">&gt;</span>
1024 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Fixed top<span class="nt">&lt;/a&gt;</span>
1025<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
1026
1027<div class="bd-example">
1028<nav class="navbar fixed-bottom navbar-light bg-light">
1029 <a class="navbar-brand" href="#">Fixed bottom</a>
1030</nav>
1031</div>
1032<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar fixed-bottom navbar-light bg-light"</span><span class="nt">&gt;</span>
1033 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Fixed bottom<span class="nt">&lt;/a&gt;</span>
1034<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
1035
1036<div class="bd-example">
1037<nav class="navbar sticky-top navbar-light bg-light">
1038 <a class="navbar-brand" href="#">Sticky top</a>
1039</nav>
1040</div>
1041<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar sticky-top navbar-light bg-light"</span><span class="nt">&gt;</span>
1042 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Sticky top<span class="nt">&lt;/a&gt;</span>
1043<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
1044
1045<h2 id="responsive-behaviors">Responsive behaviors</h2>
1046
1047<p>Navbars can utilize <code class="highlighter-rouge">.navbar-toggler</code>, <code class="highlighter-rouge">.navbar-collapse</code>, and <code class="highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.</p>
1048
1049<p>For navbars that never collapse, add the <code class="highlighter-rouge">.navbar-expand</code> class on the navbar. For navbars that always collapse, don’t add any <code class="highlighter-rouge">.navbar-expand</code> class.</p>
1050
1051<h3 id="toggler">Toggler</h3>
1052
1053<p>Navbar togglers are left-aligned by default, but should they follow a sibling element like a <code class="highlighter-rouge">.navbar-brand</code>, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.</p>
1054
1055<p>With no <code class="highlighter-rouge">.navbar-brand</code> shown in lowest breakpoint:</p>
1056
1057<div class="bd-example">
1058<nav class="navbar navbar-expand-lg navbar-light bg-light">
1059 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
1060 <span class="navbar-toggler-icon"></span>
1061 </button>
1062 <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
1063 <a class="navbar-brand" href="#">Hidden brand</a>
1064 <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
1065 <li class="nav-item active">
1066 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
1067 </li>
1068 <li class="nav-item">
1069 <a class="nav-link" href="#">Link</a>
1070 </li>
1071 <li class="nav-item">
1072 <a class="nav-link disabled" href="#">Disabled</a>
1073 </li>
1074 </ul>
1075 <form class="form-inline my-2 my-lg-0">
1076 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
1077 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
1078 </form>
1079 </div>
1080</nav>
1081</div>
1082<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="nt">&gt;</span>
1083 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarTogglerDemo01"</span> <span class="na">aria-controls=</span><span class="s">"navbarTogglerDemo01"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
1084 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
1085 <span class="nt">&lt;/button&gt;</span>
1086 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarTogglerDemo01"</span><span class="nt">&gt;</span>
1087 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Hidden brand<span class="nt">&lt;/a&gt;</span>
1088 <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto mt-2 mt-lg-0"</span><span class="nt">&gt;</span>
1089 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
1090 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
1091 <span class="nt">&lt;/li&gt;</span>
1092 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
1093 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
1094 <span class="nt">&lt;/li&gt;</span>
1095 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
1096 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/a&gt;</span>
1097 <span class="nt">&lt;/li&gt;</span>
1098 <span class="nt">&lt;/ul&gt;</span>
1099 <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline my-2 my-lg-0"</span><span class="nt">&gt;</span>
1100 <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
1101 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
1102 <span class="nt">&lt;/form&gt;</span>
1103 <span class="nt">&lt;/div&gt;</span>
1104<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
1105
1106<p>With a brand name shown on the left and toggler on the right:</p>
1107
1108<div class="bd-example">
1109<nav class="navbar navbar-expand-lg navbar-light bg-light">
1110 <a class="navbar-brand" href="#">Navbar</a>
1111 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
1112 <span class="navbar-toggler-icon"></span>
1113 </button>
1114
1115 <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
1116 <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
1117 <li class="nav-item active">
1118 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
1119 </li>
1120 <li class="nav-item">
1121 <a class="nav-link" href="#">Link</a>
1122 </li>
1123 <li class="nav-item">
1124 <a class="nav-link disabled" href="#">Disabled</a>
1125 </li>
1126 </ul>
1127 <form class="form-inline my-2 my-lg-0">
1128 <input class="form-control mr-sm-2" type="search" placeholder="Search" />
1129 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
1130 </form>
1131 </div>
1132</nav>
1133</div>
1134<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="nt">&gt;</span>
1135 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
1136 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarTogglerDemo02"</span> <span class="na">aria-controls=</span><span class="s">"navbarTogglerDemo02"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
1137 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
1138 <span class="nt">&lt;/button&gt;</span>
1139
1140 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarTogglerDemo02"</span><span class="nt">&gt;</span>
1141 <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto mt-2 mt-lg-0"</span><span class="nt">&gt;</span>
1142 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
1143 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
1144 <span class="nt">&lt;/li&gt;</span>
1145 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
1146 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
1147 <span class="nt">&lt;/li&gt;</span>
1148 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
1149 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/a&gt;</span>
1150 <span class="nt">&lt;/li&gt;</span>
1151 <span class="nt">&lt;/ul&gt;</span>
1152 <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline my-2 my-lg-0"</span><span class="nt">&gt;</span>
1153 <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
1154 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
1155 <span class="nt">&lt;/form&gt;</span>
1156 <span class="nt">&lt;/div&gt;</span>
1157<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
1158
1159<p>With a toggler on the left and brand name on the right:</p>
1160
1161<div class="bd-example">
1162<nav class="navbar navbar-expand-lg navbar-light bg-light">
1163 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
1164 <span class="navbar-toggler-icon"></span>
1165 </button>
1166 <a class="navbar-brand" href="#">Navbar</a>
1167
1168 <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
1169 <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
1170 <li class="nav-item active">
1171 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
1172 </li>
1173 <li class="nav-item">
1174 <a class="nav-link" href="#">Link</a>
1175 </li>
1176 <li class="nav-item">
1177 <a class="nav-link disabled" href="#">Disabled</a>
1178 </li>
1179 </ul>
1180 <form class="form-inline my-2 my-lg-0">
1181 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
1182 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
1183 </form>
1184 </div>
1185</nav>
1186</div>
1187<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="nt">&gt;</span>
1188 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarTogglerDemo03"</span> <span class="na">aria-controls=</span><span class="s">"navbarTogglerDemo03"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
1189 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
1190 <span class="nt">&lt;/button&gt;</span>
1191 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
1192
1193 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarTogglerDemo03"</span><span class="nt">&gt;</span>
1194 <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto mt-2 mt-lg-0"</span><span class="nt">&gt;</span>
1195 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
1196 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
1197 <span class="nt">&lt;/li&gt;</span>
1198 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
1199 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
1200 <span class="nt">&lt;/li&gt;</span>
1201 <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
1202 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/a&gt;</span>
1203 <span class="nt">&lt;/li&gt;</span>
1204 <span class="nt">&lt;/ul&gt;</span>
1205 <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline my-2 my-lg-0"</span><span class="nt">&gt;</span>
1206 <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
1207 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
1208 <span class="nt">&lt;/form&gt;</span>
1209 <span class="nt">&lt;/div&gt;</span>
1210<span class="nt">&lt;/nav&gt;</span></code></pre></figure>
1211
1212<h3 id="external-content">External content</h3>
1213
1214<p>Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the <code class="highlighter-rouge">id</code> and <code class="highlighter-rouge">data-target</code> matching, that’s easily done!</p>
1215
1216<div class="bd-example">
1217<div class="pos-f-t">
1218 <div class="collapse" id="navbarToggleExternalContent">
1219 <div class="bg-dark p-4">
1220 <h5 class="text-white h4">Collapsed content</h5>
1221 <span class="text-muted">Toggleable via the navbar brand.</span>
1222 </div>
1223 </div>
1224 <nav class="navbar navbar-dark bg-dark">
1225 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
1226 <span class="navbar-toggler-icon"></span>
1227 </button>
1228 </nav>
1229</div>
1230</div>
1231<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"pos-f-t"</span><span class="nt">&gt;</span>
1232 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">id=</span><span class="s">"navbarToggleExternalContent"</span><span class="nt">&gt;</span>
1233 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-dark p-4"</span><span class="nt">&gt;</span>
1234 <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"text-white h4"</span><span class="nt">&gt;</span>Collapsed content<span class="nt">&lt;/h5&gt;</span>
1235 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Toggleable via the navbar brand.<span class="nt">&lt;/span&gt;</span>
1236 <span class="nt">&lt;/div&gt;</span>
1237 <span class="nt">&lt;/div&gt;</span>
1238 <span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-dark bg-dark"</span><span class="nt">&gt;</span>
1239 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarToggleExternalContent"</span> <span class="na">aria-controls=</span><span class="s">"navbarToggleExternalContent"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
1240 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
1241 <span class="nt">&lt;/button&gt;</span>
1242 <span class="nt">&lt;/nav&gt;</span>
1243<span class="nt">&lt;/div&gt;</span></code></pre></figure>
1244
1245
1246 </main>
1247 </div>
1248 </div>
1249
1250 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Mark Otto1e258342018-07-12 16:39:251251<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
Mark Otto47b3c9c2018-04-09 16:02:591252
Mark Ottoea412982018-07-24 16:28:531253<script src="/docs/4.1/assets/js/vendor/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="/docs/4.1/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.1/assets/js/docs.min.js"></script>
Mark Otto47b3c9c2018-04-09 16:02:591254 </body>
1255</html>