From 1ded0d6a4eefb7daca62c44e4e735aec200f0b6f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 11 Feb 2019 11:15:34 -0800 Subject: Release v4.3.0 (#28228) * Prep for v4.3.0 * More updates for v4.3.0. * rerun to build docs source map --- site/docs/4.3/examples/grid/grid.css | 6 ++ site/docs/4.3/examples/grid/index.html | 126 +++++++++++++++++++++++++++++++++ 2 files changed, 132 insertions(+) create mode 100644 site/docs/4.3/examples/grid/grid.css create mode 100644 site/docs/4.3/examples/grid/index.html (limited to 'site/docs/4.3/examples/grid') diff --git a/site/docs/4.3/examples/grid/grid.css b/site/docs/4.3/examples/grid/grid.css new file mode 100644 index 000000000..e726996d3 --- /dev/null +++ b/site/docs/4.3/examples/grid/grid.css @@ -0,0 +1,6 @@ +.themed-grid-col { + padding-top: 15px; + padding-bottom: 15px; + background-color: rgba(86, 61, 124, .15); + border: 1px solid rgba(86, 61, 124, .2); +} diff --git a/site/docs/4.3/examples/grid/index.html b/site/docs/4.3/examples/grid/index.html new file mode 100644 index 000000000..b41090438 --- /dev/null +++ b/site/docs/4.3/examples/grid/index.html @@ -0,0 +1,126 @@ +--- +layout: examples +title: Grid Template +extra_css: "grid.css" +body_class: "py-4" +include_js: false +--- + +
+ +

Bootstrap grid examples

+

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

+

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

+ +

Five grid tiers

+

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

+ +
+
.col-4
+
.col-4
+
.col-4
+
+ +
+
.col-sm-4
+
.col-sm-4
+
.col-sm-4
+
+ +
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
+
+ +
+
.col-xl-4
+
.col-xl-4
+
.col-xl-4
+
+ +

Three equal columns

+

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +

Three unequal columns

+

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

+
+
.col-md-3
+
.col-md-6
+
.col-md-3
+
+ +

Two columns

+

Get two columns starting at desktops and scaling to large desktops.

+
+
.col-md-8
+
.col-md-4
+
+ +

Full width, single column

+

+ No grid classes are necessary for full-width elements. +

+ +
+ +

Two columns with two nested columns

+

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

+

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

+
+
+
+ .col-md-8 +
+
+
.col-md-6
+
.col-md-6
+
+
+
.col-md-4
+
+ +
+ +

Mixed: mobile and desktop

+

The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

+

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

+
+
.col-12 .col-md-8
+
.col-6 .col-md-4
+
+
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
+
+
.col-6
+
.col-6
+
+ +
+ +

Mixed: mobile, tablet, and desktop

+
+
.col-12 .col-sm-6 .col-lg-8
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
+ +
-- cgit v1.2.3