}
@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};
+ }
+ }
+ }
}
}
}
// 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;
+ }
+ }
}
&#{$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) {
}
// 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
</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>
</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>
## 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 -->
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">
...
### 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>
}
-//
-// Container illustrations
-//
-
-.example-container-element {
- background-color: rgba($blue, .25);
- border: 1px solid rgba($blue, .25);
-}
-
-
//
// Docs examples
//
projects / thirdparty / bootstrap.git / commitdiff
