github.com/MontFerret/ferret@v0.18.0/e2e/pages/static/overview.html (about) 1 <!DOCTYPE html> 2 <!-- saved from url=(0049) --> 3 <html lang="en"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <meta name="description" content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes."> 8 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> 9 <meta name="generator" content="Jekyll v3.8.3"> 10 <title>Overview · Bootstrap</title> 11 <!-- Bootstrap core CSS --> 12 <style class="anchorjs"></style> 13 <link href="./assets/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 14 <!-- Documentation extras --> 15 <link href="./assets/docsearch.min.css" rel="stylesheet"> 16 <link href="./assets/docs.min.css" rel="stylesheet"> 17 <!-- Favicons --> 18 <link rel="apple-touch-icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> 19 <link rel="icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> 20 <link rel="icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> 21 <link rel="manifest" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/manifest.json"> 22 <link rel="mask-icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c"> 23 <link rel="icon" href="http://getbootstrap.com/favicon.ico"> 24 <meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml"> 25 <meta name="theme-color" content="#563d7c"> 26 <!-- Twitter --> 27 <meta name="twitter:card" content="summary"> 28 <meta name="twitter:site" content="@getbootstrap"> 29 <meta name="twitter:creator" content="@getbootstrap"> 30 <meta name="twitter:title" content="Overview"> 31 <meta name="twitter:description" content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes."> 32 <meta name="twitter:image" content="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social-logo.png"> 33 <!-- Facebook --> 34 <meta property="og:url" content="https://getbootstrap.com/docs/4.1/layout/overview/"> 35 <meta property="og:title" content="Overview"> 36 <meta property="og:description" content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes."> 37 <meta property="og:type" content="website"> 38 <meta property="og:image" content="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social.png"> 39 <meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social.png"> 40 <meta property="og:image:type" content="image/png"> 41 <meta property="og:image:width" content="1200"> 42 <meta property="og:image:height" content="630"> 43 <script> 44 window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; 45 ga('create', 'UA-146052-10', 'getbootstrap.com'); 46 ga('send', 'pageview'); 47 </script> 48 <script async="" src="./assets/analytics.js"></script> 49 <script id="_carbonads_projs" type="text/javascript" src="./assets/CKYIKKJL.json"></script> 50 </head> 51 <body> 52 <a id="skippy" class="sr-only sr-only-focusable" href="#content"> 53 <div class="container"> 54 <span class="skiplink-text">Skip to main content</span> 55 </div> 56 </a> 57 <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> 58 <a class="navbar-brand mr-0 mr-md-2" href="http://getbootstrap.com/"> 59 <svg class="d-block" width="36" height="36" viewBox="0 0 612 612" 60 xmlns="http://www.w3.org/2000/svg" focusable="false"> 61 <title>Bootstrap</title> 62 <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> 63 <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"></path> 64 </svg> 65 </a> 66 <div class="navbar-nav-scroll"> 67 <ul class="navbar-nav bd-navbar-nav flex-row"> 68 <li class="nav-item"> 69 <a class="nav-link " href="http://getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> 70 </li> 71 <li class="nav-item"> 72 <a class="nav-link active" href="http://getbootstrap.com/docs/4.1/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a> 73 </li> 74 <li class="nav-item"> 75 <a class="nav-link " href="http://getbootstrap.com/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> 76 </li> 77 <li class="nav-item"> 78 <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> 79 </li> 80 <li class="nav-item"> 81 <a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> 82 </li> 83 <li class="nav-item"> 84 <a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> 85 </li> 86 </ul> 87 </div> 88 <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex"> 89 <li class="nav-item dropdown"> 90 <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 91 v4.1 92 </a> 93 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 94 <a class="dropdown-item active" href="http://getbootstrap.com/docs/4.1/">Latest (4.1.x)</a> 95 <a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a> 96 <div class="dropdown-divider"></div> 97 <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a> 98 <a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a> 99 <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a> 100 </div> 101 </li> 102 <li class="nav-item"> 103 <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> 104 <svg class="navbar-nav-svg" 105 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 499.36" focusable="false"> 106 <title>GitHub</title> 107 <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"></path> 108 </svg> 109 </a> 110 </li> 111 <li class="nav-item"> 112 <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> 113 <svg class="navbar-nav-svg" 114 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 416.32" focusable="false"> 115 <title>Twitter</title> 116 <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"></path> 117 </svg> 118 </a> 119 </li> 120 <li class="nav-item"> 121 <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"> 122 <svg class="navbar-nav-svg" 123 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" focusable="false"> 124 <title>Slack</title> 125 <path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"></path> 126 <path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"></path> 127 </svg> 128 </a> 129 </li> 130 </ul> 131 <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="http://getbootstrap.com/docs/4.1/getting-started/download/">Download</a> 132 </header> 133 <div class="container-fluid"> 134 <div class="row flex-xl-nowrap"> 135 <div class="col-12 col-md-3 col-xl-2 bd-sidebar"> 136 <form class="bd-search d-flex align-items-center"> 137 <span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;"> 138 <input type="search" class="form-control ds-input" id="search-input" placeholder="Search..." autocomplete="off" data-siteurl="https://getbootstrap.com" data-docs-version="4.1" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;"> 139 <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre> 140 <span class="ds-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;"> 141 <div class="ds-dataset-1"></div> 142 </span> 143 </span> 144 <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"> 145 <svg 146 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"> 147 <title>Menu</title> 148 <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path> 149 </svg> 150 </button> 151 </form> 152 <nav class="collapse bd-links" id="bd-docs-nav"> 153 <div class="bd-toc-item"> 154 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/getting-started/introduction/"> 155 Getting started 156 </a> 157 <ul class="nav bd-sidenav"> 158 <li> 159 <a href="http://getbootstrap.com/docs/4.1/getting-started/introduction/"> 160 Introduction 161 </a> 162 </li> 163 <li> 164 <a href="http://getbootstrap.com/docs/4.1/getting-started/download/"> 165 Download 166 </a> 167 </li> 168 <li> 169 <a href="http://getbootstrap.com/docs/4.1/getting-started/contents/"> 170 Contents 171 </a> 172 </li> 173 <li> 174 <a href="http://getbootstrap.com/docs/4.1/getting-started/browsers-devices/"> 175 Browsers & devices 176 </a> 177 </li> 178 <li> 179 <a href="http://getbootstrap.com/docs/4.1/getting-started/javascript/"> 180 JavaScript 181 </a> 182 </li> 183 <li> 184 <a href="http://getbootstrap.com/docs/4.1/getting-started/theming/"> 185 Theming 186 </a> 187 </li> 188 <li> 189 <a href="http://getbootstrap.com/docs/4.1/getting-started/build-tools/"> 190 Build tools 191 </a> 192 </li> 193 <li> 194 <a href="http://getbootstrap.com/docs/4.1/getting-started/webpack/"> 195 Webpack 196 </a> 197 </li> 198 <li> 199 <a href="http://getbootstrap.com/docs/4.1/getting-started/accessibility/"> 200 Accessibility 201 </a> 202 </li> 203 </ul> 204 </div> 205 <div class="bd-toc-item active"> 206 <a class="bd-toc-link" href=""> 207 Layout 208 </a> 209 <ul class="nav bd-sidenav"> 210 <li class="active bd-sidenav-active"> 211 <a href="overview.html"> 212 Overview 213 </a> 214 </li> 215 <li> 216 <a href="grid.html"> 217 Grid 218 </a> 219 </li> 220 <li> 221 <a href="media.html"> 222 Media object 223 </a> 224 </li> 225 <li> 226 <a href="utilities.html"> 227 Utilities for layout 228 </a> 229 </li> 230 </ul> 231 </div> 232 <div class="bd-toc-item"> 233 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/content/reboot/"> 234 Content 235 </a> 236 <ul class="nav bd-sidenav"> 237 <li> 238 <a href="http://getbootstrap.com/docs/4.1/content/reboot/"> 239 Reboot 240 </a> 241 </li> 242 <li> 243 <a href="http://getbootstrap.com/docs/4.1/content/typography/"> 244 Typography 245 </a> 246 </li> 247 <li> 248 <a href="http://getbootstrap.com/docs/4.1/content/code/"> 249 Code 250 </a> 251 </li> 252 <li> 253 <a href="http://getbootstrap.com/docs/4.1/content/images/"> 254 Images 255 </a> 256 </li> 257 <li> 258 <a href="http://getbootstrap.com/docs/4.1/content/tables/"> 259 Tables 260 </a> 261 </li> 262 <li> 263 <a href="http://getbootstrap.com/docs/4.1/content/figures/"> 264 Figures 265 </a> 266 </li> 267 </ul> 268 </div> 269 <div class="bd-toc-item"> 270 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/components/alerts/"> 271 Components 272 </a> 273 <ul class="nav bd-sidenav"> 274 <li> 275 <a href="http://getbootstrap.com/docs/4.1/components/alerts/"> 276 Alerts 277 </a> 278 </li> 279 <li> 280 <a href="http://getbootstrap.com/docs/4.1/components/badge/"> 281 Badge 282 </a> 283 </li> 284 <li> 285 <a href="http://getbootstrap.com/docs/4.1/components/breadcrumb/"> 286 Breadcrumb 287 </a> 288 </li> 289 <li> 290 <a href="http://getbootstrap.com/docs/4.1/components/buttons/"> 291 Buttons 292 </a> 293 </li> 294 <li> 295 <a href="http://getbootstrap.com/docs/4.1/components/button-group/"> 296 Button group 297 </a> 298 </li> 299 <li> 300 <a href="http://getbootstrap.com/docs/4.1/components/card/"> 301 Card 302 </a> 303 </li> 304 <li> 305 <a href="http://getbootstrap.com/docs/4.1/components/carousel/"> 306 Carousel 307 </a> 308 </li> 309 <li> 310 <a href="http://getbootstrap.com/docs/4.1/components/collapse/"> 311 Collapse 312 </a> 313 </li> 314 <li> 315 <a href="http://getbootstrap.com/docs/4.1/components/dropdowns/"> 316 Dropdowns 317 </a> 318 </li> 319 <li> 320 <a href="http://getbootstrap.com/docs/4.1/components/forms/"> 321 Forms 322 </a> 323 </li> 324 <li> 325 <a href="http://getbootstrap.com/docs/4.1/components/input-group/"> 326 Input group 327 </a> 328 </li> 329 <li> 330 <a href="http://getbootstrap.com/docs/4.1/components/jumbotron/"> 331 Jumbotron 332 </a> 333 </li> 334 <li> 335 <a href="http://getbootstrap.com/docs/4.1/components/list-group/"> 336 List group 337 </a> 338 </li> 339 <li> 340 <a href="http://getbootstrap.com/docs/4.1/components/modal/"> 341 Modal 342 </a> 343 </li> 344 <li> 345 <a href="http://getbootstrap.com/docs/4.1/components/navs/"> 346 Navs 347 </a> 348 </li> 349 <li> 350 <a href="http://getbootstrap.com/docs/4.1/components/navbar/"> 351 Navbar 352 </a> 353 </li> 354 <li> 355 <a href="http://getbootstrap.com/docs/4.1/components/pagination/"> 356 Pagination 357 </a> 358 </li> 359 <li> 360 <a href="http://getbootstrap.com/docs/4.1/components/popovers/"> 361 Popovers 362 </a> 363 </li> 364 <li> 365 <a href="http://getbootstrap.com/docs/4.1/components/progress/"> 366 Progress 367 </a> 368 </li> 369 <li> 370 <a href="http://getbootstrap.com/docs/4.1/components/scrollspy/"> 371 Scrollspy 372 </a> 373 </li> 374 <li> 375 <a href="http://getbootstrap.com/docs/4.1/components/tooltips/"> 376 Tooltips 377 </a> 378 </li> 379 </ul> 380 </div> 381 <div class="bd-toc-item"> 382 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/utilities/borders/"> 383 Utilities 384 </a> 385 <ul class="nav bd-sidenav"> 386 <li> 387 <a href="http://getbootstrap.com/docs/4.1/utilities/borders/"> 388 Borders 389 </a> 390 </li> 391 <li> 392 <a href="http://getbootstrap.com/docs/4.1/utilities/clearfix/"> 393 Clearfix 394 </a> 395 </li> 396 <li> 397 <a href="http://getbootstrap.com/docs/4.1/utilities/close-icon/"> 398 Close icon 399 </a> 400 </li> 401 <li> 402 <a href="http://getbootstrap.com/docs/4.1/utilities/colors/"> 403 Colors 404 </a> 405 </li> 406 <li> 407 <a href="http://getbootstrap.com/docs/4.1/utilities/display/"> 408 Display 409 </a> 410 </li> 411 <li> 412 <a href="http://getbootstrap.com/docs/4.1/utilities/embed/"> 413 Embed 414 </a> 415 </li> 416 <li> 417 <a href="http://getbootstrap.com/docs/4.1/utilities/flex/"> 418 Flex 419 </a> 420 </li> 421 <li> 422 <a href="http://getbootstrap.com/docs/4.1/utilities/float/"> 423 Float 424 </a> 425 </li> 426 <li> 427 <a href="http://getbootstrap.com/docs/4.1/utilities/image-replacement/"> 428 Image replacement 429 </a> 430 </li> 431 <li> 432 <a href="http://getbootstrap.com/docs/4.1/utilities/position/"> 433 Position 434 </a> 435 </li> 436 <li> 437 <a href="http://getbootstrap.com/docs/4.1/utilities/screenreaders/"> 438 Screenreaders 439 </a> 440 </li> 441 <li> 442 <a href="http://getbootstrap.com/docs/4.1/utilities/shadows/"> 443 Shadows 444 </a> 445 </li> 446 <li> 447 <a href="http://getbootstrap.com/docs/4.1/utilities/sizing/"> 448 Sizing 449 </a> 450 </li> 451 <li> 452 <a href="http://getbootstrap.com/docs/4.1/utilities/spacing/"> 453 Spacing 454 </a> 455 </li> 456 <li> 457 <a href="http://getbootstrap.com/docs/4.1/utilities/text/"> 458 Text 459 </a> 460 </li> 461 <li> 462 <a href="http://getbootstrap.com/docs/4.1/utilities/vertical-align/"> 463 Vertical align 464 </a> 465 </li> 466 <li> 467 <a href="http://getbootstrap.com/docs/4.1/utilities/visibility/"> 468 Visibility 469 </a> 470 </li> 471 </ul> 472 </div> 473 <div class="bd-toc-item"> 474 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/extend/approach/"> 475 Extend 476 </a> 477 <ul class="nav bd-sidenav"> 478 <li> 479 <a href="http://getbootstrap.com/docs/4.1/extend/approach/"> 480 Approach 481 </a> 482 </li> 483 <li> 484 <a href="http://getbootstrap.com/docs/4.1/extend/icons/"> 485 Icons 486 </a> 487 </li> 488 </ul> 489 </div> 490 <div class="bd-toc-item"> 491 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/migration/"> 492 Migration 493 </a> 494 <ul class="nav bd-sidenav"></ul> 495 </div> 496 <div class="bd-toc-item"> 497 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/about/overview/"> 498 About 499 </a> 500 <ul class="nav bd-sidenav"> 501 <li> 502 <a href="http://getbootstrap.com/docs/4.1/about/overview/"> 503 Overview 504 </a> 505 </li> 506 <li> 507 <a href="http://getbootstrap.com/docs/4.1/about/brand/"> 508 Brand 509 </a> 510 </li> 511 <li> 512 <a href="http://getbootstrap.com/docs/4.1/about/license/"> 513 License 514 </a> 515 </li> 516 <li> 517 <a href="http://getbootstrap.com/docs/4.1/about/translations/"> 518 Translations 519 </a> 520 </li> 521 </ul> 522 </div> 523 </nav> 524 </div> 525 <div class="d-none d-xl-block col-xl-2 bd-toc"> 526 <ul class="section-nav"> 527 <li class="toc-entry toc-h2"> 528 <a href="#containers">Containers</a> 529 </li> 530 <li class="toc-entry toc-h2"> 531 <a href="#responsive-breakpoints">Responsive breakpoints</a> 532 </li> 533 <li class="toc-entry toc-h2"> 534 <a href="#z-index">Z-index</a> 535 </li> 536 </ul> 537 </div> 538 <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> 539 <h1 class="bd-title" id="content">Overview</h1> 540 <p class="bd-lead">Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.</p> 541 <script async="" src="./assets/carbon.js" id="_carbonads_js"></script> 542 <div id="carbonads"> 543 <span> 544 <span class="carbon-wrap"> 545 <a href="http://srv.carbonads.net/ads/click/x/GTND42QIF6BI5KQNCV74YKQMCKAIV5QECABDVZ3JCW7ILK7YCASI453KC6BIC5QMCEYDTK3EHJNCLSIZ?segment=placement:getbootstrapcom;" class="carbon-img" target="_blank" rel="noopener"> 546 <img src="./assets/1538328304-Slack-pink_logo.png" alt="" border="0" height="100" width="130" style="max-width: 130px;"> 547 </a> 548 <a href="http://srv.carbonads.net/ads/click/x/GTND42QIF6BI5KQNCV74YKQMCKAIV5QECABDVZ3JCW7ILK7YCASI453KC6BIC5QMCEYDTK3EHJNCLSIZ?segment=placement:getbootstrapcom;" class="carbon-text" target="_blank" rel="noopener">It's teamwork, but simpler, more pleasant and more productive.</a> 549 </span> 550 <a href="http://carbonads.net/?utm_source=getbootstrapcom&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon" class="carbon-poweredby" target="_blank" rel="noopener">ads via Carbon</a> 551 <img src="./assets/B21259774.226039675" border="0" height="1" width="1" style="display: none;"> 552 </span> 553 </div> 554 <h2 id="containers"> 555 <div>Containers 556 <a class="anchorjs-link " href="#containers" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a> 557 </div> 558 </h2> 559 <p>Containers are the most basic layout element in Bootstrap and are 560 <strong>required when using our default grid system</strong>. Choose from a responsive, fixed-width container (meaning its 561 <code class="highlighter-rouge">max-width</code> changes at each breakpoint) or fluid-width (meaning it’s 562 <code class="highlighter-rouge">100%</code> wide all the time). 563 </p> 564 <p>While containers 565 <em>can</em> be nested, most layouts do not require a nested container. 566 </p> 567 <div class="bd-example"> 568 <div class="bd-example-container"> 569 <div class="bd-example-container-header"></div> 570 <div class="bd-example-container-sidebar"></div> 571 <div class="bd-example-container-body"></div> 572 </div> 573 </div> 574 <div class="bd-clipboard"> 575 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 576 </div> 577 <figure class="highlight"> 578 <pre> 579 <code class="language-html" data-lang="html"> 580 <span class="nt"><div</span> 581 <span class="na">class=</span> 582 <span class="s">"container"</span> 583 <span class="nt">></span> 584 <span class="c"><!-- Content here --></span> 585 <span class="nt"></div></span> 586 </code> 587 </pre> 588 </figure> 589 <p>Use 590 <code class="highlighter-rouge">.container-fluid</code> for a full width container, spanning the entire width of the viewport. 591 </p> 592 <div class="bd-example"> 593 <div class="bd-example-container bd-example-container-fluid"> 594 <div class="bd-example-container-header"></div> 595 <div class="bd-example-container-sidebar"></div> 596 <div class="bd-example-container-body"></div> 597 </div> 598 </div> 599 <div class="bd-clipboard"> 600 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 601 </div> 602 <figure class="highlight"> 603 <pre> 604 <code class="language-html" data-lang="html"> 605 <span class="nt"><div</span> 606 <span class="na">class=</span> 607 <span class="s">"container-fluid"</span> 608 <span class="nt">></span> 609 ... 610 611 <span class="nt"></div></span> 612 </code> 613 </pre> 614 </figure> 615 <h2 id="responsive-breakpoints"> 616 <div>Responsive breakpoints 617 <a class="anchorjs-link " href="#responsive-breakpoints" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a> 618 </div> 619 </h2> 620 <p>Since Bootstrap is developed to be mobile first, we use a handful of 621 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. 622 </p> 623 <p>Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.</p> 624 <div class="bd-clipboard"> 625 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 626 </div> 627 <figure class="highlight"> 628 <pre> 629 <code class="language-scss" data-lang="scss"> 630 <span class="c1">// Extra small devices (portrait phones, less than 576px)</span> 631 <span class="c1">// No media query for `xs` since this is the default in Bootstrap</span> 632 <span class="c1">// Small devices (landscape phones, 576px and up)</span> 633 <span class="k">@media</span> 634 <span class="p">(</span> 635 <span class="n">min-width</span> 636 <span class="o">:</span> 637 <span class="m">576px</span> 638 <span class="p">)</span> 639 <span class="p">{</span> 640 <span class="nc">...</span> 641 <span class="p">}</span> 642 <span class="c1">// Medium devices (tablets, 768px and up)</span> 643 <span class="k">@media</span> 644 <span class="p">(</span> 645 <span class="n">min-width</span> 646 <span class="o">:</span> 647 <span class="m">768px</span> 648 <span class="p">)</span> 649 <span class="p">{</span> 650 <span class="nc">...</span> 651 <span class="p">}</span> 652 <span class="c1">// Large devices (desktops, 992px and up)</span> 653 <span class="k">@media</span> 654 <span class="p">(</span> 655 <span class="n">min-width</span> 656 <span class="o">:</span> 657 <span class="m">992px</span> 658 <span class="p">)</span> 659 <span class="p">{</span> 660 <span class="nc">...</span> 661 <span class="p">}</span> 662 <span class="c1">// Extra large devices (large desktops, 1200px and up)</span> 663 <span class="k">@media</span> 664 <span class="p">(</span> 665 <span class="n">min-width</span> 666 <span class="o">:</span> 667 <span class="m">1200px</span> 668 <span class="p">)</span> 669 <span class="p">{</span> 670 <span class="nc">...</span> 671 <span class="p">}</span> 672 </code> 673 </pre> 674 </figure> 675 <p>Since we write our source CSS in Sass, all our media queries are available via Sass mixins:</p> 676 <div class="bd-clipboard"> 677 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 678 </div> 679 <figure class="highlight"> 680 <pre> 681 <code class="language-scss" data-lang="scss"> 682 <span class="c1">// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`</span> 683 <span class="k">@include</span> 684 <span class="nd">media-breakpoint-up</span> 685 <span class="p">(</span> 686 <span class="n">sm</span> 687 <span class="p">)</span> 688 <span class="p">{</span> 689 <span class="nc">...</span> 690 <span class="p">}</span> 691 <span class="k">@include</span> 692 <span class="nd">media-breakpoint-up</span> 693 <span class="p">(</span> 694 <span class="n">md</span> 695 <span class="p">)</span> 696 <span class="p">{</span> 697 <span class="nc">...</span> 698 <span class="p">}</span> 699 <span class="k">@include</span> 700 <span class="nd">media-breakpoint-up</span> 701 <span class="p">(</span> 702 <span class="n">lg</span> 703 <span class="p">)</span> 704 <span class="p">{</span> 705 <span class="nc">...</span> 706 <span class="p">}</span> 707 <span class="k">@include</span> 708 <span class="nd">media-breakpoint-up</span> 709 <span class="p">(</span> 710 <span class="n">xl</span> 711 <span class="p">)</span> 712 <span class="p">{</span> 713 <span class="nc">...</span> 714 <span class="p">}</span> 715 <span class="c1">// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint</span> 716 <span class="nc">.custom-class</span> 717 <span class="p">{</span> 718 <span class="nl">display</span> 719 <span class="p">:</span> 720 <span class="nb">none</span> 721 <span class="p">;</span> 722 <span class="p">}</span> 723 <span class="k">@include</span> 724 <span class="nd">media-breakpoint-up</span> 725 <span class="p">(</span> 726 <span class="n">sm</span> 727 <span class="p">)</span> 728 <span class="p">{</span> 729 <span class="nc">.custom-class</span> 730 <span class="p">{</span> 731 <span class="nl">display</span> 732 <span class="p">:</span> 733 <span class="nb">block</span> 734 <span class="p">;</span> 735 <span class="p">}</span> 736 <span class="p">}</span> 737 </code> 738 </pre> 739 </figure> 740 <p>We occasionally use media queries that go in the other direction (the given screen size 741 <em>or smaller</em>): 742 </p> 743 <div class="bd-clipboard"> 744 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 745 </div> 746 <figure class="highlight"> 747 <pre> 748 <code class="language-scss" data-lang="scss"> 749 <span class="c1">// Extra small devices (portrait phones, less than 576px)</span> 750 <span class="k">@media</span> 751 <span class="p">(</span> 752 <span class="n">max-width</span> 753 <span class="o">:</span> 754 <span class="m">575</span> 755 <span class="mi">.98px</span> 756 <span class="p">)</span> 757 <span class="p">{</span> 758 <span class="nc">...</span> 759 <span class="p">}</span> 760 <span class="c1">// Small devices (landscape phones, less than 768px)</span> 761 <span class="k">@media</span> 762 <span class="p">(</span> 763 <span class="n">max-width</span> 764 <span class="o">:</span> 765 <span class="m">767</span> 766 <span class="mi">.98px</span> 767 <span class="p">)</span> 768 <span class="p">{</span> 769 <span class="nc">...</span> 770 <span class="p">}</span> 771 <span class="c1">// Medium devices (tablets, less than 992px)</span> 772 <span class="k">@media</span> 773 <span class="p">(</span> 774 <span class="n">max-width</span> 775 <span class="o">:</span> 776 <span class="m">991</span> 777 <span class="mi">.98px</span> 778 <span class="p">)</span> 779 <span class="p">{</span> 780 <span class="nc">...</span> 781 <span class="p">}</span> 782 <span class="c1">// Large devices (desktops, less than 1200px)</span> 783 <span class="k">@media</span> 784 <span class="p">(</span> 785 <span class="n">max-width</span> 786 <span class="o">:</span> 787 <span class="m">1199</span> 788 <span class="mi">.98px</span> 789 <span class="p">)</span> 790 <span class="p">{</span> 791 <span class="nc">...</span> 792 <span class="p">}</span> 793 <span class="c1">// Extra large devices (large desktops)</span> 794 <span class="c1">// No media query since the extra-large breakpoint has no upper bound on its width</span> 795 </code> 796 </pre> 797 </figure> 798 <div class="bd-callout bd-callout-info"> 799 <p>Note that since browsers do not currently support 800 <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of 801 <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"> 802 <code class="highlighter-rouge">min-</code> and 803 <code class="highlighter-rouge">max-</code> prefixes 804 </a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons. 805 </p> 806 </div> 807 <p>Once again, these media queries are also available via Sass mixins:</p> 808 <div class="bd-clipboard"> 809 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 810 </div> 811 <figure class="highlight"> 812 <pre> 813 <code class="language-scss" data-lang="scss"> 814 <span class="k">@include</span> 815 <span class="nd">media-breakpoint-down</span> 816 <span class="p">(</span> 817 <span class="n">xs</span> 818 <span class="p">)</span> 819 <span class="p">{</span> 820 <span class="nc">...</span> 821 <span class="p">}</span> 822 <span class="k">@include</span> 823 <span class="nd">media-breakpoint-down</span> 824 <span class="p">(</span> 825 <span class="n">sm</span> 826 <span class="p">)</span> 827 <span class="p">{</span> 828 <span class="nc">...</span> 829 <span class="p">}</span> 830 <span class="k">@include</span> 831 <span class="nd">media-breakpoint-down</span> 832 <span class="p">(</span> 833 <span class="n">md</span> 834 <span class="p">)</span> 835 <span class="p">{</span> 836 <span class="nc">...</span> 837 <span class="p">}</span> 838 <span class="k">@include</span> 839 <span class="nd">media-breakpoint-down</span> 840 <span class="p">(</span> 841 <span class="n">lg</span> 842 <span class="p">)</span> 843 <span class="p">{</span> 844 <span class="nc">...</span> 845 <span class="p">}</span> 846 <span class="c1">// No media query necessary for xl breakpoint as it has no upper bound on its width</span> 847 <span class="c1">// Example: Style from medium breakpoint and down</span> 848 <span class="k">@include</span> 849 <span class="nd">media-breakpoint-down</span> 850 <span class="p">(</span> 851 <span class="n">md</span> 852 <span class="p">)</span> 853 <span class="p">{</span> 854 <span class="nc">.custom-class</span> 855 <span class="p">{</span> 856 <span class="nl">display</span> 857 <span class="p">:</span> 858 <span class="nb">block</span> 859 <span class="p">;</span> 860 <span class="p">}</span> 861 <span class="p">}</span> 862 </code> 863 </pre> 864 </figure> 865 <p>There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.</p> 866 <div class="bd-clipboard"> 867 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 868 </div> 869 <figure class="highlight"> 870 <pre> 871 <code class="language-scss" data-lang="scss"> 872 <span class="c1">// Extra small devices (portrait phones, less than 576px)</span> 873 <span class="k">@media</span> 874 <span class="p">(</span> 875 <span class="n">max-width</span> 876 <span class="o">:</span> 877 <span class="m">575</span> 878 <span class="mi">.98px</span> 879 <span class="p">)</span> 880 <span class="p">{</span> 881 <span class="nc">...</span> 882 <span class="p">}</span> 883 <span class="c1">// Small devices (landscape phones, 576px and up)</span> 884 <span class="k">@media</span> 885 <span class="p">(</span> 886 <span class="n">min-width</span> 887 <span class="o">:</span> 888 <span class="m">576px</span> 889 <span class="p">)</span> 890 <span class="nf">and</span> 891 <span class="p">(</span> 892 <span class="n">max-width</span> 893 <span class="o">:</span> 894 <span class="m">767</span> 895 <span class="mi">.98px</span> 896 <span class="p">)</span> 897 <span class="p">{</span> 898 <span class="nc">...</span> 899 <span class="p">}</span> 900 <span class="c1">// Medium devices (tablets, 768px and up)</span> 901 <span class="k">@media</span> 902 <span class="p">(</span> 903 <span class="n">min-width</span> 904 <span class="o">:</span> 905 <span class="m">768px</span> 906 <span class="p">)</span> 907 <span class="nf">and</span> 908 <span class="p">(</span> 909 <span class="n">max-width</span> 910 <span class="o">:</span> 911 <span class="m">991</span> 912 <span class="mi">.98px</span> 913 <span class="p">)</span> 914 <span class="p">{</span> 915 <span class="nc">...</span> 916 <span class="p">}</span> 917 <span class="c1">// Large devices (desktops, 992px and up)</span> 918 <span class="k">@media</span> 919 <span class="p">(</span> 920 <span class="n">min-width</span> 921 <span class="o">:</span> 922 <span class="m">992px</span> 923 <span class="p">)</span> 924 <span class="nf">and</span> 925 <span class="p">(</span> 926 <span class="n">max-width</span> 927 <span class="o">:</span> 928 <span class="m">1199</span> 929 <span class="mi">.98px</span> 930 <span class="p">)</span> 931 <span class="p">{</span> 932 <span class="nc">...</span> 933 <span class="p">}</span> 934 <span class="c1">// Extra large devices (large desktops, 1200px and up)</span> 935 <span class="k">@media</span> 936 <span class="p">(</span> 937 <span class="n">min-width</span> 938 <span class="o">:</span> 939 <span class="m">1200px</span> 940 <span class="p">)</span> 941 <span class="p">{</span> 942 <span class="nc">...</span> 943 <span class="p">}</span> 944 </code> 945 </pre> 946 </figure> 947 <p>These media queries are also available via Sass mixins:</p> 948 <div class="bd-clipboard"> 949 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 950 </div> 951 <figure class="highlight"> 952 <pre> 953 <code class="language-scss" data-lang="scss"> 954 <span class="k">@include</span> 955 <span class="nd">media-breakpoint-only</span> 956 <span class="p">(</span> 957 <span class="n">xs</span> 958 <span class="p">)</span> 959 <span class="p">{</span> 960 <span class="nc">...</span> 961 <span class="p">}</span> 962 <span class="k">@include</span> 963 <span class="nd">media-breakpoint-only</span> 964 <span class="p">(</span> 965 <span class="n">sm</span> 966 <span class="p">)</span> 967 <span class="p">{</span> 968 <span class="nc">...</span> 969 <span class="p">}</span> 970 <span class="k">@include</span> 971 <span class="nd">media-breakpoint-only</span> 972 <span class="p">(</span> 973 <span class="n">md</span> 974 <span class="p">)</span> 975 <span class="p">{</span> 976 <span class="nc">...</span> 977 <span class="p">}</span> 978 <span class="k">@include</span> 979 <span class="nd">media-breakpoint-only</span> 980 <span class="p">(</span> 981 <span class="n">lg</span> 982 <span class="p">)</span> 983 <span class="p">{</span> 984 <span class="nc">...</span> 985 <span class="p">}</span> 986 <span class="k">@include</span> 987 <span class="nd">media-breakpoint-only</span> 988 <span class="p">(</span> 989 <span class="n">xl</span> 990 <span class="p">)</span> 991 <span class="p">{</span> 992 <span class="nc">...</span> 993 <span class="p">}</span> 994 </code> 995 </pre> 996 </figure> 997 <p>Similarly, media queries may span multiple breakpoint widths:</p> 998 <div class="bd-clipboard"> 999 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 1000 </div> 1001 <figure class="highlight"> 1002 <pre> 1003 <code class="language-scss" data-lang="scss"> 1004 <span class="c1">// Example</span> 1005 <span class="c1">// Apply styles starting from medium devices and up to extra large devices</span> 1006 <span class="k">@media</span> 1007 <span class="p">(</span> 1008 <span class="n">min-width</span> 1009 <span class="o">:</span> 1010 <span class="m">768px</span> 1011 <span class="p">)</span> 1012 <span class="nf">and</span> 1013 <span class="p">(</span> 1014 <span class="n">max-width</span> 1015 <span class="o">:</span> 1016 <span class="m">1199</span> 1017 <span class="mi">.98px</span> 1018 <span class="p">)</span> 1019 <span class="p">{</span> 1020 <span class="nc">...</span> 1021 <span class="p">}</span> 1022 </code> 1023 </pre> 1024 </figure> 1025 <p>The Sass mixin for targeting the same screen size range would be:</p> 1026 <div class="bd-clipboard"> 1027 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 1028 </div> 1029 <figure class="highlight"> 1030 <pre> 1031 <code class="language-scss" data-lang="scss"> 1032 <span class="k">@include</span> 1033 <span class="nd">media-breakpoint-between</span> 1034 <span class="p">(</span> 1035 <span class="n">md</span> 1036 <span class="o">,</span> 1037 <span class="n">xl</span> 1038 <span class="p">)</span> 1039 <span class="p">{</span> 1040 <span class="nc">...</span> 1041 <span class="p">}</span> 1042 </code> 1043 </pre> 1044 </figure> 1045 <h2 id="z-index"> 1046 <div>Z-index 1047 <a class="anchorjs-link " href="#z-index" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a> 1048 </div> 1049 </h2> 1050 <p>Several Bootstrap components utilize 1051 <code class="highlighter-rouge">z-index</code>, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more. 1052 </p> 1053 <p>These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 1054 <code class="highlighter-rouge">100</code>+ or 1055 <code class="highlighter-rouge">500</code>+. 1056 </p> 1057 <p>We don’t encourage customization of these individual values; should you change one, you likely need to change them all.</p> 1058 <div class="bd-clipboard"> 1059 <button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button> 1060 </div> 1061 <figure class="highlight"> 1062 <pre> 1063 <code class="language-scss" data-lang="scss"> 1064 <span class="nv">$zindex-dropdown</span> 1065 <span class="p">:</span> 1066 <span class="m">1000</span> 1067 <span class="o">!</span> 1068 <span class="nb">default</span> 1069 <span class="p">;</span> 1070 <span class="nv">$zindex-sticky</span> 1071 <span class="p">:</span> 1072 <span class="m">1020</span> 1073 <span class="o">!</span> 1074 <span class="nb">default</span> 1075 <span class="p">;</span> 1076 <span class="nv">$zindex-fixed</span> 1077 <span class="p">:</span> 1078 <span class="m">1030</span> 1079 <span class="o">!</span> 1080 <span class="nb">default</span> 1081 <span class="p">;</span> 1082 <span class="nv">$zindex-modal-backdrop</span> 1083 <span class="p">:</span> 1084 <span class="m">1040</span> 1085 <span class="o">!</span> 1086 <span class="nb">default</span> 1087 <span class="p">;</span> 1088 <span class="nv">$zindex-modal</span> 1089 <span class="p">:</span> 1090 <span class="m">1050</span> 1091 <span class="o">!</span> 1092 <span class="nb">default</span> 1093 <span class="p">;</span> 1094 <span class="nv">$zindex-popover</span> 1095 <span class="p">:</span> 1096 <span class="m">1060</span> 1097 <span class="o">!</span> 1098 <span class="nb">default</span> 1099 <span class="p">;</span> 1100 <span class="nv">$zindex-tooltip</span> 1101 <span class="p">:</span> 1102 <span class="m">1070</span> 1103 <span class="o">!</span> 1104 <span class="nb">default</span> 1105 <span class="p">;</span> 1106 </code> 1107 </pre> 1108 </figure> 1109 <p>To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit 1110 <code class="highlighter-rouge">z-index</code> values of 1111 <code class="highlighter-rouge">1</code>, 1112 <code class="highlighter-rouge">2</code>, and 1113 <code class="highlighter-rouge">3</code> for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher 1114 <code class="highlighter-rouge">z-index</code> value to show their border over the sibling elements. 1115 </p> 1116 </main> 1117 </div> 1118 </div> 1119 <script src="./assets/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 1120 <script>window.jQuery || document.write(' 1121 <script src="/assets/js/vendor/jquery-slim.min.js"><\/script>') 1122 </script> 1123 <script src="./assets/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 1124 <script src="./assets/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 1125 <script src="./assets/docsearch.min.js"></script> 1126 <script src="./assets/docs.min.js"></script> 1127 </body> 1128 </html>