diff options
| -rw-r--r-- | scss/_grid.scss | 23 | ||||
| -rw-r--r-- | scss/_navbar.scss | 9 | ||||
| -rw-r--r-- | site/content/docs/4.3/examples/grid/grid.css | 7 | ||||
| -rw-r--r-- | site/content/docs/4.3/examples/grid/index.html | 10 | ||||
| -rw-r--r-- | site/content/docs/4.3/layout/overview.md | 39 | ||||
| -rw-r--r-- | site/static/docs/4.3/assets/scss/_component-examples.scss | 43 |
6 files changed, 77 insertions, 54 deletions
diff --git a/scss/_grid.scss b/scss/_grid.scss index a227515379..f70e849517 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -3,23 +3,32 @@ // Set the container width, and override it for fixed navbars in media queries. @if $enable-grid-classes { + // Single container class with breakpoint max-widths .container { @include make-container(); @include make-container-max-widths(); } -} - -// Fluid container -// -// Utilizes the mixin meant for fixed width containers, but with 100% width for -// fluid, full width layouts. -@if $enable-grid-classes { + // 100% wide container at all breakpoints .container-fluid { @include make-container(); } + + // Responsive containers that are 100% wide until a breakpoint + @each $breakpoint, $container-max-width in $container-max-widths { + .container-#{$breakpoint} { + @include make-container(); + } + + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + .container-#{$breakpoint} { + max-width: $container-max-width; + } + } + } } + // Row // // Rows contain and clear the floats of your columns. diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 2b57ae53ac..beb6f2bf00 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -25,8 +25,7 @@ // Because flex properties aren't inherited, we need to redeclare these first // few properties so that content nested within behave properly. - > .container, - > .container-fluid { + > [class^="container"] { display: flex; flex-wrap: wrap; align-items: center; @@ -140,8 +139,7 @@ &#{$infix} { @include media-breakpoint-down($breakpoint) { - > .container, - > .container-fluid { + > [class^=".container"] { padding-right: 0; padding-left: 0; } @@ -165,8 +163,7 @@ } // For nesting containers, have to redeclare for alignment purposes - > .container, - > .container-fluid { + > [class^=".container"] { flex-wrap: nowrap; } diff --git a/site/content/docs/4.3/examples/grid/grid.css b/site/content/docs/4.3/examples/grid/grid.css index e726996d31..8032c31c3e 100644 --- a/site/content/docs/4.3/examples/grid/grid.css +++ b/site/content/docs/4.3/examples/grid/grid.css @@ -4,3 +4,10 @@ background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .2); } + +.themed-container { + padding: 15px; + margin-bottom: 30px; + background-color: rgba(0, 123, 255, .15); + border: 1px solid rgba(0, 123, 255, .2); +} diff --git a/site/content/docs/4.3/examples/grid/index.html b/site/content/docs/4.3/examples/grid/index.html index 230fd6a57b..24289cea52 100644 --- a/site/content/docs/4.3/examples/grid/index.html +++ b/site/content/docs/4.3/examples/grid/index.html @@ -125,3 +125,13 @@ include_js: false </div> </div> + +<div class="container"> + <h2 class="mt-4">Responsive 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-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> diff --git a/site/content/docs/4.3/layout/overview.md b/site/content/docs/4.3/layout/overview.md index dd2f346915..79b799ca0d 100644 --- a/site/content/docs/4.3/layout/overview.md +++ b/site/content/docs/4.3/layout/overview.md @@ -9,15 +9,15 @@ toc: true ## Containers -Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time). +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. -While containers *can* be nested, most layouts do not require a nested container. +### 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="bd-example-container"> - <div class="bd-example-container-header"></div> - <div class="bd-example-container-sidebar"></div> - <div class="bd-example-container-body"></div> + <div class="example-container-element col-6 p-3 mx-auto"> + .container </div> </div> @@ -27,13 +27,13 @@ While containers *can* be nested, most layouts do not require a nested container </div> {{< /highlight >}} +### Fluid + Use `.container-fluid` for a full width container, spanning the entire width of the viewport. <div class="bd-example"> - <div class="bd-example-container bd-example-container-fluid"> - <div class="bd-example-container-header"></div> - <div class="bd-example-container-sidebar"></div> - <div class="bd-example-container-body"></div> + <div class="example-container-element p-3"> + .container-fluid </div> </div> @@ -43,6 +43,25 @@ Use `.container-fluid` for a full width container, spanning the entire width of </div> {{< /highlight >}} +### 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> + +{{< highlight html >}} +<div class="container-sm">100% wide until small breakpoint</div> +<div class="container-md">100% wide until medium breakpoint</div> +<div class="container-lg">100% wide until large breakpoint</div> +<div class="container-xl">100% wide until extra large breakpoint</div> +{{< /highlight >}} ## Responsive breakpoints 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 8b7a3bab85..60f5942321 100644 --- a/site/static/docs/4.3/assets/scss/_component-examples.scss +++ b/site/static/docs/4.3/assets/scss/_component-examples.scss @@ -30,6 +30,15 @@ border: 1px solid rgba($bd-purple, .15); } +.bd-example-responsive-containers { + [class^="container"] { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(86, 61, 124, .15); + border: 1px solid rgba(86, 61, 124, .2); + } +} + // Grid mixins .example-container { width: 800px; @@ -69,37 +78,9 @@ // Container illustrations // -.bd-example-container { - min-width: 16rem; - max-width: 25rem; - margin-right: auto; - margin-left: auto; -} - -.bd-example-container-header { - height: 3rem; - margin-bottom: .5rem; - background-color: lighten($blue, 50%); - @include border-radius; -} - -.bd-example-container-sidebar { - float: right; - width: 4rem; - height: 8rem; - background-color: lighten($blue, 25%); - @include border-radius; -} - -.bd-example-container-body { - height: 8rem; - margin-right: 4.5rem; - background-color: lighten($bd-purple, 25%); - @include border-radius; -} - -.bd-example-container-fluid { - max-width: none; +.example-container-element { + background-color: rgba($blue, .25); + border: 1px solid rgba($blue, .25); } |