diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index a66f6e4a3f7a31b55d93a715106b5c47cea65b4d..1095d386ca852c94a73b44086cbd358260e79ca6 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -18,6 +18,7 @@ - title: Layout pages: + - title: Containers - title: Grid sections: - title: Introduction diff --git a/docs/components/scaffolding.md b/docs/components/scaffolding.md index b532ba4410b6974a7309a79e4385295af984cc7f..84a22e618f2b1c4d8e8899ed8245a4f4e787b0b0 100644 --- a/docs/components/scaffolding.md +++ b/docs/components/scaffolding.md @@ -45,23 +45,3 @@ These styles can be found within `scaffolding.less`. ### Normalize For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. - -### Containers - -Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to `padding` and more, neither container is nestable. - -Use `.container` for a responsive fixed width container. - -{% highlight html %} -<div class="container"> - ... -</div> -{% endhighlight %} - -Use `.container-fluid` for a full width container, spanning the entire width of your viewport. - -{% highlight html %} -<div class="container-fluid"> - ... -</div> -{% endhighlight %} diff --git a/docs/layout/containers.md b/docs/layout/containers.md new file mode 100644 index 0000000000000000000000000000000000000000..029cc18868023a86083281e9105638d3c8ad8ec6 --- /dev/null +++ b/docs/layout/containers.md @@ -0,0 +1,24 @@ +--- +layout: page +title: Containers +--- + +Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose from one of two containers—fixed width or fluid width—to use in your projects. + +Containers *can* be nested, but be aware that most layouts don't require it. + +Use `.container` for a responsive fixed width container. This will center content withing the viewport and apply the appropriate `width` for a given device size. + +{% highlight html %} +<div class="container"> + ... +</div> +{% endhighlight %} + +Use `.container-fluid` for a full width container, spanning the entire width of the viewport. + +{% highlight html %} +<div class="container-fluid"> + ... +</div> +{% endhighlight %}