Skip to content

Responsive containers (follow-up to #29095) #29118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdo merged 7 commits into from
Aug 5, 2019
+177 −39
Merged

Responsive containers (follow-up to #29095) #29118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
11eae0e
Follow-up to #29095
mdo Jul 23, 2019
0449b28
update navbar as well because we cannot reset all containers uniformly
mdo Jul 23, 2019
015eead
Update navbars example to include container-xl example to ensure cont…
mdo Jul 23, 2019
c699d9b
rewrite responsive containers docs, add table of max-widths
mdo Jul 23, 2019
51da4cd
Update container docs
mdo Aug 2, 2019
fd2cf7e
Merge branch 'master' into responsive-container-fixes
XhmikosR Aug 3, 2019
933e147
Merge branch 'master' into responsive-container-fixes
XhmikosR Aug 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion scss/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
}
}
}
}
}
Expand Down
39 changes: 36 additions & 3 deletions scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}


Expand Down Expand Up @@ -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) {
Expand All @@ -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

Expand Down
6 changes: 4 additions & 2 deletions site/content/docs/4.3/examples/grid/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,12 +126,14 @@ <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>

</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>
38 changes: 38 additions & 0 deletions site/content/docs/4.3/examples/navbars/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,44 @@
</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>
Expand Down
113 changes: 90 additions & 23 deletions site/content/docs/4.3/layout/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">&lt;576px</span>
</th>
<th>
Small<br>
<span class="font-weight-normal">&ge;576px</span>
</th>
<th>
Medium<br>
<span class="font-weight-normal">&ge;768px</span>
</th>
<th>
Large<br>
<span class="font-weight-normal">&ge;992px</span>
</th>
<th>
Extra large<br>
<span class="font-weight-normal">&ge;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 -->
Expand All @@ -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">
...
Expand All @@ -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>
Expand Down
10 changes: 0 additions & 10 deletions site/static/docs/4.3/assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,6 @@
}


//
// Container illustrations
//

.example-container-element {
background-color: rgba($blue, .25);
border: 1px solid rgba($blue, .25);
}


//
// Docs examples
//
Expand Down