From fa2731b6264ad44c6d2600b7a4efab0ddaca7a06 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 May 2017 22:12:00 -0700 Subject: [PATCH] update layout pages --- docs/layout/grid.md | 10 ++-------- docs/layout/media-object.md | 10 +++------- docs/layout/overview.md | 8 +------- docs/layout/utilities-for-layout.md | 10 ++-------- 4 files changed, 8 insertions(+), 30 deletions(-) diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 97ffd31613..d0bfe416a2 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -1,17 +1,11 @@ --- layout: docs title: Grid system -description: Documentation and examples for using Bootstrap's responsive flexbox grid system. +description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. group: layout +toc: true --- -Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and has multiple tiers, one for each [media query range]({{ site.baseurl }}/layout/overview/#responsive-breakpoints). You can use it with Sass mixins or our predefined classes. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## How it works Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together. diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index 74229dc3c0..5023e45808 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -3,17 +3,13 @@ layout: docs title: Media object description: Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like. group: layout +toc: true --- -The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) helps build complex and repetitive components where some media is positioned alongside content that doesn't wrap around said media. Plus, it does this with only two required classes thanks to flexbox. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Example +The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) helps build complex and repetitive components where some media is positioned alongside content that doesn't wrap around said media. Plus, it does this with only two required classes thanks to flexbox. + Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities]({{ site.baseurl }}/utilities/spacing/). {% example html %} diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 04aa2c9ada..b167bbc2ef 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -4,15 +4,9 @@ title: Overview description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. group: layout redirect_from: "/layout/" +toc: true --- -Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful flexbox grid system, a flexible media object, and responsive utility classes. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## 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). diff --git a/docs/layout/utilities-for-layout.md b/docs/layout/utilities-for-layout.md index 12ba7006c3..451d43cd11 100644 --- a/docs/layout/utilities-for-layout.md +++ b/docs/layout/utilities-for-layout.md @@ -1,17 +1,11 @@ --- layout: docs title: Utilities for layout -description: Use any of our dozens of responsive utility classes for showing, hiding, aligning, and spacing content. +description: For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content. group: layout +toc: true --- -For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content. Below is a primer on what's included in Bootstrap and how these utilities can help you with layout. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Changing `display` Use our `display` utilities for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.