]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
update layout pages
authorMark Otto <markdotto@gmail.com>
Sun, 28 May 2017 05:12:00 +0000 (22:12 -0700)
committerMark Otto <markdotto@gmail.com>
Sun, 28 May 2017 05:12:00 +0000 (22:12 -0700)
docs/layout/grid.md
docs/layout/media-object.md
docs/layout/overview.md
docs/layout/utilities-for-layout.md

index 97ffd3161320f9ef3fddef46a2927a5290c7f379..d0bfe416a23ddc858f22d2a6af97cbda6b438eb2 100644 (file)
@@ -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.
index 74229dc3c06c1db3c1b68e525fe258e945e4fd34..5023e45808962ef23cfe0c370dbdaf6f8715ef36 100644 (file)
@@ -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 %}
index 04aa2c9ada1e2c07378721f2ef32aed2138951e6..b167bbc2efcba40310c488149c1379516852bbed 100644 (file)
@@ -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).
index 12ba7006c35361052053d5857338e5f4f91316db..451d43cd11e3acbc772e58ae1981f490f517fef9 100644 (file)
@@ -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.