Skip to content

Commit

Permalink
Center align all the code example texts in layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton @mdo
louismaximepiton authored and mdo committed May 20, 2022
1 parent 95a5afb commit 38fbce6
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 86 deletions.
52 changes: 26 additions & 26 deletions site/content/docs/5.2/examples/grid/index.html
View file
Expand Up @@ -17,69 +17,69 @@ <h1>Bootstrap grid examples</h1>
<h2 class="mt-4">Five grid tiers</h2>
<p>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.</p>

<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-4 themed-grid-col">.col-4</div>
<div class="col-4 themed-grid-col">.col-4</div>
<div class="col-4 themed-grid-col">.col-4</div>
</div>

<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
</div>

<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
</div>

<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
</div>

<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
</div>

<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
</div>

<h2 class="mt-4">Three equal columns</h2>
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
</div>

<h2 class="mt-4">Three equal columns alternative</h2>
<p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
<div class="row row-cols-md-3 mb-3">
<div class="row row-cols-md-3 mb-3 text-center">
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
</div>

<h2 class="mt-4">Three unequal columns</h2>
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> 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.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-3 themed-grid-col">.col-md-3</div>
<div class="col-md-6 themed-grid-col">.col-md-6</div>
<div class="col-md-3 themed-grid-col">.col-md-3</div>
</div>

<h2 class="mt-4">Two columns</h2>
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-8 themed-grid-col">.col-md-8</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
</div>
Expand All @@ -94,7 +94,7 @@ <h2 class="mt-4">Full width, single column</h2>
<h2 class="mt-4">Two columns with two nested columns</h2>
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-8 themed-grid-col">
<div class="pb-3">
.col-md-8
Expand All @@ -112,28 +112,28 @@ <h2 class="mt-4">Two columns with two nested columns</h2>
<h2 class="mt-4">Mixed: mobile and desktop</h2>
<p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-8 themed-grid-col">.col-md-8</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-6 themed-grid-col">.col-6</div>
<div class="col-6 themed-grid-col">.col-6</div>
</div>

<hr class="my-4">

<h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
<div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
Expand All @@ -143,7 +143,7 @@ <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>

<h2 class="mt-4">Gutters</h2>
<p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
<div class="row row-cols-1 row-cols-md-3 gx-4">
<div class="row row-cols-1 row-cols-md-3 gx-4 text-center">
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
Expand All @@ -152,7 +152,7 @@ <h2 class="mt-4">Gutters</h2>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
</div>
<p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
<div class="row row-cols-1 row-cols-md-3 gy-4">
<div class="row row-cols-1 row-cols-md-3 gy-4 text-center">
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
Expand All @@ -161,7 +161,7 @@ <h2 class="mt-4">Gutters</h2>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
</div>
<p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="row row-cols-1 row-cols-md-3 g-3 text-center">
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
Expand All @@ -178,11 +178,11 @@ <h2 class="mt-4">Containers</h2>
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
</div>

<div class="container themed-container">.container</div>
<div class="container-sm themed-container">.container-sm</div>
<div class="container-md themed-container">.container-md</div>
<div class="container-lg themed-container">.container-lg</div>
<div class="container-xl themed-container">.container-xl</div>
<div class="container-xxl themed-container">.container-xxl</div>
<div class="container-fluid themed-container">.container-fluid</div>
<div class="container themed-container text-center">.container</div>
<div class="container-sm themed-container text-center">.container-sm</div>
<div class="container-md themed-container text-center">.container-md</div>
<div class="container-lg themed-container text-center">.container-lg</div>
<div class="container-xl themed-container text-center">.container-xl</div>
<div class="container-xxl themed-container text-center">.container-xxl</div>
<div class="container-fluid themed-container text-center">.container-fluid</div>
</main>
20 changes: 10 additions & 10 deletions site/content/docs/5.2/layout/columns.md
View file
Expand Up @@ -25,7 +25,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
### Vertical alignment

{{< example class="bd-example-row bd-example-row-flex-cols" >}}
<div class="container">
<div class="container text-center">
<div class="row align-items-start">
<div class="col">
One of three columns
Expand Down Expand Up @@ -63,7 +63,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
{{< /example >}}

{{< example class="bd-example-row bd-example-row-flex-cols" >}}
<div class="container">
<div class="container text-center">
<div class="row">
<div class="col align-self-start">
One of three columns
Expand All @@ -81,7 +81,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
### Horizontal alignment

{{< example class="bd-example-row" >}}
<div class="container">
<div class="container text-center">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
Expand Down Expand Up @@ -152,7 +152,7 @@ If more than 12 columns are placed within a single row, each group of extra colu
Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this.

{{< example class="bd-example-row" >}}
<div class="container">
<div class="container text-center">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
Expand All @@ -169,7 +169,7 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
You may also apply this break at specific breakpoints with our [responsive display utilities]({{< docsref "/utilities/display" >}}).

{{< example class="bd-example-row" >}}
<div class="container">
<div class="container text-center">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
Expand All @@ -190,7 +190,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.

{{< example class="bd-example-row" >}}
<div class="container">
<div class="container text-center">
<div class="row">
<div class="col">
First in DOM, no order applied
Expand All @@ -208,7 +208,7 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.

{{< example class="bd-example-row" >}}
<div class="container">
<div class="container text-center">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
Expand All @@ -232,7 +232,7 @@ You can offset grid columns in two ways: our responsive `.offset-` grid classes
Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.

{{< example class="bd-example-row" >}}
<div class="container">
<div class="container text-center">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
Expand All @@ -250,7 +250,7 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}).

{{< example class="bd-example-row" >}}
<div class="container">
<div class="container text-center">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
Expand All @@ -267,7 +267,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset
With the move to flexbox in v4, you can use margin utilities like `.me-auto` to force sibling columns away from one another.

{{< example class="bd-example-row" >}}
<div class="container">
<div class="container text-center">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
Expand Down

0 comments on commit 38fbce6

Please sign in to comment.