github.com/MontFerret/ferret@v0.18.0/e2e/pages/static/grid.html (about) 1 <!DOCTYPE html> 2 <!-- saved from url=(0045)http://getbootstrap.com/docs/4.1/layout/grid/ --> 3 <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <meta name="description" content="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes."> 7 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> 8 <meta name="generator" content="Jekyll v3.8.3"> 9 10 <title>Grid system · Bootstrap</title> 11 12 <!-- Bootstrap core CSS --> 13 14 <style class="anchorjs"></style><link href="./assets/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 15 16 17 <!-- Documentation extras --> 18 19 <link href="./assets/docsearch.min.css" rel="stylesheet"> 20 21 <link href="./assets/docs.min.css" rel="stylesheet"> 22 23 <!-- Favicons --> 24 <link rel="apple-touch-icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> 25 <link rel="icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> 26 <link rel="icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> 27 <link rel="manifest" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/manifest.json"> 28 <link rel="mask-icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c"> 29 <link rel="icon" href="http://getbootstrap.com/favicon.ico"> 30 <meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml"> 31 <meta name="theme-color" content="#563d7c"> 32 33 34 <!-- Twitter --> 35 <meta name="twitter:card" content="summary"> 36 <meta name="twitter:site" content="@getbootstrap"> 37 <meta name="twitter:creator" content="@getbootstrap"> 38 <meta name="twitter:title" content="Grid system"> 39 <meta name="twitter:description" content="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes."> 40 <meta name="twitter:image" content="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social-logo.png"> 41 42 <!-- Facebook --> 43 <meta property="og:url" content="https://getbootstrap.com/docs/4.1/layout/grid/"> 44 <meta property="og:title" content="Grid system"> 45 <meta property="og:description" content="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes."> 46 <meta property="og:type" content="website"> 47 <meta property="og:image" content="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social.png"> 48 <meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social.png"> 49 <meta property="og:image:type" content="image/png"> 50 <meta property="og:image:width" content="1200"> 51 <meta property="og:image:height" content="630"> 52 53 54 <script> 55 window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; 56 ga('create', 'UA-146052-10', 'getbootstrap.com'); 57 ga('send', 'pageview'); 58 </script> 59 <script async="" src="./assets/analytics.js"></script> 60 61 <style type="text/css">/*.lleo_errorSelection *::-moz-selection, 62 .lleo_errorSelection *::selection, 63 .lleo_errorSelection *::-webkit-selection { 64 background-color: red !important; 65 color: #fff !important;; 66 }*/ 67 68 #lleo_dialog, 69 #lleo_dialog * { 70 color: #000 !important; 71 font: normal 13px Arial, Helvetica !important; 72 line-height: 15px !important; 73 margin: 0 !important; 74 padding: 0 !important; 75 background: none !important; 76 border: none 0 !important; 77 position: static !important; 78 vertical-align: baseline !important; 79 overflow: visible !important; 80 width: auto !important; 81 height: auto !important; 82 max-width: none !important; 83 max-height: none !important; 84 float: none !important; 85 visibility: visible !important; 86 text-align: left !important; 87 text-transform: none !important; 88 border-collapse: separate !important; 89 border-spacing: 2px !important; 90 box-sizing: content-box !important; 91 box-shadow: none !important; 92 opacity: 1 !important; 93 text-shadow: none !important; 94 letter-spacing: normal !important; 95 -webkit-filter: none !important; 96 -moz-filter: none !important; 97 filter: none !important; 98 } 99 #lleo_dialog *:before, 100 #lleo_dialog *:after { 101 content: ''; 102 } 103 104 #lleo_dialog iframe { 105 height: 0 !important; 106 width: 0 !important; 107 } 108 109 #lleo_dialog { 110 position: absolute !important; 111 background: #fff !important; 112 border: solid 1px #ccc !important; 113 padding: 7px 0 0 !important; 114 left: -999px; 115 top: -999px; 116 width: 440px !important; 117 overflow: hidden; 118 display: block !important; 119 z-index: 999999999 !important; 120 box-shadow: 8px 16px 30px rgba(0, 0, 0, 0.16) !important; 121 border-radius: 3px !important; 122 opacity: 0 !important; 123 -webkit-transform: translateY(15px); 124 -moz-transform: translateY(15px); 125 -ms-transform: translateY(15px); 126 -o-transform: translateY(15px); 127 transform: translateY(15px); 128 } 129 #lleo_dialog.lleo_show_small { 130 width: 150px !important; 131 } 132 #lleo_dialog.lleo_show { 133 opacity: 1 !important; 134 -webkit-transform: translateY(0); 135 -moz-transform: translateY(0); 136 -ms-transform: translateY(0); 137 -o-transform: translateY(0); 138 transform: translateY(0); 139 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s !important; 140 -moz-transition: -moz-transform 0.3s, opacity 0.3s !important; 141 -ms-transition: -ms-transform 0.3s, opacity 0.3s !important; 142 -o-transition: -o-transform 0.3s, opacity 0.3s !important; 143 transition: transform 0.3s, opacity 0.3s !important; 144 } 145 #lleo_dialog.lleo_collapse { 146 opacity: 0 !important; 147 -webkit-transform: scale(0.25, 0.1) translate(-550px, 100px); 148 -moz-transform: scale(0.25, 0.1) translate(-550px, 100px); 149 -ms-transform: scale(0.25, 0.1) translate(-550px, 100px); 150 -o-transform: scale(0.25, 0.1) translate(-550px, 100px); 151 transform: scale(0.25, 0.1) translate(-550px, 100px); 152 -webkit-transition: -webkit-transform 0.4s, opacity 0.4s !important; 153 -moz-transition: -moz-transform 0.4s, opacity 0.4s !important; 154 -ms-transition: -ms-transform 0.4s, opacity 0.4s !important; 155 -o-transition: -o-transform 0.4s, opacity 0.4s !important; 156 transition: transform 0.4s, opacity 0.4s !important; 157 } 158 #lleo_dialog input::-webkit-input-placeholder { 159 color: #aaa !important; 160 } 161 #lleo_dialog .lleo_has_pic #lleo_word { 162 margin-right: 80px !important; 163 } 164 #lleo_dialog #lleo_translationsContainer1 { 165 position: relative !important; 166 } 167 #lleo_dialog #lleo_translationsContainer2 { 168 padding: 7px 0 0 !important; 169 vertical-align: middle !important; 170 } 171 #lleo_dialog #lleo_word { 172 color: #000 !important; 173 margin: 0 5px 2px 0 !important; 174 /*float: left !important;*/ 175 } 176 #lleo_dialog .lleo_has_sound #lleo_word { 177 margin-left: 30px !important; 178 } 179 #lleo_dialog #lleo_text { 180 font-weight: bold !important; 181 color: #d56e00 !important; 182 text-decoration: none !important; 183 cursor: default !important; 184 } 185 /* 186 #lleo_dialog #lleo_text.lleo_known { 187 cursor: pointer !important; 188 text-decoration: underline !important; 189 } 190 */ 191 /*#lleo_dialog #lleo_closeBtn { 192 position: absolute !important; 193 right: 6px !important; 194 top: 5px !important; 195 line-height: 1px !important; 196 text-decoration: none !important; 197 font-weight: bold !important; 198 font-size: 0 !important; 199 color: #aaa !important; 200 display: block !important; 201 z-index: 9999999999 !important; 202 width: 7px !important; 203 height: 7px !important; 204 padding: 0 !important; 205 margin: 0 !important; 206 }*/ 207 208 #lleo_dialog #lleo_optionsBtn { 209 position: absolute !important; 210 right: 3px !important; 211 top: 5px !important; 212 line-height: 1px !important; 213 text-decoration: none !important; 214 font-weight: bold !important; 215 font-size: 13px !important; 216 color: #aaa !important; 217 padding: 2px !important; 218 display: none; 219 } 220 #lleo_dialog.lleo_optionsShown #lleo_optionsBtn { 221 display: block !important; 222 } 223 #lleo_dialog #lleo_optionsBtn img { 224 width: 12px !important; 225 height: 12px !important; 226 } 227 #lleo_dialog #lleo_sound { 228 float: left !important; 229 width: 16px !important; 230 height: 16px !important; 231 margin-left: 9px !important; 232 margin-right: 3px !important; 233 background: 0 0 no-repeat !important; 234 cursor: pointer !important; 235 display: none !important; 236 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAfNJREFUeNq0U01IVFEU/u57Oo5WhBRIBBptykWLYBa2soWiEKQQEbrSFsGbVRQKQc2iFqGitXqvjQxCoCJCqyI0aBUtZILaJNUuYWYWo8HovJ/707nP94bnz0rxwvfOuefd8517fi5TSuE4i50YwZ3l37ZhNlpgzFkaaM/G9sHF1YskNrT+7l4PjMOcb78t2JL71uxgB+2UlfxHTtq5N94fIOh/88kWgWfl73ZCSQkpeGg3H091JY6dI2S00qA/N3KO3dDUYhFgEmZGurG+w9FqApIHsVM7kaTF9Nhn0r8Q7hPWQgIRuNaH3AMUA4W/Lkdh04cpFS43G0TgxQTvCdMETVAk3KynIHwXZU/ge8XDt7KH9bKLjU0P2zVO5LsEpSejVRJ9UR18EtfqKegovs9R3Q6w9c/H1o4Aa2Jwm1lIvn9RJ4w9RdRRzqcYrpwycCll4Cy1lnkS3Bc6vfBg28v8aRIfI78zhB/1GygROH3jLyyzMQ0zlUZuZBSlKkeLoegGtTjYLcJ8pF+NakHOFC2J6w+f25mxSfWrWFF/ShXVPTGvtN14NNkVnxlYWJkgZEL7/vwKr55lKSVnaGYWkuYgrgG172uUv47+U7fw0EHaJXmalUQy/HqO6lBzEsVjJC4Q8kd6TETQpjuaGOvjv8b/AgwA/ij1XMx58NIAAAAASUVORK5CYII=) !important; 237 } 238 #lleo_dialog .lleo_has_sound #lleo_sound { 239 display: block !important; 240 } 241 242 #lleo_dialog #lleo_soundWave { 243 border: solid 5px #4495CC !important; 244 border-radius: 5px !important; 245 position: absolute !important; 246 left: -5px !important; 247 top: -5px !important; 248 right: -5px !important; 249 bottom: -5px !important; 250 z-index: 0 !important; 251 opacity: 0.9 !important; 252 display: none !important; 253 } 254 #lleo_dialog #lleo_soundWave.lleo_beforePlaying { 255 display: block !important; 256 } 257 #lleo_dialog #lleo_soundWave.lleo_playing { 258 opacity: 0 !important; 259 border-width: 20px !important; 260 border-radius: 30px !important; 261 262 -webkit-transform: scale(1.07,1.1) !important; 263 -moz-transform: scale(1.07,1.1) !important; 264 -ms-transform: scale(1.07,1.1) !important; 265 transform: scale(1.07,1.1) !important; 266 267 -webkit-transition: all 0.6s !important; 268 -moz-transition: all 0.6s !important; 269 -ms-transition: all 0.6s !important; 270 transition: all 0.6s !important; 271 } 272 273 274 #lleo_dialog #lleo_picOuter { 275 position: absolute !important; 276 float: right !important; 277 top: 4px; 278 right: 5px; 279 z-index: 9 !important; 280 display: none !important; 281 width: 100px !important; 282 } 283 #lleo_dialog.lleo_optionsShown #lleo_picOuter { 284 right: 25px; 285 } 286 #lleo_dialog .lleo_has_pic #lleo_picOuter { 287 display: block !important; 288 } 289 #lleo_dialog #lleo_picOuter:hover { 290 width: auto !important; 291 z-index: 11 !important; 292 } 293 #lleo_dialog #lleo_pic, 294 #lleo_dialog #lleo_picBig { 295 position: absolute !important; 296 top: 0 !important; 297 right: 0 !important; 298 border: solid 2px #fff !important; 299 -webkit-border-radius: 2px !important; 300 -moz-border-radius: 2px !important; 301 border-radius: 2px !important; 302 z-index: 1 !important; 303 } 304 #lleo_dialog #lleo_pic { 305 position: relative !important; 306 border: none !important; 307 width: 30px !important; 308 } 309 #lleo_dialog #lleo_picBig { 310 box-shadow: -1px 2px 4px rgba(0,0,0,0.3); 311 z-index: 2 !important; 312 opacity: 0 !important; 313 visibility: hidden !important; 314 } 315 #lleo_dialog #lleo_picOuter:hover #lleo_picBig { 316 visibility: visible !important; 317 opacity: 1 !important; 318 -webkit-transition: opacity 0.3s !important; 319 -webkit-transition-delay: 0.3s !important; 320 } 321 #lleo_dialog #lleo_transcription { 322 margin: 0 80px 4px 31px !important; 323 color: #aaaaaa !important; 324 } 325 #lleo_dialog .lleo_no_trans { 326 color: #aaa !important; 327 } 328 329 #lleo_dialog .ll-translation-counter { 330 float: right !important; 331 font-size: 11px !important; 332 color: #aaa !important; 333 padding: 2px 2px 1px 10px !important; 334 } 335 336 #lleo_dialog .ll-translation-text { 337 float: left !important; 338 /*width: 80% !important;*/ 339 } 340 341 #lleo_dialog #lleo_trans a { 342 color: #3F669F !important; 343 text-decoration: none !important; 344 text-overflow: ellipsis !important; 345 padding: 1px 4px !important; 346 overflow: hidden !important; 347 float: left !important; 348 width: 320px !important; 349 } 350 351 #lleo_dialog .ll-translation-item { 352 color: #3F669F !important; 353 border: solid 1px #fff !important; 354 padding: 3px !important; 355 width: 100% !important; 356 float: left !important; 357 -moz-border-radius: 2px !important; 358 -webkit-border-radius: 2px !important; 359 border-radius: 2px !important; 360 } 361 362 #lleo_dialog .ll-translation-item:hover { 363 border: solid 1px #9FC2C9 !important; 364 background: #EDF4F6 !important; 365 cursor: pointer !important; 366 } 367 #lleo_dialog .ll-translation-item:hover .ll-translation-counter { 368 color: #83a0a6 !important; 369 } 370 371 #lleo_dialog .ll-translation-marker { 372 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAWSURBVBhXY7RPm/+fAQkwIXNAbMICAJQ8AkvqWg/SAAAAAElFTkSuQmCC) !important; 373 display: inline-block !important; 374 width: 4px !important; 375 height: 4px !important; 376 margin: 7px 5px 2px 2px !important; 377 float: left !important; 378 } 379 380 #lleo_dialog #lleo_icons { 381 color: #aaa !important; 382 font-size: 11px !important; 383 background: #f8f8f8 !important; 384 padding: 10px 10px 10px 16px !important; 385 } 386 #lleo_icons a { 387 display: inline-block !important; 388 width: 16px !important; 389 height: 16px !important; 390 margin: 0 10px -4px 3px !important; 391 text-decoration: none !important; 392 opacity: 0.5 !important; 393 background: url(data:image/png;base64,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) !important; 394 } 395 #lleo_icons a:hover { 396 opacity: 1 !important; 397 } 398 #lleo_icons a.lleo_google {background-position:-34px 0 !important;} 399 #lleo_icons a.lleo_multitran {background-position:-64px 0 !important;} 400 #lleo_icons a.lleo_lingvo {background-position:-51px 0 !important; width: 12px !important;} 401 #lleo_icons a.lleo_dict {background-position:-17px 0 !important;} 402 #lleo_icons a.lleo_linguee {background-position:-81px 0 !important;} 403 #lleo_icons a.lleo_michaelis {background-position:-98px 0 !important;} 404 405 #lleo_dialog #lleo_contextContainer { 406 margin: 0 !important; 407 padding: 3px 15px 8px 10px !important; 408 background: #eee !important; 409 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)) !important; 410 background: -moz-linear-gradient(-90deg, #fff, #eee) !important; 411 border-bottom: solid 1px #ddd !important; 412 border-top-left-radius: 3px !important; 413 border-top-right-radius: 3px !important; 414 display: none !important; 415 overflow: hidden !important; 416 } 417 #lleo_dialog .lleo_has_context #lleo_contextContainer { 418 display: block !important; 419 } 420 #lleo_dialog #lleo_context { 421 color: #444 !important; 422 text-shadow: 1px 1px 0 #f4f4f4 !important; 423 line-height: 12px !important; 424 font-size: 11px !important; 425 margin-left: 2px !important; 426 } 427 #lleo_dialog #lleo_context b { 428 line-height: 12px !important; 429 color: #000 !important; 430 font-weight: bold !important; 431 font-size: 11px !important; 432 } 433 /*#lleo_dialog #lleo_gBrand { 434 color: #aaa !important; 435 font-size: 10px !important; 436 *//*padding-right: 52px !important;*//* 437 padding-bottom: 14px !important; 438 margin: -3px 4px 0 4px !important; 439 background: left bottom url(data:image/png;base64,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) no-repeat !important; 440 display: inline-block !important; 441 float: right !important; 442 } 443 #lleo_dialog #lleo_gBrand.hidden { 444 display: none !important; 445 }*/ 446 #lleo_dialog #lleo_translateContextLink { 447 color: #444 !important; 448 text-shadow: 1px 1px 0 #f4f4f4 !important; 449 background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#ddd)) !important; 450 background: -moz-linear-gradient(-90deg, #f4f4f4, #ddd) !important; 451 border: solid 1px !important; 452 box-shadow: 1px 1px 0 #f6f6f6 !important; 453 border-color: #999 #aaa #aaa #999 !important; 454 -moz-border-radius: 2px !important; 455 -webkit-border-radius: 2px !important; 456 border-radius: 2px !important; 457 padding: 0 3px !important; 458 font-size: 11px !important; 459 text-decoration: none !important; 460 margin: 1px 5px 0 !important; 461 display: inline-block !important; 462 white-space: nowrap !important; 463 } 464 #lleo_dialog #lleo_translateContextLink:hover { 465 background: #f8f8f8 !important; 466 } 467 #lleo_dialog #lleo_translateContextLink.hidden { 468 visibility: hidden !important; 469 } 470 471 #lleo_dialog #lleo_setTransForm { 472 display: block !important; 473 margin-top: 3px !important; 474 padding-top: 5px !important; 475 /* Set position and background because the form might be overlapped by an image when no translations */ 476 position: relative !important; 477 background: #fff !important; 478 z-index: 10 !important; 479 padding-bottom: 10px !important; 480 padding-left: 16px !important; 481 } 482 #lleo_dialog .lleo-custom-translation { 483 padding: 4px 5px !important; 484 border: solid 1px #ddd !important; 485 border-radius: 2px !important; 486 width: 90% !important; 487 min-width: 270px !important; 488 background: -webkit-gradient(linear, 0 0, 0 20, from(#f1f1f1), to(#fff)) !important; 489 background: -moz-linear-gradient(-90deg, #f1f1f1, #fff) !important; 490 font: normal 13px Arial, Helvetica !important; 491 line-height: 15px !important; 492 } 493 #lleo_dialog .lleo-custom-translation:hover { 494 border: solid 1px #aaa !important; 495 } 496 #lleo_dialog .lleo-custom-translation:focus { 497 background: #FFFEC9 !important; 498 } 499 500 #lleo_dialog *.hidden { 501 display: none !important; 502 } 503 504 #lleo_dialog .infinitive{ 505 color: #D56E00 !important; 506 text-decoration: none; 507 border-bottom: 1px dotted #D56E00 !important; 508 } 509 #lleo_dialog .infinitive:hover{ 510 border: none !important; 511 } 512 513 #lleo_dialog .lleo_separator { 514 height: 1px !important; 515 background: #eee; 516 margin-top: 10px !important; 517 background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,#eee 8%,rgba(255,255,255,1) 80%) !important; 518 background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, #eee 8%, rgba(255,255,255,1) 80%) !important; 519 background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,#eee 8%,rgba(255,255,255,1) 80%) !important; 520 background: linear-gradient(to right, rgba(255,255,255,1) 0%,#eee 8%,rgba(255,255,255,1) 80%) !important; 521 } 522 #lleo_dialog #lleo_trans { 523 /*border-top: 1px solid #eeeeee !important;*/ 524 padding: 5px 30px 0 14px !important; 525 zoom: 1; 526 } 527 528 #lleo_dialog .lleo_clearfix { 529 display: block !important; 530 clear: both !important; 531 visibility: hidden !important; 532 height: 0 !important; 533 font-size: 0 !important; 534 } 535 536 537 #lleo_dialog #lleo_picOuter table { 538 width: 44px !important; 539 position: absolute !important; 540 right: 0 !important; 541 top: 0 !important; 542 vertical-align: middle !important; 543 } 544 545 #lleo_dialog #lleo_picOuter td { 546 width: 38px !important; 547 height: 38px !important; 548 /*border: 1px solid #eeeeee !important;*/ 549 vertical-align: middle !important; 550 text-align: center !important; 551 } 552 553 #lleo_dialog #lleo_picOuter td div { 554 height: 38px !important; 555 overflow: hidden !important; 556 } 557 558 #lleo_dialog .lleo_empty { 559 margin: 0 5px 7px !important; 560 } 561 562 #lleo_youtubeExportBtn { 563 margin-left: 10px; 564 height: 24px; 565 } 566 #lleo_youtubeExportBtn i { 567 display: inline-block; 568 width: 16px; 569 height: 16px; 570 background: 0 0 url(https://d144fqpiyasmrr.cloudfront.net/plugins/all/images/i16.png) !important; 571 } 572 #lleo_youtubeExportBtn .yt-uix-button-content { 573 font-size: 12px; 574 line-height: 2px; 575 } 576 577 578 /*** Parsed Lyrics Content *****************************/ 579 580 .lleo_lyrics tran { 581 background: transparent !important; 582 border-radius: 2px !important; 583 text-shadow: none !important; 584 cursor: pointer !important; 585 } 586 .lleo_lyrics tran:hover { 587 color: #fff !important; 588 background: #C77213 !important; 589 -webkit-transition: all 0.1s !important; 590 -moz-transition: all 0.1s !important; 591 -ms-transition: all 0.1s !important; 592 -o-transition: all 0.1s !important; 593 transition: all 0.1s !important; 594 } 595 596 .lleo_songName { 597 border: solid 1px #ffd47c; 598 background: #fff1c2; 599 border-radius: 2px; 600 } 601 602 .lleo_hidden_iframe { 603 visibility: hidden; 604 }</style><style type="text/css" id="lleo_css_enjoyContentControls">#lleo_enjoyContentControls, 605 #lleo_enjoyContentControls * { 606 color: #000 !important; 607 font: normal 13px Arial, Helvetica !important; 608 line-height: 15px !important; 609 margin: 0 !important; 610 padding: 0 !important; 611 background: none !important; 612 border: none 0 !important; 613 position: static !important; 614 vertical-align: baseline !important; 615 overflow: visible !important; 616 width: auto !important; 617 height: auto !important; 618 max-width: none !important; 619 max-height: none !important; 620 float: none !important; 621 visibility: visible !important; 622 text-align: left !important; 623 text-transform: none !important; 624 border-collapse: separate !important; 625 border-spacing: 2px !important; 626 box-sizing: content-box !important; 627 box-shadow: none !important; 628 opacity: 1 !important; 629 text-shadow: none !important; 630 } 631 632 #lleo_enjoyContentControls { 633 background: #f7c875 !important; 634 position: fixed !important; 635 right: 0 !important; 636 top: -40px !important; 637 width: 39px !important; 638 height: 34px !important; 639 opacity: 0.85 !important; 640 border-top-left-radius: 4px !important; 641 border-bottom-left-radius: 4px !important; 642 box-shadow: 2px 4px 12px rgba(0,0,0,0.3) !important; 643 z-index: 9999999999999 !important; 644 overflow: hidden !important; 645 } 646 647 #lleo_enjoyContentControls.lleo_show { 648 top: 130px !important; 649 650 -webkit-transition: top 0.8s ease-out !important; 651 -moz-transition: top 0.8s ease-out !important; 652 -ms-transition: top 0.8s ease-out !important; 653 -o-transition: top 0.8s ease-out !important; 654 transition: top 0.8s ease-out !important; 655 } 656 657 #lleo_enjoyContentControls:hover { 658 opacity: 1 !important; 659 /*width: 220px !important;*/ 660 661 -webkit-transition: opacity 0.4s linear, width 0.4s ease-out 1.2s !important; 662 -moz-transition: opacity 0.4s linear, width 0.4s ease-out 1.2s !important; 663 -ms-transition: opacity 0.4s linear, width 0.4s ease-out 1.2s !important; 664 -o-transition: opacity 0.4s linear, width 0.4s ease-out 1.2s !important; 665 transition: opacity 0.4s linear, width 0.4s linear 1.2s !important; 666 } 667 668 #lleo_enjoyContentControls.lleo_hiding { 669 opacity: 0 !important; 670 -webkit-transition: opacity 3s linear !important; 671 -moz-transition: opacity 3s linear !important; 672 -ms-transition: opacity 3s linear !important; 673 transition: opacity 3s linear !important; 674 } 675 676 #lleo_enjoyContentControls #lleo_enjoyContentPanel { 677 white-space: nowrap !important; 678 margin: 9px 44px 0 10px !important; 679 opacity: 0 !important; 680 681 -webkit-transition: all 0.4s linear 1.2s !important; 682 -moz-transition: all 0.4s linear 1.2s !important; 683 -ms-transition: all 0.4s linear 1.2s !important; 684 -o-transition: all 0.4s linear 1.2s !important; 685 transition: all 0.4s linear 1.2s !important; 686 } 687 #lleo_enjoyContentControls:hover #lleo_enjoyContentPanel { 688 opacity: 1 !important; 689 } 690 691 #lleo_enjoyContentControls #lleo_enjoyContentPanel input { 692 margin-right: 5px !important; 693 } 694 695 696 #lleo_enjoyContentButton { 697 background: #fff center center no-repeat !important; 698 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAk6AAAJOgHwZJJKAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAADBQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL92gewAAAA90Uk5TAA0PEhUcLS9CxszS29z1M86yOAAAAFVJREFUCFtjYIADduMCMGZgvmsAxggGUFgELMXAwDq7AaI8MnULmGY9pTYRzIj5vzIALHD+/1Gw4pj/fwJA2kECYHNkgAJgK/yAAmDA8QasBQgcIRQA12YesqxFXfcAAAAASUVORK5CYII8850aa0afe766ff5b5bb3697b8de32f7) !important; 699 background-size: 16px 16px !important; 700 width: 36px !important; 701 height: 34px !important; 702 cursor: pointer !important; 703 position: absolute !important; 704 right: 0 !important; 705 top: 0 !important; 706 } 707 708 709 @media only screen and (min--moz-device-pixel-ratio: 2), 710 only screen and (-webkit-min-device-pixel-ratio: 2), 711 only screen and (min-device-pixel-ratio: 2) { 712 713 #lleo_enjoyContentButton { 714 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAABJ0AAASdAHeZh94AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAD9QTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxQXeHgAAABR0Uk5TAAQFDRkcNz1PcHSIrK6ws7/b8P5ZkzdFAAAAo0lEQVQ4y62RzQ6DMAyDTSkjpfy04Pd/1h12WAtpKk3zzfosJXGAP2l0AODGloc7BJDDtTwgTInS9kAik+W7gd6I7pLFWRK9cuZXgcyT0VjguliJwG1AYPZNvjsAC2OLXzOAYa07LPfj+YLbGJqcPOfd5OTV4WSAVlTNn1Xf+ONZD357t8KrgMbLERovlxSFV2dGhVfy2ebAlG3+SVgc8FHws96B8RE8rjk+bwAAAABJRU5ErkJggga9a50a0b337b82ef5c0bda0f6d6960d3) !important; 715 } 716 717 }</style><style type="text/css">#lleo_enjoyContentControls:hover {width: 222px !important}</style></head> 718 <body> 719 <a id="skippy" class="sr-only sr-only-focusable" href="http://getbootstrap.com/docs/4.1/layout/grid/#content"> 720 <div class="container"> 721 <span class="skiplink-text">Skip to main content</span> 722 </div> 723 </a> 724 725 726 <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> 727 <a class="navbar-brand mr-0 mr-md-2" href="http://getbootstrap.com/" 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><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></svg> 728 </a> 729 730 <div class="navbar-nav-scroll"> 731 <ul class="navbar-nav bd-navbar-nav flex-row"> 732 <li class="nav-item"> 733 <a class="nav-link " href="http://getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> 734 </li> 735 <li class="nav-item"> 736 <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> 737 </li> 738 <li class="nav-item"> 739 <a class="nav-link " href="http://getbootstrap.com/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> 740 </li> 741 <li class="nav-item"> 742 <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> 743 </li> 744 <li class="nav-item"> 745 <a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> 746 </li> 747 <li class="nav-item"> 748 <a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> 749 </li> 750 </ul> 751 </div> 752 753 <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex"> 754 <li class="nav-item dropdown"> 755 <a class="nav-item nav-link dropdown-toggle mr-md-2" href="http://getbootstrap.com/docs/4.1/layout/grid/#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 756 v4.1 757 </a> 758 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 759 <a class="dropdown-item active" href="http://getbootstrap.com/docs/4.1/">Latest (4.1.x)</a> 760 <a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a> 761 <div class="dropdown-divider"></div> 762 <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a> 763 <a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a> 764 <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a> 765 </div> 766 </li> 767 768 <li class="nav-item"> 769 <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"></path></svg> 770 </a> 771 </li> 772 <li class="nav-item"> 773 <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"></path></svg> 774 </a> 775 </li> 776 <li class="nav-item"> 777 <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"></path><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></svg> 778 </a> 779 </li> 780 </ul> 781 782 <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> 783 </header> 784 785 786 <div class="container-fluid"> 787 <div class="row flex-xl-nowrap"> 788 <div class="col-12 col-md-3 col-xl-2 bd-sidebar"> 789 <form class="bd-search d-flex align-items-center"> 790 <span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;"><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;"><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><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;"><div class="ds-dataset-1"></div></span></span> 791 <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"></path></svg> 792 </button> 793 </form> 794 795 <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> 796 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/getting-started/introduction/"> 797 Getting started 798 </a> 799 800 <ul class="nav bd-sidenav"><li> 801 <a href="http://getbootstrap.com/docs/4.1/getting-started/introduction/"> 802 Introduction 803 </a></li><li> 804 <a href="http://getbootstrap.com/docs/4.1/getting-started/download/"> 805 Download 806 </a></li><li> 807 <a href="http://getbootstrap.com/docs/4.1/getting-started/contents/"> 808 Contents 809 </a></li><li> 810 <a href="http://getbootstrap.com/docs/4.1/getting-started/browsers-devices/"> 811 Browsers & devices 812 </a></li><li> 813 <a href="http://getbootstrap.com/docs/4.1/getting-started/javascript/"> 814 JavaScript 815 </a></li><li> 816 <a href="http://getbootstrap.com/docs/4.1/getting-started/theming/"> 817 Theming 818 </a></li><li> 819 <a href="http://getbootstrap.com/docs/4.1/getting-started/build-tools/"> 820 Build tools 821 </a></li><li> 822 <a href="http://getbootstrap.com/docs/4.1/getting-started/webpack/"> 823 Webpack 824 </a></li><li> 825 <a href="http://getbootstrap.com/docs/4.1/getting-started/accessibility/"> 826 Accessibility 827 </a></li></ul> 828 </div><div class="bd-toc-item active"> 829 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/layout/overview/"> 830 Layout 831 </a> 832 833 <ul class="nav bd-sidenav"><li class="active bd-sidenav-active"> 834 <a href="overview.html"> 835 Overview 836 </a></li><li> 837 <a href="grid.html"> 838 Grid 839 </a></li><li> 840 <a href="media.html"> 841 Media object 842 </a></li><li> 843 <a href="utilities.html"> 844 Utilities for layout 845 </a></li></ul> 846 </div><div class="bd-toc-item"> 847 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/content/reboot/"> 848 Content 849 </a> 850 851 <ul class="nav bd-sidenav"><li> 852 <a href="http://getbootstrap.com/docs/4.1/content/reboot/"> 853 Reboot 854 </a></li><li> 855 <a href="http://getbootstrap.com/docs/4.1/content/typography/"> 856 Typography 857 </a></li><li> 858 <a href="http://getbootstrap.com/docs/4.1/content/code/"> 859 Code 860 </a></li><li> 861 <a href="http://getbootstrap.com/docs/4.1/content/images/"> 862 Images 863 </a></li><li> 864 <a href="http://getbootstrap.com/docs/4.1/content/tables/"> 865 Tables 866 </a></li><li> 867 <a href="http://getbootstrap.com/docs/4.1/content/figures/"> 868 Figures 869 </a></li></ul> 870 </div><div class="bd-toc-item"> 871 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/components/alerts/"> 872 Components 873 </a> 874 875 <ul class="nav bd-sidenav"><li> 876 <a href="http://getbootstrap.com/docs/4.1/components/alerts/"> 877 Alerts 878 </a></li><li> 879 <a href="http://getbootstrap.com/docs/4.1/components/badge/"> 880 Badge 881 </a></li><li> 882 <a href="http://getbootstrap.com/docs/4.1/components/breadcrumb/"> 883 Breadcrumb 884 </a></li><li> 885 <a href="http://getbootstrap.com/docs/4.1/components/buttons/"> 886 Buttons 887 </a></li><li> 888 <a href="http://getbootstrap.com/docs/4.1/components/button-group/"> 889 Button group 890 </a></li><li> 891 <a href="http://getbootstrap.com/docs/4.1/components/card/"> 892 Card 893 </a></li><li> 894 <a href="http://getbootstrap.com/docs/4.1/components/carousel/"> 895 Carousel 896 </a></li><li> 897 <a href="http://getbootstrap.com/docs/4.1/components/collapse/"> 898 Collapse 899 </a></li><li> 900 <a href="http://getbootstrap.com/docs/4.1/components/dropdowns/"> 901 Dropdowns 902 </a></li><li> 903 <a href="http://getbootstrap.com/docs/4.1/components/forms/"> 904 Forms 905 </a></li><li> 906 <a href="http://getbootstrap.com/docs/4.1/components/input-group/"> 907 Input group 908 </a></li><li> 909 <a href="http://getbootstrap.com/docs/4.1/components/jumbotron/"> 910 Jumbotron 911 </a></li><li> 912 <a href="http://getbootstrap.com/docs/4.1/components/list-group/"> 913 List group 914 </a></li><li> 915 <a href="http://getbootstrap.com/docs/4.1/components/modal/"> 916 Modal 917 </a></li><li> 918 <a href="http://getbootstrap.com/docs/4.1/components/navs/"> 919 Navs 920 </a></li><li> 921 <a href="http://getbootstrap.com/docs/4.1/components/navbar/"> 922 Navbar 923 </a></li><li> 924 <a href="http://getbootstrap.com/docs/4.1/components/pagination/"> 925 Pagination 926 </a></li><li> 927 <a href="http://getbootstrap.com/docs/4.1/components/popovers/"> 928 Popovers 929 </a></li><li> 930 <a href="http://getbootstrap.com/docs/4.1/components/progress/"> 931 Progress 932 </a></li><li> 933 <a href="http://getbootstrap.com/docs/4.1/components/scrollspy/"> 934 Scrollspy 935 </a></li><li> 936 <a href="http://getbootstrap.com/docs/4.1/components/tooltips/"> 937 Tooltips 938 </a></li></ul> 939 </div><div class="bd-toc-item"> 940 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/utilities/borders/"> 941 Utilities 942 </a> 943 944 <ul class="nav bd-sidenav"><li> 945 <a href="http://getbootstrap.com/docs/4.1/utilities/borders/"> 946 Borders 947 </a></li><li> 948 <a href="http://getbootstrap.com/docs/4.1/utilities/clearfix/"> 949 Clearfix 950 </a></li><li> 951 <a href="http://getbootstrap.com/docs/4.1/utilities/close-icon/"> 952 Close icon 953 </a></li><li> 954 <a href="http://getbootstrap.com/docs/4.1/utilities/colors/"> 955 Colors 956 </a></li><li> 957 <a href="http://getbootstrap.com/docs/4.1/utilities/display/"> 958 Display 959 </a></li><li> 960 <a href="http://getbootstrap.com/docs/4.1/utilities/embed/"> 961 Embed 962 </a></li><li> 963 <a href="http://getbootstrap.com/docs/4.1/utilities/flex/"> 964 Flex 965 </a></li><li> 966 <a href="http://getbootstrap.com/docs/4.1/utilities/float/"> 967 Float 968 </a></li><li> 969 <a href="http://getbootstrap.com/docs/4.1/utilities/image-replacement/"> 970 Image replacement 971 </a></li><li> 972 <a href="http://getbootstrap.com/docs/4.1/utilities/position/"> 973 Position 974 </a></li><li> 975 <a href="http://getbootstrap.com/docs/4.1/utilities/screenreaders/"> 976 Screenreaders 977 </a></li><li> 978 <a href="http://getbootstrap.com/docs/4.1/utilities/shadows/"> 979 Shadows 980 </a></li><li> 981 <a href="http://getbootstrap.com/docs/4.1/utilities/sizing/"> 982 Sizing 983 </a></li><li> 984 <a href="http://getbootstrap.com/docs/4.1/utilities/spacing/"> 985 Spacing 986 </a></li><li> 987 <a href="http://getbootstrap.com/docs/4.1/utilities/text/"> 988 Text 989 </a></li><li> 990 <a href="http://getbootstrap.com/docs/4.1/utilities/vertical-align/"> 991 Vertical align 992 </a></li><li> 993 <a href="http://getbootstrap.com/docs/4.1/utilities/visibility/"> 994 Visibility 995 </a></li></ul> 996 </div><div class="bd-toc-item"> 997 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/extend/approach/"> 998 Extend 999 </a> 1000 1001 <ul class="nav bd-sidenav"><li> 1002 <a href="http://getbootstrap.com/docs/4.1/extend/approach/"> 1003 Approach 1004 </a></li><li> 1005 <a href="http://getbootstrap.com/docs/4.1/extend/icons/"> 1006 Icons 1007 </a></li></ul> 1008 </div><div class="bd-toc-item"> 1009 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/migration/"> 1010 Migration 1011 </a> 1012 1013 <ul class="nav bd-sidenav"></ul> 1014 </div><div class="bd-toc-item"> 1015 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/about/overview/"> 1016 About 1017 </a> 1018 1019 <ul class="nav bd-sidenav"><li> 1020 <a href="http://getbootstrap.com/docs/4.1/about/overview/"> 1021 Overview 1022 </a></li><li> 1023 <a href="http://getbootstrap.com/docs/4.1/about/brand/"> 1024 Brand 1025 </a></li><li> 1026 <a href="http://getbootstrap.com/docs/4.1/about/license/"> 1027 License 1028 </a></li><li> 1029 <a href="http://getbootstrap.com/docs/4.1/about/translations/"> 1030 Translations 1031 </a></li></ul> 1032 </div></nav> 1033 1034 </div> 1035 1036 1037 <div class="d-none d-xl-block col-xl-2 bd-toc"> 1038 <ul class="section-nav"> 1039 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#how-it-works">How it works</a></li> 1040 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#grid-options">Grid options</a></li> 1041 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns">Auto-layout columns</a> 1042 <ul> 1043 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#equal-width">Equal-width</a></li> 1044 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#setting-one-column-width">Setting one column width</a></li> 1045 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content">Variable width content</a></li> 1046 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#equal-width-multi-row">Equal-width multi-row</a></li> 1047 </ul> 1048 </li> 1049 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#responsive-classes">Responsive classes</a> 1050 <ul> 1051 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#all-breakpoints">All breakpoints</a></li> 1052 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#stacked-to-horizontal">Stacked to horizontal</a></li> 1053 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#mix-and-match">Mix and match</a></li> 1054 </ul> 1055 </li> 1056 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#alignment">Alignment</a> 1057 <ul> 1058 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#vertical-alignment">Vertical alignment</a></li> 1059 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment">Horizontal alignment</a></li> 1060 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#no-gutters">No gutters</a></li> 1061 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#column-wrapping">Column wrapping</a></li> 1062 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#column-breaks">Column breaks</a></li> 1063 </ul> 1064 </li> 1065 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#reordering">Reordering</a> 1066 <ul> 1067 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#order-classes">Order classes</a></li> 1068 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#offsetting-columns">Offsetting columns</a> 1069 <ul> 1070 <li class="toc-entry toc-h4"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#offset-classes">Offset classes</a></li> 1071 <li class="toc-entry toc-h4"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#margin-utilities">Margin utilities</a></li> 1072 </ul> 1073 </li> 1074 </ul> 1075 </li> 1076 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#nesting">Nesting</a></li> 1077 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#sass-mixins">Sass mixins</a> 1078 <ul> 1079 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#variables">Variables</a></li> 1080 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#mixins">Mixins</a></li> 1081 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#example-usage">Example usage</a></li> 1082 </ul> 1083 </li> 1084 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#customizing-the-grid">Customizing the grid</a> 1085 <ul> 1086 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#columns-and-gutters">Columns and gutters</a></li> 1087 <li class="toc-entry toc-h3"><a href="http://getbootstrap.com/docs/4.1/layout/grid/#grid-tiers">Grid tiers</a></li> 1088 </ul> 1089 </li> 1090 </ul> 1091 </div> 1092 1093 1094 <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> 1095 <h1 class="bd-title" id="content">Grid system</h1> 1096 <p class="bd-lead">Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.</p> 1097 <script async="" src="./assets/carbon.js" id="_carbonads_js"></script> 1098 1099 <h2 id="how-it-works"><div>How it works<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#how-it-works" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 1100 1101 <p>Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a> and is fully responsive. Below is an example and an in-depth look at how the grid comes together.</p> 1102 1103 <p><strong>New to or unfamiliar with flexbox?</strong> <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background">Read this CSS Tricks flexbox guide</a> for background, terminology, guidelines, and code snippets.</p> 1104 1105 <div class="bd-example-row"> 1106 1107 <div class="bd-example"> 1108 <div class="container"> 1109 <div class="row"> 1110 <div class="col-sm"> 1111 One of three columns 1112 </div> 1113 <div class="col-sm"> 1114 One of three columns 1115 </div> 1116 <div class="col-sm"> 1117 One of three columns 1118 </div> 1119 </div> 1120 </div> 1121 </div> 1122 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 1123 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1124 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm"</span><span class="nt">></span> 1125 One of three columns 1126 <span class="nt"></div></span> 1127 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm"</span><span class="nt">></span> 1128 One of three columns 1129 <span class="nt"></div></span> 1130 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm"</span><span class="nt">></span> 1131 One of three columns 1132 <span class="nt"></div></span> 1133 <span class="nt"></div></span> 1134 <span class="nt"></div></span></code></pre></figure> 1135 1136 </div> 1137 1138 <p>The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent <code class="highlighter-rouge">.container</code>.</p> 1139 1140 <p>Breaking it down, here’s how it works:</p> 1141 1142 <ul> 1143 <li>Containers provide a means to center and horizontally pad your site’s contents. Use <code class="highlighter-rouge">.container</code> for a responsive pixel width or <code class="highlighter-rouge">.container-fluid</code> for <code class="highlighter-rouge">width: 100%</code> across all viewport and device sizes.</li> 1144 <li>Rows are wrappers for columns. Each column has horizontal <code class="highlighter-rouge">padding</code> (called a gutter) for controlling the space between them. This <code class="highlighter-rouge">padding</code> is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.</li> 1145 <li>In a grid layout, content must be placed within columns and only columns may be immediate children of rows.</li> 1146 <li>Thanks to flexbox, grid columns without a specified <code class="highlighter-rouge">width</code> will automatically layout as equal width columns. For example, four instances of <code class="highlighter-rouge">.col-sm</code> will each automatically be 25% wide from the small breakpoint and up. See the <a href="http://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns">auto-layout columns</a> section for more examples.</li> 1147 <li>Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use <code class="highlighter-rouge">.col-4</code>.</li> 1148 <li>Column <code class="highlighter-rouge">width</code>s are set in percentages, so they’re always fluid and sized relative to their parent element.</li> 1149 <li>Columns have horizontal <code class="highlighter-rouge">padding</code> to create the gutters between individual columns, however, you can remove the <code class="highlighter-rouge">margin</code> from rows and <code class="highlighter-rouge">padding</code> from columns with <code class="highlighter-rouge">.no-gutters</code> on the <code class="highlighter-rouge">.row</code>.</li> 1150 <li>To make the grid responsive, there are five grid breakpoints, one for each <a href="http://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints">responsive breakpoint</a>: all breakpoints (extra small), small, medium, large, and extra large.</li> 1151 <li>Grid breakpoints are based on minimum width media queries, meaning <strong>they apply to that one breakpoint and all those above it</strong> (e.g., <code class="highlighter-rouge">.col-sm-4</code> applies to small, medium, large, and extra large devices, but not the first <code class="highlighter-rouge">xs</code> breakpoint).</li> 1152 <li>You can use predefined grid classes (like <code class="highlighter-rouge">.col-4</code>) or <a href="http://getbootstrap.com/docs/4.1/layout/grid/#sass-mixins">Sass mixins</a> for more semantic markup.</li> 1153 </ul> 1154 1155 <p>Be aware of the limitations and <a href="https://github.com/philipwalton/flexbugs">bugs around flexbox</a>, like the <a href="https://github.com/philipwalton/flexbugs#flexbug-9">inability to use some HTML elements as flex containers</a>.</p> 1156 1157 <h2 id="grid-options"><div>Grid options<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#grid-options" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 1158 1159 <p>While Bootstrap uses <code class="highlighter-rouge">em</code>s or <code class="highlighter-rouge">rem</code>s for defining most sizes, <code class="highlighter-rouge">px</code>s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the <a href="https://drafts.csswg.org/mediaqueries-3/#units">font size</a>.</p> 1160 1161 <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p> 1162 1163 <table class="table table-bordered table-striped"> 1164 <thead> 1165 <tr> 1166 <th></th> 1167 <th class="text-center"> 1168 Extra small<br> 1169 <small><576px</small> 1170 </th> 1171 <th class="text-center"> 1172 Small<br> 1173 <small>≥576px</small> 1174 </th> 1175 <th class="text-center"> 1176 Medium<br> 1177 <small>≥768px</small> 1178 </th> 1179 <th class="text-center"> 1180 Large<br> 1181 <small>≥992px</small> 1182 </th> 1183 <th class="text-center"> 1184 Extra large<br> 1185 <small>≥1200px</small> 1186 </th> 1187 </tr> 1188 </thead> 1189 <tbody> 1190 <tr> 1191 <th class="text-nowrap" scope="row">Max container width</th> 1192 <td>None (auto)</td> 1193 <td>540px</td> 1194 <td>720px</td> 1195 <td>960px</td> 1196 <td>1140px</td> 1197 </tr> 1198 <tr> 1199 <th class="text-nowrap" scope="row">Class prefix</th> 1200 <td><code>.col-</code></td> 1201 <td><code>.col-sm-</code></td> 1202 <td><code>.col-md-</code></td> 1203 <td><code>.col-lg-</code></td> 1204 <td><code>.col-xl-</code></td> 1205 </tr> 1206 <tr> 1207 <th class="text-nowrap" scope="row"># of columns</th> 1208 <td colspan="5">12</td> 1209 </tr> 1210 <tr> 1211 <th class="text-nowrap" scope="row">Gutter width</th> 1212 <td colspan="5">30px (15px on each side of a column)</td> 1213 </tr> 1214 <tr> 1215 <th class="text-nowrap" scope="row">Nestable</th> 1216 <td colspan="5">Yes</td> 1217 </tr> 1218 <tr> 1219 <th class="text-nowrap" scope="row">Column ordering</th> 1220 <td colspan="5">Yes</td> 1221 </tr> 1222 </tbody> 1223 </table> 1224 1225 <h2 id="auto-layout-columns"><div>Auto-layout columns<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 1226 1227 <p>Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like <code class="highlighter-rouge">.col-sm-6</code>.</p> 1228 1229 <h3 id="equal-width"><div>Equal-width<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#equal-width" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1230 1231 <p>For example, here are two grid layouts that apply to every device and viewport, from <code class="highlighter-rouge">xs</code> to <code class="highlighter-rouge">xl</code>. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p> 1232 1233 <div class="bd-example-row"> 1234 1235 <div class="bd-example"> 1236 <div class="container"> 1237 <div class="row"> 1238 <div class="col"> 1239 1 of 2 1240 </div> 1241 <div class="col"> 1242 2 of 2 1243 </div> 1244 </div> 1245 <div class="row"> 1246 <div class="col"> 1247 1 of 3 1248 </div> 1249 <div class="col"> 1250 2 of 3 1251 </div> 1252 <div class="col"> 1253 3 of 3 1254 </div> 1255 </div> 1256 </div> 1257 </div> 1258 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 1259 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1260 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1261 1 of 2 1262 <span class="nt"></div></span> 1263 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1264 2 of 2 1265 <span class="nt"></div></span> 1266 <span class="nt"></div></span> 1267 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1268 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1269 1 of 3 1270 <span class="nt"></div></span> 1271 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1272 2 of 3 1273 <span class="nt"></div></span> 1274 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1275 3 of 3 1276 <span class="nt"></div></span> 1277 <span class="nt"></div></span> 1278 <span class="nt"></div></span></code></pre></figure> 1279 1280 </div> 1281 1282 <p>Equal-width columns can be broken into multiple lines, but there was a <a href="https://github.com/philipwalton/flexbugs#flexbug-11">Safari flexbox bug</a> that prevented this from working without an explicit <code class="highlighter-rouge">flex-basis</code> or <code class="highlighter-rouge">border</code>. There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.</p> 1283 1284 <div class="bd-example-row"> 1285 1286 <div class="bd-example"> 1287 <div class="container"> 1288 <div class="row"> 1289 <div class="col">Column</div> 1290 <div class="col">Column</div> 1291 <div class="w-100"></div> 1292 <div class="col">Column</div> 1293 <div class="col">Column</div> 1294 </div> 1295 </div> 1296 </div> 1297 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 1298 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1299 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>Column<span class="nt"></div></span> 1300 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>Column<span class="nt"></div></span> 1301 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"w-100"</span><span class="nt">></div></span> 1302 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>Column<span class="nt"></div></span> 1303 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>Column<span class="nt"></div></span> 1304 <span class="nt"></div></span> 1305 <span class="nt"></div></span></code></pre></figure> 1306 1307 </div> 1308 1309 <h3 id="setting-one-column-width"><div>Setting one column width<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#setting-one-column-width" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1310 1311 <p>Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.</p> 1312 1313 <div class="bd-example-row"> 1314 1315 <div class="bd-example"> 1316 <div class="container"> 1317 <div class="row"> 1318 <div class="col"> 1319 1 of 3 1320 </div> 1321 <div class="col-6"> 1322 2 of 3 (wider) 1323 </div> 1324 <div class="col"> 1325 3 of 3 1326 </div> 1327 </div> 1328 <div class="row"> 1329 <div class="col"> 1330 1 of 3 1331 </div> 1332 <div class="col-5"> 1333 2 of 3 (wider) 1334 </div> 1335 <div class="col"> 1336 3 of 3 1337 </div> 1338 </div> 1339 </div> 1340 </div> 1341 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 1342 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1343 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1344 1 of 3 1345 <span class="nt"></div></span> 1346 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">></span> 1347 2 of 3 (wider) 1348 <span class="nt"></div></span> 1349 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1350 3 of 3 1351 <span class="nt"></div></span> 1352 <span class="nt"></div></span> 1353 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1354 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1355 1 of 3 1356 <span class="nt"></div></span> 1357 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-5"</span><span class="nt">></span> 1358 2 of 3 (wider) 1359 <span class="nt"></div></span> 1360 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1361 3 of 3 1362 <span class="nt"></div></span> 1363 <span class="nt"></div></span> 1364 <span class="nt"></div></span></code></pre></figure> 1365 1366 </div> 1367 1368 <h3 id="variable-width-content"><div>Variable width content<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1369 1370 <p>Use <code class="highlighter-rouge">col-{breakpoint}-auto</code> classes to size columns based on the natural width of their content.</p> 1371 1372 <div class="bd-example-row"> 1373 1374 <div class="bd-example"> 1375 <div class="container"> 1376 <div class="row justify-content-md-center"> 1377 <div class="col col-lg-2"> 1378 1 of 3 1379 </div> 1380 <div class="col-md-auto"> 1381 Variable width content 1382 </div> 1383 <div class="col col-lg-2"> 1384 3 of 3 1385 </div> 1386 </div> 1387 <div class="row"> 1388 <div class="col"> 1389 1 of 3 1390 </div> 1391 <div class="col-md-auto"> 1392 Variable width content 1393 </div> 1394 <div class="col col-lg-2"> 1395 3 of 3 1396 </div> 1397 </div> 1398 </div> 1399 </div> 1400 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 1401 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-content-md-center"</span><span class="nt">></span> 1402 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col col-lg-2"</span><span class="nt">></span> 1403 1 of 3 1404 <span class="nt"></div></span> 1405 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-auto"</span><span class="nt">></span> 1406 Variable width content 1407 <span class="nt"></div></span> 1408 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col col-lg-2"</span><span class="nt">></span> 1409 3 of 3 1410 <span class="nt"></div></span> 1411 <span class="nt"></div></span> 1412 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1413 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1414 1 of 3 1415 <span class="nt"></div></span> 1416 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-auto"</span><span class="nt">></span> 1417 Variable width content 1418 <span class="nt"></div></span> 1419 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col col-lg-2"</span><span class="nt">></span> 1420 3 of 3 1421 <span class="nt"></div></span> 1422 <span class="nt"></div></span> 1423 <span class="nt"></div></span></code></pre></figure> 1424 1425 </div> 1426 1427 <h3 id="equal-width-multi-row"><div>Equal-width multi-row<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#equal-width-multi-row" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1428 1429 <p>Create equal-width columns that span multiple rows by inserting a <code class="highlighter-rouge">.w-100</code> where you want the columns to break to a new line. Make the breaks responsive by mixing the <code class="highlighter-rouge">.w-100</code> with some <a href="http://getbootstrap.com/docs/4.1/utilities/display/">responsive display utilities</a>.</p> 1430 1431 <div class="bd-example-row"> 1432 1433 <div class="bd-example"> 1434 <div class="row"> 1435 <div class="col">col</div> 1436 <div class="col">col</div> 1437 <div class="w-100"></div> 1438 <div class="col">col</div> 1439 <div class="col">col</div> 1440 </div> 1441 </div> 1442 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1443 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> 1444 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> 1445 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"w-100"</span><span class="nt">></div></span> 1446 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> 1447 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> 1448 <span class="nt"></div></span></code></pre></figure> 1449 1450 </div> 1451 1452 <h2 id="responsive-classes"><div>Responsive classes<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#responsive-classes" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 1453 1454 <p>Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.</p> 1455 1456 <h3 id="all-breakpoints"><div>All breakpoints<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#all-breakpoints" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1457 1458 <p>For grids that are the same from the smallest of devices to the largest, use the <code class="highlighter-rouge">.col</code> and <code class="highlighter-rouge">.col-*</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code class="highlighter-rouge">.col</code>.</p> 1459 1460 <div class="bd-example-row"> 1461 1462 <div class="bd-example"> 1463 <div class="row"> 1464 <div class="col">col</div> 1465 <div class="col">col</div> 1466 <div class="col">col</div> 1467 <div class="col">col</div> 1468 </div> 1469 <div class="row"> 1470 <div class="col-8">col-8</div> 1471 <div class="col-4">col-4</div> 1472 </div> 1473 </div> 1474 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1475 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> 1476 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> 1477 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> 1478 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> 1479 <span class="nt"></div></span> 1480 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1481 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-8"</span><span class="nt">></span>col-8<span class="nt"></div></span> 1482 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span>col-4<span class="nt"></div></span> 1483 <span class="nt"></div></span></code></pre></figure> 1484 1485 </div> 1486 1487 <h3 id="stacked-to-horizontal"><div>Stacked to horizontal<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#stacked-to-horizontal" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1488 1489 <p>Using a single set of <code class="highlighter-rouge">.col-sm-*</code> classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<code class="highlighter-rouge">sm</code>).</p> 1490 1491 <div class="bd-example-row"> 1492 1493 <div class="bd-example"> 1494 <div class="row"> 1495 <div class="col-sm-8">col-sm-8</div> 1496 <div class="col-sm-4">col-sm-4</div> 1497 </div> 1498 <div class="row"> 1499 <div class="col-sm">col-sm</div> 1500 <div class="col-sm">col-sm</div> 1501 <div class="col-sm">col-sm</div> 1502 </div> 1503 </div> 1504 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1505 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-8"</span><span class="nt">></span>col-sm-8<span class="nt"></div></span> 1506 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-4"</span><span class="nt">></span>col-sm-4<span class="nt"></div></span> 1507 <span class="nt"></div></span> 1508 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1509 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm"</span><span class="nt">></span>col-sm<span class="nt"></div></span> 1510 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm"</span><span class="nt">></span>col-sm<span class="nt"></div></span> 1511 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm"</span><span class="nt">></span>col-sm<span class="nt"></div></span> 1512 <span class="nt"></div></span></code></pre></figure> 1513 1514 </div> 1515 1516 <h3 id="mix-and-match"><div>Mix and match<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#mix-and-match" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1517 1518 <p>Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.</p> 1519 1520 <div class="bd-example-row"> 1521 1522 <div class="bd-example"> 1523 <!-- Stack the columns on mobile by making one full-width and the other half-width --> 1524 <div class="row"> 1525 <div class="col-12 col-md-8">.col-12 .col-md-8</div> 1526 <div class="col-6 col-md-4">.col-6 .col-md-4</div> 1527 </div> 1528 1529 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> 1530 <div class="row"> 1531 <div class="col-6 col-md-4">.col-6 .col-md-4</div> 1532 <div class="col-6 col-md-4">.col-6 .col-md-4</div> 1533 <div class="col-6 col-md-4">.col-6 .col-md-4</div> 1534 </div> 1535 1536 <!-- Columns are always 50% wide, on mobile and desktop --> 1537 <div class="row"> 1538 <div class="col-6">.col-6</div> 1539 <div class="col-6">.col-6</div> 1540 </div> 1541 </div> 1542 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Stack the columns on mobile by making one full-width and the other half-width --></span> 1543 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1544 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-12 col-md-8"</span><span class="nt">></span>.col-12 .col-md-8<span class="nt"></div></span> 1545 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-md-4"</span><span class="nt">></span>.col-6 .col-md-4<span class="nt"></div></span> 1546 <span class="nt"></div></span> 1547 1548 <span class="c"><!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --></span> 1549 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1550 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-md-4"</span><span class="nt">></span>.col-6 .col-md-4<span class="nt"></div></span> 1551 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-md-4"</span><span class="nt">></span>.col-6 .col-md-4<span class="nt"></div></span> 1552 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-md-4"</span><span class="nt">></span>.col-6 .col-md-4<span class="nt"></div></span> 1553 <span class="nt"></div></span> 1554 1555 <span class="c"><!-- Columns are always 50% wide, on mobile and desktop --></span> 1556 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1557 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">></span>.col-6<span class="nt"></div></span> 1558 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">></span>.col-6<span class="nt"></div></span> 1559 <span class="nt"></div></span></code></pre></figure> 1560 1561 </div> 1562 1563 <h2 id="alignment"><div>Alignment<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#alignment" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 1564 1565 <p>Use flexbox alignment utilities to vertically and horizontally align columns.</p> 1566 1567 <h3 id="vertical-alignment"><div>Vertical alignment<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#vertical-alignment" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1568 1569 <div class="bd-example-row bd-example-row-flex-cols"> 1570 1571 <div class="bd-example"> 1572 <div class="container"> 1573 <div class="row align-items-start"> 1574 <div class="col"> 1575 One of three columns 1576 </div> 1577 <div class="col"> 1578 One of three columns 1579 </div> 1580 <div class="col"> 1581 One of three columns 1582 </div> 1583 </div> 1584 <div class="row align-items-center"> 1585 <div class="col"> 1586 One of three columns 1587 </div> 1588 <div class="col"> 1589 One of three columns 1590 </div> 1591 <div class="col"> 1592 One of three columns 1593 </div> 1594 </div> 1595 <div class="row align-items-end"> 1596 <div class="col"> 1597 One of three columns 1598 </div> 1599 <div class="col"> 1600 One of three columns 1601 </div> 1602 <div class="col"> 1603 One of three columns 1604 </div> 1605 </div> 1606 </div> 1607 </div> 1608 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 1609 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row align-items-start"</span><span class="nt">></span> 1610 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1611 One of three columns 1612 <span class="nt"></div></span> 1613 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1614 One of three columns 1615 <span class="nt"></div></span> 1616 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1617 One of three columns 1618 <span class="nt"></div></span> 1619 <span class="nt"></div></span> 1620 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row align-items-center"</span><span class="nt">></span> 1621 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1622 One of three columns 1623 <span class="nt"></div></span> 1624 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1625 One of three columns 1626 <span class="nt"></div></span> 1627 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1628 One of three columns 1629 <span class="nt"></div></span> 1630 <span class="nt"></div></span> 1631 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row align-items-end"</span><span class="nt">></span> 1632 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1633 One of three columns 1634 <span class="nt"></div></span> 1635 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1636 One of three columns 1637 <span class="nt"></div></span> 1638 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1639 One of three columns 1640 <span class="nt"></div></span> 1641 <span class="nt"></div></span> 1642 <span class="nt"></div></span></code></pre></figure> 1643 1644 </div> 1645 1646 <div class="bd-example-row bd-example-row-flex-cols"> 1647 1648 <div class="bd-example"> 1649 <div class="container"> 1650 <div class="row"> 1651 <div class="col align-self-start"> 1652 One of three columns 1653 </div> 1654 <div class="col align-self-center"> 1655 One of three columns 1656 </div> 1657 <div class="col align-self-end"> 1658 One of three columns 1659 </div> 1660 </div> 1661 </div> 1662 </div> 1663 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 1664 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1665 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col align-self-start"</span><span class="nt">></span> 1666 One of three columns 1667 <span class="nt"></div></span> 1668 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col align-self-center"</span><span class="nt">></span> 1669 One of three columns 1670 <span class="nt"></div></span> 1671 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col align-self-end"</span><span class="nt">></span> 1672 One of three columns 1673 <span class="nt"></div></span> 1674 <span class="nt"></div></span> 1675 <span class="nt"></div></span></code></pre></figure> 1676 1677 </div> 1678 1679 <h3 id="horizontal-alignment"><div>Horizontal alignment<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1680 1681 <div class="bd-example-row"> 1682 1683 <div class="bd-example"> 1684 <div class="container"> 1685 <div class="row justify-content-start"> 1686 <div class="col-4"> 1687 One of two columns 1688 </div> 1689 <div class="col-4"> 1690 One of two columns 1691 </div> 1692 </div> 1693 <div class="row justify-content-center"> 1694 <div class="col-4"> 1695 One of two columns 1696 </div> 1697 <div class="col-4"> 1698 One of two columns 1699 </div> 1700 </div> 1701 <div class="row justify-content-end"> 1702 <div class="col-4"> 1703 One of two columns 1704 </div> 1705 <div class="col-4"> 1706 One of two columns 1707 </div> 1708 </div> 1709 <div class="row justify-content-around"> 1710 <div class="col-4"> 1711 One of two columns 1712 </div> 1713 <div class="col-4"> 1714 One of two columns 1715 </div> 1716 </div> 1717 <div class="row justify-content-between"> 1718 <div class="col-4"> 1719 One of two columns 1720 </div> 1721 <div class="col-4"> 1722 One of two columns 1723 </div> 1724 </div> 1725 </div> 1726 </div> 1727 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 1728 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-content-start"</span><span class="nt">></span> 1729 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span> 1730 One of two columns 1731 <span class="nt"></div></span> 1732 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span> 1733 One of two columns 1734 <span class="nt"></div></span> 1735 <span class="nt"></div></span> 1736 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-content-center"</span><span class="nt">></span> 1737 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span> 1738 One of two columns 1739 <span class="nt"></div></span> 1740 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span> 1741 One of two columns 1742 <span class="nt"></div></span> 1743 <span class="nt"></div></span> 1744 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-content-end"</span><span class="nt">></span> 1745 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span> 1746 One of two columns 1747 <span class="nt"></div></span> 1748 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span> 1749 One of two columns 1750 <span class="nt"></div></span> 1751 <span class="nt"></div></span> 1752 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-content-around"</span><span class="nt">></span> 1753 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span> 1754 One of two columns 1755 <span class="nt"></div></span> 1756 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span> 1757 One of two columns 1758 <span class="nt"></div></span> 1759 <span class="nt"></div></span> 1760 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-content-between"</span><span class="nt">></span> 1761 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span> 1762 One of two columns 1763 <span class="nt"></div></span> 1764 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span> 1765 One of two columns 1766 <span class="nt"></div></span> 1767 <span class="nt"></div></span> 1768 <span class="nt"></div></span></code></pre></figure> 1769 1770 </div> 1771 1772 <h3 id="no-gutters"><div>No gutters<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#no-gutters" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1773 1774 <p>The gutters between columns in our predefined grid classes can be removed with <code class="highlighter-rouge">.no-gutters</code>. This removes the negative <code class="highlighter-rouge">margin</code>s from <code class="highlighter-rouge">.row</code> and the horizontal <code class="highlighter-rouge">padding</code> from all immediate children columns.</p> 1775 1776 <p>Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a>. While this generates a more specific selector, column padding can still be further customized with <a href="http://getbootstrap.com/docs/4.1/utilities/spacing/">spacing utilities</a>.</p> 1777 1778 <p><strong>Need an edge-to-edge design?</strong> Drop the parent <code class="highlighter-rouge">.container</code> or <code class="highlighter-rouge">.container-fluid</code>.</p> 1779 1780 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="nc">.no-gutters</span> <span class="err">{</span> 1781 <span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span> 1782 <span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span> 1783 1784 <span class="o">></span> <span class="nc">.col</span><span class="o">,</span> 1785 <span class="o">></span> <span class="o">[</span><span class="nt">class</span><span class="o">*=</span><span class="s2">"col-"</span><span class="o">]</span> <span class="err">{</span> 1786 <span class="nl">padding-right</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span> 1787 <span class="nl">padding-left</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span> 1788 <span class="err">}</span> 1789 <span class="err">}</span></code></pre></figure> 1790 1791 <p>In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).</p> 1792 1793 <div class="bd-example-row"> 1794 1795 <div class="bd-example"> 1796 <div class="row no-gutters"> 1797 <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> 1798 <div class="col-6 col-md-4">.col-6 .col-md-4</div> 1799 </div> 1800 </div> 1801 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row no-gutters"</span><span class="nt">></span> 1802 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-12 col-sm-6 col-md-8"</span><span class="nt">></span>.col-12 .col-sm-6 .col-md-8<span class="nt"></div></span> 1803 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-md-4"</span><span class="nt">></span>.col-6 .col-md-4<span class="nt"></div></span> 1804 <span class="nt"></div></span></code></pre></figure> 1805 1806 </div> 1807 1808 <h3 id="column-wrapping"><div>Column wrapping<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#column-wrapping" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1809 1810 <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p> 1811 1812 <div class="bd-example-row"> 1813 1814 <div class="bd-example"> 1815 <div class="row"> 1816 <div class="col-9">.col-9</div> 1817 <div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> 1818 <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div> 1819 </div> 1820 </div> 1821 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1822 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-9"</span><span class="nt">></span>.col-9<span class="nt"></div></span> 1823 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span>.col-4<span class="nt"><br></span>Since 9 + 4 = 13 <span class="ni">&gt;</span> 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.<span class="nt"></div></span> 1824 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">></span>.col-6<span class="nt"><br></span>Subsequent columns continue along the new line.<span class="nt"></div></span> 1825 <span class="nt"></div></span></code></pre></figure> 1826 1827 </div> 1828 1829 <h3 id="column-breaks"><div>Column breaks<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#column-breaks" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1830 1831 <p>Breaking columns to a new line in flexbox requires a small hack: add an element with <code class="highlighter-rouge">width: 100%</code> wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple <code class="highlighter-rouge">.row</code>s, but not every implementation method can account for this.</p> 1832 1833 <div class="bd-example-row"> 1834 1835 <div class="bd-example"> 1836 <div class="row"> 1837 <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> 1838 <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> 1839 1840 <!-- Force next columns to break to new line --> 1841 <div class="w-100"></div> 1842 1843 <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> 1844 <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> 1845 </div> 1846 </div> 1847 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1848 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-3"</span><span class="nt">></span>.col-6 .col-sm-3<span class="nt"></div></span> 1849 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-3"</span><span class="nt">></span>.col-6 .col-sm-3<span class="nt"></div></span> 1850 1851 <span class="c"><!-- Force next columns to break to new line --></span> 1852 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"w-100"</span><span class="nt">></div></span> 1853 1854 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-3"</span><span class="nt">></span>.col-6 .col-sm-3<span class="nt"></div></span> 1855 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-3"</span><span class="nt">></span>.col-6 .col-sm-3<span class="nt"></div></span> 1856 <span class="nt"></div></span></code></pre></figure> 1857 1858 </div> 1859 1860 <p>You may also apply this break at specific breakpoints with our <a href="http://getbootstrap.com/docs/4.1/utilities/display/">responsive display utilities</a>.</p> 1861 1862 <div class="bd-example-row"> 1863 1864 <div class="bd-example"> 1865 <div class="row"> 1866 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> 1867 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> 1868 1869 <!-- Force next columns to break to new line at md breakpoint and up --> 1870 <div class="w-100 d-none d-md-block"></div> 1871 1872 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> 1873 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> 1874 </div> 1875 </div> 1876 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1877 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">></span>.col-6 .col-sm-4<span class="nt"></div></span> 1878 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">></span>.col-6 .col-sm-4<span class="nt"></div></span> 1879 1880 <span class="c"><!-- Force next columns to break to new line at md breakpoint and up --></span> 1881 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"w-100 d-none d-md-block"</span><span class="nt">></div></span> 1882 1883 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">></span>.col-6 .col-sm-4<span class="nt"></div></span> 1884 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">></span>.col-6 .col-sm-4<span class="nt"></div></span> 1885 <span class="nt"></div></span></code></pre></figure> 1886 1887 </div> 1888 1889 <h2 id="reordering"><div>Reordering<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#reordering" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 1890 1891 <h3 id="order-classes"><div>Order classes<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#order-classes" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1892 1893 <p>Use <code class="highlighter-rouge">.order-</code> classes for controlling the <strong>visual order</strong> of your content. These classes are responsive, so you can set the <code class="highlighter-rouge">order</code> by breakpoint (e.g., <code class="highlighter-rouge">.order-1.order-md-2</code>). Includes support for <code class="highlighter-rouge">1</code> through <code class="highlighter-rouge">12</code> across all five grid tiers.</p> 1894 1895 <div class="bd-example-row"> 1896 1897 <div class="bd-example"> 1898 <div class="container"> 1899 <div class="row"> 1900 <div class="col"> 1901 First, but unordered 1902 </div> 1903 <div class="col order-12"> 1904 Second, but last 1905 </div> 1906 <div class="col order-1"> 1907 Third, but first 1908 </div> 1909 </div> 1910 </div> 1911 </div> 1912 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 1913 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1914 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1915 First, but unordered 1916 <span class="nt"></div></span> 1917 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col order-12"</span><span class="nt">></span> 1918 Second, but last 1919 <span class="nt"></div></span> 1920 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col order-1"</span><span class="nt">></span> 1921 Third, but first 1922 <span class="nt"></div></span> 1923 <span class="nt"></div></span> 1924 <span class="nt"></div></span></code></pre></figure> 1925 1926 </div> 1927 1928 <p>There are also responsive <code class="highlighter-rouge">.order-first</code> and <code class="highlighter-rouge">.order-last</code> classes that change the <code class="highlighter-rouge">order</code> of an element by applying <code class="highlighter-rouge">order: -1</code> and <code class="highlighter-rouge">order: 13</code> (<code class="highlighter-rouge">order: $columns + 1</code>), respectively. These classes can also be intermixed with the numbered <code class="highlighter-rouge">.order-*</code> classes as needed.</p> 1929 1930 <div class="bd-example-row"> 1931 1932 <div class="bd-example"> 1933 <div class="container"> 1934 <div class="row"> 1935 <div class="col order-last"> 1936 First, but last 1937 </div> 1938 <div class="col"> 1939 Second, but unordered 1940 </div> 1941 <div class="col order-first"> 1942 Third, but first 1943 </div> 1944 </div> 1945 </div> 1946 </div> 1947 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> 1948 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1949 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col order-last"</span><span class="nt">></span> 1950 First, but last 1951 <span class="nt"></div></span> 1952 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1953 Second, but unordered 1954 <span class="nt"></div></span> 1955 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col order-first"</span><span class="nt">></span> 1956 Third, but first 1957 <span class="nt"></div></span> 1958 <span class="nt"></div></span> 1959 <span class="nt"></div></span></code></pre></figure> 1960 1961 </div> 1962 1963 <h3 id="offsetting-columns"><div>Offsetting columns<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#offsetting-columns" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 1964 1965 <p>You can offset grid columns in two ways: our responsive <code class="highlighter-rouge">.offset-</code> grid classes and our <a href="http://getbootstrap.com/docs/4.1/utilities/spacing/">margin utilities</a>. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.</p> 1966 1967 <h4 id="offset-classes"><div>Offset classes<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#offset-classes" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h4> 1968 1969 <p>Move columns to the right using <code class="highlighter-rouge">.offset-md-*</code> classes. These classes increase the left margin of a column by <code class="highlighter-rouge">*</code> columns. For example, <code class="highlighter-rouge">.offset-md-4</code> moves <code class="highlighter-rouge">.col-md-4</code> over four columns.</p> 1970 1971 <div class="bd-example-row"> 1972 1973 <div class="bd-example"> 1974 <div class="row"> 1975 <div class="col-md-4">.col-md-4</div> 1976 <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> 1977 </div> 1978 <div class="row"> 1979 <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> 1980 <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> 1981 </div> 1982 <div class="row"> 1983 <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div> 1984 </div> 1985 </div> 1986 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1987 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>.col-md-4<span class="nt"></div></span> 1988 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 offset-md-4"</span><span class="nt">></span>.col-md-4 .offset-md-4<span class="nt"></div></span> 1989 <span class="nt"></div></span> 1990 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1991 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 offset-md-3"</span><span class="nt">></span>.col-md-3 .offset-md-3<span class="nt"></div></span> 1992 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 offset-md-3"</span><span class="nt">></span>.col-md-3 .offset-md-3<span class="nt"></div></span> 1993 <span class="nt"></div></span> 1994 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 1995 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 offset-md-3"</span><span class="nt">></span>.col-md-6 .offset-md-3<span class="nt"></div></span> 1996 <span class="nt"></div></span></code></pre></figure> 1997 1998 </div> 1999 2000 <p>In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in <a href="http://getbootstrap.com/docs/4.1/examples/grid/">the grid example</a>.</p> 2001 2002 <div class="bd-example-row"> 2003 2004 <div class="bd-example"> 2005 <div class="row"> 2006 <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> 2007 <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div> 2008 </div> 2009 2010 <div class="row"> 2011 <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> 2012 <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div> 2013 </div> 2014 </div> 2015 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 2016 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-5 col-md-6"</span><span class="nt">></span>.col-sm-5 .col-md-6<span class="nt"></div></span> 2017 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-5 offset-sm-2 col-md-6 offset-md-0"</span><span class="nt">></span>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0<span class="nt"></div></span> 2018 <span class="nt"></div></span> 2019 2020 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 2021 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-6 col-md-5 col-lg-6"</span><span class="nt">></span>.col-sm-6 .col-md-5 .col-lg-6<span class="nt"></div></span> 2022 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0"</span><span class="nt">></span>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0<span class="nt"></div></span> 2023 <span class="nt"></div></span></code></pre></figure> 2024 2025 </div> 2026 2027 <h4 id="margin-utilities"><div>Margin utilities<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#margin-utilities" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h4> 2028 2029 <p>With the move to flexbox in v4, you can use margin utilities like <code class="highlighter-rouge">.mr-auto</code> to force sibling columns away from one another.</p> 2030 2031 <div class="bd-example-row"> 2032 2033 <div class="bd-example"> 2034 <div class="row"> 2035 <div class="col-md-4">.col-md-4</div> 2036 <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> 2037 </div> 2038 <div class="row"> 2039 <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> 2040 <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> 2041 </div> 2042 <div class="row"> 2043 <div class="col-auto mr-auto">.col-auto .mr-auto</div> 2044 <div class="col-auto">.col-auto</div> 2045 </div> 2046 </div> 2047 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 2048 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>.col-md-4<span class="nt"></div></span> 2049 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 ml-auto"</span><span class="nt">></span>.col-md-4 .ml-auto<span class="nt"></div></span> 2050 <span class="nt"></div></span> 2051 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 2052 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 ml-md-auto"</span><span class="nt">></span>.col-md-3 .ml-md-auto<span class="nt"></div></span> 2053 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 ml-md-auto"</span><span class="nt">></span>.col-md-3 .ml-md-auto<span class="nt"></div></span> 2054 <span class="nt"></div></span> 2055 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 2056 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto mr-auto"</span><span class="nt">></span>.col-auto .mr-auto<span class="nt"></div></span> 2057 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">></span>.col-auto<span class="nt"></div></span> 2058 <span class="nt"></div></span></code></pre></figure> 2059 2060 </div> 2061 2062 <h2 id="nesting"><div>Nesting<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#nesting" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 2063 2064 <p>To nest your content with the default grid, add a new <code class="highlighter-rouge">.row</code> and set of <code class="highlighter-rouge">.col-sm-*</code> columns within an existing <code class="highlighter-rouge">.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p> 2065 2066 <div class="bd-example-row"> 2067 2068 <div class="bd-example"> 2069 <div class="row"> 2070 <div class="col-sm-9"> 2071 Level 1: .col-sm-9 2072 <div class="row"> 2073 <div class="col-8 col-sm-6"> 2074 Level 2: .col-8 .col-sm-6 2075 </div> 2076 <div class="col-4 col-sm-6"> 2077 Level 2: .col-4 .col-sm-6 2078 </div> 2079 </div> 2080 </div> 2081 </div> 2082 </div> 2083 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 2084 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span> 2085 Level 1: .col-sm-9 2086 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> 2087 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-8 col-sm-6"</span><span class="nt">></span> 2088 Level 2: .col-8 .col-sm-6 2089 <span class="nt"></div></span> 2090 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4 col-sm-6"</span><span class="nt">></span> 2091 Level 2: .col-4 .col-sm-6 2092 <span class="nt"></div></span> 2093 <span class="nt"></div></span> 2094 <span class="nt"></div></span> 2095 <span class="nt"></div></span></code></pre></figure> 2096 2097 </div> 2098 2099 <h2 id="sass-mixins"><div>Sass mixins<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#sass-mixins" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 2100 2101 <p>When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.</p> 2102 2103 <h3 id="variables"><div>Variables<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#variables" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 2104 2105 <p>Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p> 2106 2107 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$grid-columns</span><span class="p">:</span> <span class="m">12</span><span class="p">;</span> 2108 <span class="nv">$grid-gutter-width</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span> 2109 2110 <span class="nv">$grid-breakpoints</span><span class="p">:</span> <span class="p">(</span> 2111 <span class="o">//</span> <span class="n">Extra</span> <span class="n">small</span> <span class="n">screen</span> <span class="o">/</span> <span class="n">phone</span> 2112 <span class="n">xs</span><span class="o">:</span> <span class="m">0</span><span class="o">,</span> 2113 <span class="o">//</span> <span class="n">Small</span> <span class="n">screen</span> <span class="o">/</span> <span class="n">phone</span> 2114 <span class="n">sm</span><span class="o">:</span> <span class="m">576px</span><span class="o">,</span> 2115 <span class="o">//</span> <span class="n">Medium</span> <span class="n">screen</span> <span class="o">/</span> <span class="n">tablet</span> 2116 <span class="n">md</span><span class="o">:</span> <span class="m">768px</span><span class="o">,</span> 2117 <span class="o">//</span> <span class="n">Large</span> <span class="n">screen</span> <span class="o">/</span> <span class="n">desktop</span> 2118 <span class="n">lg</span><span class="o">:</span> <span class="m">992px</span><span class="o">,</span> 2119 <span class="o">//</span> <span class="n">Extra</span> <span class="nb">large</span> <span class="n">screen</span> <span class="o">/</span> <span class="n">wide</span> <span class="n">desktop</span> 2120 <span class="n">xl</span><span class="o">:</span> <span class="m">1200px</span> 2121 <span class="p">);</span> 2122 2123 <span class="nv">$container-max-widths</span><span class="p">:</span> <span class="p">(</span> 2124 <span class="n">sm</span><span class="o">:</span> <span class="m">540px</span><span class="o">,</span> 2125 <span class="n">md</span><span class="o">:</span> <span class="m">720px</span><span class="o">,</span> 2126 <span class="n">lg</span><span class="o">:</span> <span class="m">960px</span><span class="o">,</span> 2127 <span class="n">xl</span><span class="o">:</span> <span class="m">1140px</span> 2128 <span class="p">);</span></code></pre></figure> 2129 2130 <h3 id="mixins"><div>Mixins<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#mixins" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 2131 2132 <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p> 2133 2134 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Creates a wrapper for a series of columns</span> 2135 <span class="k">@include</span> <span class="nd">make-row</span><span class="p">();</span> 2136 2137 <span class="c1">// Make the element grid-ready (applying everything but the width)</span> 2138 <span class="k">@include</span> <span class="nd">make-col-ready</span><span class="p">();</span> 2139 <span class="k">@include</span> <span class="nd">make-col</span><span class="p">(</span><span class="nv">$size</span><span class="o">,</span> <span class="nv">$columns</span><span class="o">:</span> <span class="nv">$grid-columns</span><span class="p">);</span> 2140 2141 <span class="c1">// Get fancy by offsetting, or changing the sort order</span> 2142 <span class="k">@include</span> <span class="nd">make-col-offset</span><span class="p">(</span><span class="nv">$size</span><span class="o">,</span> <span class="nv">$columns</span><span class="o">:</span> <span class="nv">$grid-columns</span><span class="p">);</span></code></pre></figure> 2143 2144 <h3 id="example-usage"><div>Example usage<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#example-usage" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 2145 2146 <p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.</p> 2147 2148 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.example-container</span> <span class="p">{</span> 2149 <span class="nl">width</span><span class="p">:</span> <span class="m">800px</span><span class="p">;</span> 2150 <span class="k">@include</span> <span class="nd">make-container</span><span class="p">();</span> 2151 <span class="p">}</span> 2152 2153 <span class="nc">.example-row</span> <span class="p">{</span> 2154 <span class="k">@include</span> <span class="nd">make-row</span><span class="p">();</span> 2155 <span class="p">}</span> 2156 2157 <span class="nc">.example-content-main</span> <span class="p">{</span> 2158 <span class="k">@include</span> <span class="nd">make-col-ready</span><span class="p">();</span> 2159 2160 <span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">sm</span><span class="p">)</span> <span class="p">{</span> 2161 <span class="k">@include</span> <span class="nd">make-col</span><span class="p">(</span><span class="m">6</span><span class="p">);</span> 2162 <span class="p">}</span> 2163 <span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">lg</span><span class="p">)</span> <span class="p">{</span> 2164 <span class="k">@include</span> <span class="nd">make-col</span><span class="p">(</span><span class="m">8</span><span class="p">);</span> 2165 <span class="p">}</span> 2166 <span class="p">}</span> 2167 2168 <span class="nc">.example-content-secondary</span> <span class="p">{</span> 2169 <span class="k">@include</span> <span class="nd">make-col-ready</span><span class="p">();</span> 2170 2171 <span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">sm</span><span class="p">)</span> <span class="p">{</span> 2172 <span class="k">@include</span> <span class="nd">make-col</span><span class="p">(</span><span class="m">6</span><span class="p">);</span> 2173 <span class="p">}</span> 2174 <span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">lg</span><span class="p">)</span> <span class="p">{</span> 2175 <span class="k">@include</span> <span class="nd">make-col</span><span class="p">(</span><span class="m">4</span><span class="p">);</span> 2176 <span class="p">}</span> 2177 <span class="p">}</span></code></pre></figure> 2178 2179 <div class="bd-example"> 2180 <div class="example-container"> 2181 <div class="example-row"> 2182 <div class="example-content-main">Main content</div> 2183 <div class="example-content-secondary">Secondary content</div> 2184 </div> 2185 </div> 2186 </div> 2187 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"example-container"</span><span class="nt">></span> 2188 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"example-row"</span><span class="nt">></span> 2189 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"example-content-main"</span><span class="nt">></span>Main content<span class="nt"></div></span> 2190 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"example-content-secondary"</span><span class="nt">></span>Secondary content<span class="nt"></div></span> 2191 <span class="nt"></div></span> 2192 <span class="nt"></div></span></code></pre></figure> 2193 2194 <h2 id="customizing-the-grid"><div>Customizing the grid<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#customizing-the-grid" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 2195 2196 <p>Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.</p> 2197 2198 <h3 id="columns-and-gutters"><div>Columns and gutters<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#columns-and-gutters" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 2199 2200 <p>The number of grid columns can be modified via Sass variables. <code class="highlighter-rouge">$grid-columns</code> is used to generate the widths (in percent) of each individual column while <code class="highlighter-rouge">$grid-gutter-width</code> sets the width for the column gutters.</p> 2201 2202 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$grid-columns</span><span class="p">:</span> <span class="m">12</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span> 2203 <span class="nv">$grid-gutter-width</span><span class="p">:</span> <span class="m">30px</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure> 2204 2205 <h3 id="grid-tiers"><div>Grid tiers<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/grid/#grid-tiers" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h3> 2206 2207 <p>Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the <code class="highlighter-rouge">$grid-breakpoints</code> and <code class="highlighter-rouge">$container-max-widths</code> to something like this:</p> 2208 2209 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$grid-breakpoints</span><span class="p">:</span> <span class="p">(</span> 2210 <span class="n">xs</span><span class="o">:</span> <span class="m">0</span><span class="o">,</span> 2211 <span class="n">sm</span><span class="o">:</span> <span class="m">480px</span><span class="o">,</span> 2212 <span class="n">md</span><span class="o">:</span> <span class="m">768px</span><span class="o">,</span> 2213 <span class="n">lg</span><span class="o">:</span> <span class="m">1024px</span> 2214 <span class="p">);</span> 2215 2216 <span class="nv">$container-max-widths</span><span class="p">:</span> <span class="p">(</span> 2217 <span class="n">sm</span><span class="o">:</span> <span class="m">420px</span><span class="o">,</span> 2218 <span class="n">md</span><span class="o">:</span> <span class="m">720px</span><span class="o">,</span> 2219 <span class="n">lg</span><span class="o">:</span> <span class="m">960px</span> 2220 <span class="p">);</span></code></pre></figure> 2221 2222 <p>When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in <code class="highlighter-rouge">px</code> (not <code class="highlighter-rouge">rem</code>, <code class="highlighter-rouge">em</code>, or <code class="highlighter-rouge">%</code>).</p> 2223 2224 </main> 2225 </div> 2226 </div> 2227 2228 <script src="./assets/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 2229 <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 2230 2231 <script src="./assets/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="./assets/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><script src="./assets/docsearch.min.js"></script><script src="./assets/docs.min.js"></script> 2232 2233 2234 <div id="lleo_enjoyContentControls" class=" lleo_show"> 2235 <div id="lleo_enjoyContentPanel"> 2236 <label id="lleo_enjoyContentLabel"><input id="lleo_enjoyContentCheckbox" type="checkbox" checked="">Show this icon if possible</label> 2237 </div> 2238 <div id="lleo_enjoyContentButton" title="Enjoy Content!"></div> 2239 </div></body></html>