diff --git a/scss/_grid.scss b/scss/_grid.scss index 5b8b8cb236880e7f0df84db45184a0a8561c47e4..d36ee75d8874456f09700922ab5b6b2ceecdf44c 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -21,9 +21,17 @@ } @include media-breakpoint-up($breakpoint, $grid-breakpoints) { - .container-#{$breakpoint} { + %responsive-container-#{$breakpoint} { max-width: $container-max-width; } + + @each $name, $width in $grid-breakpoints { + @if ($container-max-width > $width or $breakpoint == $name) { + .container#{breakpoint-infix($name, $grid-breakpoints)} { + @extend %responsive-container-#{$breakpoint}; + } + } + } } } } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 64c15f5347f759da877846298c7033654321906d..f9e2b792a8d7337c2d32aa95bbbe00bc7a3a319f 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -25,12 +25,23 @@ // Because flex properties aren't inherited, we need to redeclare these first // few properties so that content nested within behave properly. - > [class^="container"] { + %container-flex-properties { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } + + .container, + .container-fluid { + @extend %container-flex-properties; + } + + @each $breakpoint, $container-max-width in $container-max-widths { + > .container#{breakpoint-infix($breakpoint, $container-max-widths)} { + @extend %container-flex-properties; + } + } } @@ -139,10 +150,21 @@ &#{$infix} { @include media-breakpoint-down($breakpoint) { - > [class^="container"] { + %container-navbar-expand-#{$breakpoint} { padding-right: 0; padding-left: 0; } + + > .container, + > .container-fluid { + @extend %container-navbar-expand-#{$breakpoint}; + } + + @each $size, $container-max-width in $container-max-widths { + > .container#{breakpoint-infix($size, $container-max-widths)} { + @extend %container-navbar-expand-#{$breakpoint}; + } + } } @include media-breakpoint-up($next) { @@ -163,10 +185,21 @@ } // For nesting containers, have to redeclare for alignment purposes - > [class^="container"] { + %container-nesting-#{$breakpoint} { flex-wrap: nowrap; } + > .container, + > .container-fluid { + @extend %container-nesting-#{$breakpoint}; + } + + @each $size, $container-max-width in $container-max-widths { + > .container#{breakpoint-infix($size, $container-max-widths)} { + @extend %container-nesting-#{$breakpoint}; + } + } + .navbar-collapse { display: flex !important; // stylelint-disable-line declaration-no-important diff --git a/site/content/docs/4.3/examples/grid/index.html b/site/content/docs/4.3/examples/grid/index.html index 24289cea52cc4373163d5c35db37d1433aab6c67..1440cb73457a5f5bbc65daafd1b394b03cfe1ed0 100644 --- a/site/content/docs/4.3/examples/grid/index.html +++ b/site/content/docs/4.3/examples/grid/index.html @@ -126,12 +126,14 @@ include_js: false </div> -<div class="container"> - <h2 class="mt-4">Responsive containers</h2> +<div class="container" id="containers"> + <h2 class="mt-4">Containers</h2> <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p> </div> +<div class="container themed-container">.container</div> <div class="container-sm themed-container">.container-sm</div> <div class="container-md themed-container">.container-md</div> <div class="container-lg themed-container">.container-lg</div> <div class="container-xl themed-container">.container-xl</div> +<div class="container-fluid themed-container">.container-fluid</div> diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html index bdb4aeb01979b3b0f56f0e5f43f2c46e37c13a8a..3ec8bb9c7387e13787b8e84a91fa3e2cc135b4ab 100644 --- a/site/content/docs/4.3/examples/navbars/index.html +++ b/site/content/docs/4.3/examples/navbars/index.html @@ -220,6 +220,44 @@ extra_css: </div> </nav> +<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> + <div class="container-xl"> + <a class="navbar-brand" href="#">Container XL</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample07XL"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown07XL"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search" aria-label="Search"> + </form> + </div> + </div> +</nav> + +<div class="container-xl mt-n2 mb-3"> + Matching .container-xl... +</div> + <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> diff --git a/site/content/docs/4.3/layout/overview.md b/site/content/docs/4.3/layout/overview.md index 79b799ca0dcea56ab6ee8b832aec3959a09bf9b3..3ad386121abf2f4131985cc88aaeaec09b862bf2 100644 --- a/site/content/docs/4.3/layout/overview.md +++ b/site/content/docs/4.3/layout/overview.md @@ -9,18 +9,100 @@ toc: true ## Containers -Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. While containers *can* be nested, most layouts do not require a nested container. +Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. Containers are used to contain, pad, and (sometimes) center the content within them. While containers *can* be nested, most layouts do not require a nested container. + +Bootstrap comes with three different containers: + +- `.container`, which sets a `max-width` at each responsive breakpoint +- `.container-fluid`, which is `width: 100%` at all breakpoints +- `.container-{breakpoint}`, which is `width: 100%` until the specified breakpoint + +The table below illustrates how each container's `max-width` compares to the original `.container` and `.container-fluid` across each breakpoint. + +See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}). + +<table class="table text-left"> + <thead> + <tr> + <th></th> + <th> + Extra small<br> + <span class="font-weight-normal"><576px</span> + </th> + <th> + Small<br> + <span class="font-weight-normal">≥576px</span> + </th> + <th> + Medium<br> + <span class="font-weight-normal">≥768px</span> + </th> + <th> + Large<br> + <span class="font-weight-normal">≥992px</span> + </th> + <th> + Extra large<br> + <span class="font-weight-normal">≥1200px</span> + </th> + </tr> + </thead> + <tbody> + <tr> + <td><code>.container</code></td> + <td class="text-muted">100%</td> + <td>540px</td> + <td>720px</td> + <td>960px</td> + <td>1140px</td> + </tr> + <tr> + <td><code>.container-sm</code></td> + <td class="text-muted">100%</td> + <td>540px</td> + <td>720px</td> + <td>960px</td> + <td>1140px</td> + </tr> + <tr> + <td><code>.container-md</code></td> + <td class="text-muted">100%</td> + <td class="text-muted">100%</td> + <td>720px</td> + <td>960px</td> + <td>1140px</td> + </tr> + <tr> + <td><code>.container-lg</code></td> + <td class="text-muted">100%</td> + <td class="text-muted">100%</td> + <td class="text-muted">100%</td> + <td>960px</td> + <td>1140px</td> + </tr> + <tr> + <td><code>.container-xl</code></td> + <td class="text-muted">100%</td> + <td class="text-muted">100%</td> + <td class="text-muted">100%</td> + <td class="text-muted">100%</td> + <td>1140px</td> + </tr> + <tr> + <td><code>.container-fluid</code></td> + <td class="text-muted">100%</td> + <td class="text-muted">100%</td> + <td class="text-muted">100%</td> + <td class="text-muted">100%</td> + <td class="text-muted">100%</td> + </tr> + </tbody> +</table> ### All-in-one Our default `.container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint. -<div class="bd-example"> - <div class="example-container-element col-6 p-3 mx-auto"> - .container - </div> -</div> - {{< highlight html >}} <div class="container"> <!-- Content here --> @@ -31,12 +113,6 @@ Our default `.container` class is a responsive, fixed-width container, meaning i Use `.container-fluid` for a full width container, spanning the entire width of the viewport. -<div class="bd-example"> - <div class="example-container-element p-3"> - .container-fluid - </div> -</div> - {{< highlight html >}} <div class="container-fluid"> ... @@ -45,16 +121,7 @@ Use `.container-fluid` for a full width container, spanning the entire width of ### Responsive -Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until particular breakpoint is reached and a `max-width` is applied. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will remain through the higher breakpoints. - -<div class="bd-example"> - <div class="example-container-element p-3 mb-3"> - .container-sm (100% wide until breakpoint) - </div> - <div class="example-container-element col-6 p-3 mx-auto"> - .container-sm (With max-width at breakpoint) - </div> -</div> +Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, and `xl`. {{< highlight html >}} <div class="container-sm">100% wide until small breakpoint</div> diff --git a/site/static/docs/4.3/assets/scss/_component-examples.scss b/site/static/docs/4.3/assets/scss/_component-examples.scss index 60f59423212b016fae1fa25148b2e443876a4e1c..1a3fa1d86f3e3611aae3fc0ecaee4dc5d8992942 100644 --- a/site/static/docs/4.3/assets/scss/_component-examples.scss +++ b/site/static/docs/4.3/assets/scss/_component-examples.scss @@ -74,16 +74,6 @@ } -// -// Container illustrations -// - -.example-container-element { - background-color: rgba($blue, .25); - border: 1px solid rgba($blue, .25); -} - - // // Docs examples //