diff options
Diffstat (limited to 'docs/layout')
| -rw-r--r-- | docs/layout/flexbox-grid.md | 72 | ||||
| -rw-r--r-- | docs/layout/grid.md | 46 | ||||
| -rw-r--r-- | docs/layout/overview.md | 18 |
3 files changed, 83 insertions, 53 deletions
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index eafe7b59c..c6430424a 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -43,21 +43,21 @@ For example, here are two grid layouts that apply to every device and viewport, {% example html %} <div class="container"> <div class="row"> - <div class="col-xs"> + <div class="col"> 1 of 2 </div> - <div class="col-xs"> + <div class="col"> 1 of 2 </div> </div> <div class="row"> - <div class="col-xs"> + <div class="col"> 1 of 3 </div> - <div class="col-xs"> + <div class="col"> 1 of 3 </div> - <div class="col-xs"> + <div class="col"> 1 of 3 </div> </div> @@ -73,24 +73,24 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% example html %} <div class="container"> <div class="row"> - <div class="col-xs"> + <div class="col"> 1 of 3 </div> <div class="col-6"> 2 of 3 (wider) </div> - <div class="col-xs"> + <div class="col"> 3 of 3 </div> </div> <div class="row"> - <div class="col-xs"> + <div class="col"> 1 of 3 </div> <div class="col-5"> 2 of 3 (wider) </div> - <div class="col-xs"> + <div class="col"> 3 of 3 </div> </div> @@ -106,24 +106,24 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the {% example html %} <div class="container"> <div class="row flex-items-md-center"> - <div class="col-xs col-lg-2"> + <div class="col col-lg-2"> 1 of 3 </div> <div class="col-12 col-md-auto"> Variable width content </div> - <div class="col-xs col-lg-2"> + <div class="col col-lg-2"> 3 of 3 </div> </div> <div class="row"> - <div class="col-xs"> + <div class="col"> 1 of 3 </div> <div class="col-12 col-md-auto"> Variable width content </div> - <div class="col-xs col-lg-2"> + <div class="col col-lg-2"> 3 of 3 </div> </div> @@ -157,36 +157,36 @@ Use the flexbox alignment utilities to vertically align columns. <div class="bd-example-row"> {% example html %} <div class="container"> - <div class="row flex-items-xs-top"> - <div class="col-xs"> + <div class="row flex-items-top"> + <div class="col"> One of three columns </div> - <div class="col-xs"> + <div class="col"> One of three columns </div> - <div class="col-xs"> + <div class="col"> One of three columns </div> </div> - <div class="row flex-items-xs-middle"> - <div class="col-xs"> + <div class="row flex-items-middle"> + <div class="col"> One of three columns </div> - <div class="col-xs"> + <div class="col"> One of three columns </div> - <div class="col-xs"> + <div class="col"> One of three columns </div> </div> - <div class="row flex-items-xs-bottom"> - <div class="col-xs"> + <div class="row flex-items-bottom"> + <div class="col"> One of three columns </div> - <div class="col-xs"> + <div class="col"> One of three columns </div> - <div class="col-xs"> + <div class="col"> One of three columns </div> </div> @@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %} <div class="container"> <div class="row"> - <div class="col-xs flex-xs-top"> + <div class="col flex-top"> One of three columns </div> - <div class="col-xs flex-xs-middle"> + <div class="col flex-middle"> One of three columns </div> - <div class="col-xs flex-xs-bottom"> + <div class="col flex-bottom"> One of three columns </div> </div> @@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt <div class="bd-example-row"> {% example html %} <div class="container"> - <div class="row flex-items-xs-left"> + <div class="row flex-items-left"> <div class="col-4"> One of two columns </div> @@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns </div> </div> - <div class="row flex-items-xs-center"> + <div class="row flex-items-center"> <div class="col-4"> One of two columns </div> @@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns </div> </div> - <div class="row flex-items-xs-right"> + <div class="row flex-items-right"> <div class="col-4"> One of two columns </div> @@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns </div> </div> - <div class="row flex-items-xs-around"> + <div class="row flex-items-around"> <div class="col-4"> One of two columns </div> @@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns </div> </div> - <div class="row flex-items-xs-between"> + <div class="row flex-items-between"> <div class="col-4"> One of two columns </div> @@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content. {% example html %} <div class="container"> <div class="row"> - <div class="col-xs flex-xs-unordered"> + <div class="col flex-unordered"> First, but unordered </div> - <div class="col-xs flex-xs-last"> + <div class="col flex-last"> Second, but last </div> - <div class="col-xs flex-xs-first"> + <div class="col flex-first"> Third, but first </div> </div> diff --git a/docs/layout/grid.md b/docs/layout/grid.md index ea0a9862b..68d7f7020 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -22,7 +22,7 @@ At a high level, here's how the grid system works: - Content should be placed within columns, and only columns may be immediate children of rows. - 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, you'd use `.col-sm-4`. - Column `width`s are set in percentages, so they're always fluid and sized relative to their parent element. -- Columns have horizontal `padding` to create the gutters between individual columns. +- Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `margin` from rows and `padding` from columns with `.no-gutters` on the `.row`. - There are five grid tiers, one for each [responsive breakpoint]({{ site.baseurl }}/layout/overview/#responsive-breakpoints): extra small, small, medium, large, and extra large. - Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices). - You can use predefined grid classes or Sass mixins for more semantic markup. @@ -62,23 +62,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a <thead> <tr> <th></th> - <th class="text-xs-center"> + <th class="text-center"> Extra small<br> <small><576px</small> </th> - <th class="text-xs-center"> + <th class="text-center"> Small<br> <small>≥576px</small> </th> - <th class="text-xs-center"> + <th class="text-center"> Medium<br> <small>≥768px</small> </th> - <th class="text-xs-center"> + <th class="text-center"> Large<br> <small>≥992px</small> </th> - <th class="text-xs-center"> + <th class="text-center"> Extra large<br> <small>≥1200px</small> </th> @@ -100,7 +100,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a </tr> <tr> <th class="text-nowrap" scope="row">Class prefix</th> - <td><code>.col-xs-</code></td> + <td><code>.col-</code></td> <td><code>.col-sm-</code></td> <td><code>.col-md-</code></td> <td><code>.col-lg-</code></td> @@ -329,7 +329,7 @@ Using a single set of `.col-md-*` grid classes, you can create a basic grid syst ### Example: Mobile and desktop -Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works. +Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works. <div class="bd-example-row"> {% example html %} @@ -374,6 +374,36 @@ Build on the previous example by creating even more dynamic and powerful layouts {% endexample %} </div> +### Example: Remove gutters + +The gutters between columns in our default, predefined grid classes can be removed with `.no-gutters`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns. + +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 [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). While this generates a more specific selector, column padding can still be further customized with [spacing utilities]({{ site.baseurl }}/utilities/spacing/). + +{% highlight sass %} +.no-gutters { + margin-right: 0; + margin-left: 0; + + > .col, + > [class*="col-"] { + padding-right: 0; + padding-left: 0; + } +} +{% endhighlight %} + +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). + +<div class="bd-example-row"> +{% example html %} +<div class="row no-gutters"> + <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> + <div class="col-6 col-md-4">.col-6 .col-md-4</div> +</div> +{% endexample %} +</div> + ### Example: Column wrapping 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. diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 758854b8a..8ed7671a9 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -57,11 +57,11 @@ Since Bootstrap is developed to be mobile first, we use a handful of [media quer Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. {% highlight scss %} -// Extra small devices (portrait phones, less than 544px) +// Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap -// Small devices (landscape phones, 544px and up) -@media (min-width: 544px) { ... } +// Small devices (landscape phones, 576px and up) +@media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } @@ -93,8 +93,8 @@ Since we write our source CSS in Sass, all our media queries are available via S We occasionally use media queries that go in the other direction (the given screen size *or smaller*): {% highlight scss %} -// Extra small devices (portrait phones, less than 544px) -@media (max-width: 543px) { ... } +// Extra small devices (portrait phones, less than 576px) +@media (max-width: 575px) { ... } // Small devices (landscape phones, less than 768px) @media (max-width: 767px) { ... } @@ -121,11 +121,11 @@ Once again, these media queries are also available via Sass mixins: We also have media between the breakpoint's minimum and maximum widths for only the given screen size: {% highlight scss %} -// Extra small devices (portrait phones, less than 544px) -@media (max-width: 543px) { ... } +// Extra small devices (portrait phones, less than 576px) +@media (max-width: 575px) { ... } -// Small devices (landscape phones, 544px and up) -@media (min-width: 544px) and (max-width: 767px) { ... } +// Small devices (landscape phones, 576px and up) +@media (min-width: 576px) and (max-width: 767px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991px) { ... } |