TGAM Flexbox Grid | The Globe and Mail Pattern Library

Utility

Visibility

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.

  • The .d-hidden-*-up classes hide the element when the viewport is at the given breakpoint or wider. For example, .d-hidden-md-up hides an element on medium, and large viewports.
  • The .d-hidden-*-down classes hide the element when the viewport is at the given breakpoint or smaller. For example, .d-hidden-md-down hides an element on extra-small, small, and medium viewports.
  • There are no explicit “visible”/”show” responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
  • You can combine one .d-hidden-*-up class with one .d-hidden-*-down class to show an element only on a given interval of screen sizes. For example, .d-hidden-sm-down.d-hidden-lg-up shows the element only on medium viewports. Using multiple .d-hidden-*-up classes or multiple .d-hidden-*-down classes is redundant and pointless.
  • These classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
Extra small devices
Portrait phones
(≤767px)
(≤47rem) 		Small devices
Landscape phones
(≥768px - ≤979px)
(≥48em - ≤61.24rem) 		Medium devices
Tablets
(≥980px - ≤1279px)
(≥61.25em - ≤79rem) 		Large devices
Desktops
(≥1280px)
(≥80rem)
d-hidden-xs-down Visible Visible Visible
d-hidden-sm-down Visible Visible
d-hidden-md-down Visible
d-hidden-lg-down
d-hidden-xs-up
d-hidden-sm-up Visible
d-hidden-md-up Visible Visible
d-hidden-lg-up Visible Visible Visible

Display

Use .d-block, .d-inline, or .d-inline-block to simply set an element’s display property to block, inline, or inline-block (respectively).

Responsive variations exist for these various traditional display classes:

  • .d-none, .d-none-sm, .d-none-md, .d-none-lg
  • .d-inline, .d-inline-sm, .d-inline-md, .d-inline-lg
  • .d-inline-block, .d-inline-block-sm, .d-inline-block-md, .d-inline-block-lg
  • .d-block, .d-block-sm, .d-block-md, .d-block-lg
  • .d-table, .d-table-sm, .d-table-md, .d-table-lg
  • .d-table-cell, .d-table-cell-sm, .d-table-cell-md, .d-table-cell-lg

Enable inline/block behaviors

Inline
Inline

Inline OR Block

Inline-block
Inline-block

HTML
<p>
  <div class="d-inline">Inline</div>
  <div class="d-inline">Inline</div>
</p>
<p>
  <span class="d-block d-inline-sm d-block-md d-inline-lg">Inline OR Block</span>
</p>
<p>
  <div class="d-inline-block">Inline-block</div>
  <div class="d-inline-block">Inline-block</div>
</p>

Enable flex behaviors

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

I'm a flexbox container!
I'm an inline flexbox container!
HTML
<div class="d-flex">I'm a flexbox container!</div>
<div class="d-inline-flex">I'm an inline flexbox container!</div>

Responsive variations also exist for .d-flex and .d-inline-flex.

  • .d-flex, .d-flex-sm, .d-flex-md, .d-flex-lg
  • .d-inline-flex, .d-inline-flex-sm, .d-inline-flex-md, .d-inline-flex-lg

Flexbox

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

Use .u-flex-row to set a horizontal direction (the browser default), or .u-flex-row-reverse to start the horizontal direction from the opposite side.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
HTML
<div class="d-flex u-flex-row">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex u-flex-row-reverse">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>

Use .u-flex-column to set a vertical direction, or .u-flex-column-reverse to start the vertical direction from the opposite side.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
HTML
<div class="d-flex u-flex-column">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex u-flex-column-reverse">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>

Responsive variations also exist for u-flex-direction.

  • .u-flex-row
  • .u-flex-row-reverse
  • .u-flex-column
  • .u-flex-column-reverse
  • .u-flex-sm-row
  • .u-flex-sm-row-reverse
  • .u-flex-sm-column
  • .u-flex-sm-column-reverse
  • .u-flex-md-row
  • .u-flex-md-row-reverse
  • .u-flex-md-column
  • .u-flex-md-column-reverse
  • .u-flex-lg-row
  • .u-flex-lg-row-reverse
  • .u-flex-lg-column
  • .u-flex-lg-column-reverse

Justify content

Use u-justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
HTML
<div class="d-flex u-justify-content-start">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex u-justify-content-end">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex u-justify-content-center">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex u-justify-content-between">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex u-justify-content-around">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>

Responsive variations also exist for u-justify-content.

  • .u-justify-content-start
  • .u-justify-content-end
  • .u-justify-content-center
  • .u-justify-content-between
  • .u-justify-content-around
  • .u-justify-content-sm-start
  • .u-justify-content-sm-end
  • .u-justify-content-sm-center
  • .u-justify-content-sm-between
  • .u-justify-content-sm-around
  • .u-justify-content-md-start
  • .u-justify-content-md-end
  • .u-justify-content-md-center
  • .u-justify-content-md-between
  • .u-justify-content-md-around
  • .u-justify-content-lg-start
  • .u-justify-content-lg-end
  • .u-justify-content-lg-center
  • .u-justify-content-lg-between
  • .u-justify-content-lg-around

Align items

Use u-align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
HTML
<div class="d-flex u-align-items-start" style="height:60px;">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex u-align-items-end" style="height:60px;">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex u-align-items-center" style="height:60px;">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex u-align-items-baseline" style="height:60px;">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex u-align-items-stretch" style="height:60px;">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
</div>

Responsive variations also exist for u-align-items.

  • .u-align-items-start
  • .u-align-items-end
  • .u-align-items-center
  • .u-align-items-baseline
  • .u-align-items-stretch
  • .u-align-items-sm-start
  • .u-align-items-sm-end
  • .u-align-items-sm-center
  • .u-align-items-sm-baseline
  • .u-align-items-sm-stretch
  • .u-align-items-md-start
  • .u-align-items-md-end
  • .u-align-items-md-center
  • .u-align-items-md-baseline
  • .u-align-items-md-stretch
  • .u-align-items-lg-start
  • .u-align-items-lg-end
  • .u-align-items-lg-center
  • .u-align-items-lg-baseline
  • .u-align-items-lg-stretch

Align self

Use u-align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

Flex item 1
Aligned start
Flex item 3
Flex item 1
Aligned end
Flex item 3
Flex item 1
Aligned center
Flex item 3
Flex item 1
Aligned baseline
Flex item 3
Flex item 1
Aligned stretch
Flex item 3
HTML
<div class="d-flex" style="height:60px;">
  <div class="example-item">Flex item 1</div>
  <div class="example-item u-align-self-start">Aligned start</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex" style="height:60px;">
  <div class="example-item">Flex item 1</div>
  <div class="example-item u-align-self-end">Aligned end</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex" style="height:60px;">
  <div class="example-item">Flex item 1</div>
  <div class="example-item u-align-self-center">Aligned center</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex" style="height:60px;">
  <div class="example-item">Flex item 1</div>
  <div class="example-item u-align-self-baseline">Aligned baseline</div>
  <div class="example-item">Flex item 3</div>
</div>
<div class="d-flex" style="height:60px;">
  <div class="example-item">Flex item 1</div>
  <div class="example-item u-align-self-stretch">Aligned stretch</div>
  <div class="example-item">Flex item 3</div>
</div>

Responsive variations also exist for u-align-self.

  • .u-align-self-start
  • .u-align-self-end
  • .u-align-self-center
  • .u-align-self-baseline
  • .u-align-self-stretch
  • .u-align-self-sm-start
  • .u-align-self-sm-end
  • .u-align-self-sm-center
  • .u-align-self-sm-baseline
  • .u-align-self-sm-stretch
  • .u-align-self-md-start
  • .u-align-self-md-end
  • .u-align-self-md-center
  • .u-align-self-md-baseline
  • .u-align-self-md-stretch
  • .u-align-self-lg-start
  • .u-align-self-lg-end
  • .u-align-self-lg-center
  • .u-align-self-lg-baseline
  • .u-align-self-lg-stretch

Margins with justify-content

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.

Easily move all flex items to one side, but keep another on the opposite end by mixing justify-content with margin-right: auto or margin-left: auto.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
HTML
<div class="d-flex u-justify-content-end">
  <div class="example-item" style="margin-right: auto;">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
</div>
<div class="d-flex u-justify-content-start">
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item" style="margin-left: auto;">Flex item</div>
</div>

Margins with align-items

Similarly, move one flex item to the top or bottom of a container by mixing align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
HTML
<div class="d-flex u-align-items-start u-flex-column" style="height: 120px;">
  <div class="example-item" style="margin-bottom: auto;">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
</div>
<div class="d-flex u-align-items-end u-flex-column" style="height: 120px;">
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item" style="margin-top: auto;">Flex item</div>
</div>

Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .u-flex-nowrap, wrapping with .u-flex-wrap, or reverse wrapping with .u-flex-wrap-reverse.

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
HTML
<div class="d-flex u-flex-wrap">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
  <div class="example-item">Flex item 4</div>
  <div class="example-item">Flex item 5</div>
  <div class="example-item">Flex item 6</div>
  <div class="example-item">Flex item 7</div>
  <div class="example-item">Flex item 8</div>
  <div class="example-item">Flex item 9</div>
  <div class="example-item">Flex item 10</div>
  <div class="example-item">Flex item 11</div>
  <div class="example-item">Flex item 12</div>
  <div class="example-item">Flex item 13</div>
  <div class="example-item">Flex item 14</div>
  <div class="example-item">Flex item 15</div>
  <div class="example-item">Flex item 16</div>
  <div class="example-item">Flex item 17</div>
  <div class="example-item">Flex item 18</div>
  <div class="example-item">Flex item 19</div>
  <div class="example-item">Flex item 20</div>
</div>
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
HTML
<div class="d-flex u-flex-wrap-reverse">
  <div class="example-item">Flex item 1</div>
  <div class="example-item">Flex item 2</div>
  <div class="example-item">Flex item 3</div>
  <div class="example-item">Flex item 4</div>
  <div class="example-item">Flex item 5</div>
  <div class="example-item">Flex item 6</div>
  <div class="example-item">Flex item 7</div>
  <div class="example-item">Flex item 8</div>
  <div class="example-item">Flex item 9</div>
  <div class="example-item">Flex item 10</div>
  <div class="example-item">Flex item 11</div>
  <div class="example-item">Flex item 12</div>
  <div class="example-item">Flex item 13</div>
  <div class="example-item">Flex item 14</div>
  <div class="example-item">Flex item 15</div>
  <div class="example-item">Flex item 16</div>
  <div class="example-item">Flex item 17</div>
  <div class="example-item">Flex item 18</div>
  <div class="example-item">Flex item 19</div>
  <div class="example-item">Flex item 20</div>
</div>

Responsive variations also exist for u-flex-wrap.

  • .u-flex-nowrap
  • .u-flex-wrap
  • .u-flex-wrap-reverse
  • .u-flex-sm-nowrap
  • .u-flex-sm-wrap
  • .u-flex-sm-wrap-reverse
  • .u-flex-md-nowrap
  • .u-flex-md-wrap
  • .u-flex-md-wrap-reverse
  • .u-flex-lg-nowrap
  • .u-flex-lg-wrap
  • .u-flex-lg-wrap-reverse

Order

Change the visual order of specific flex items with a handful of u-order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed.

First flex item
Second flex item
Third flex item
HTML
<div class="d-flex u-flex-nowrap">
  <div class="u-flex-last example-item">First flex item</div>
  <div class="example-item">Second flex item</div>
  <div class="u-flex-first example-item">Third flex item</div>
</div>

Responsive variations also exist for order.

  • .u-order-first
  • .u-order-last
  • .u-order-unordered
  • .u-order-sm-first
  • .u-order-sm-last
  • .u-order-sm-unordered
  • .u-order-md-first
  • .u-order-md-last
  • .u-order-md-unordered
  • .u-order-lg-first
  • .u-order-lg-last
  • .u-order-lg-unordered

Align content

Use u-align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.

Heads up! This property has no affect on single rows of flex items.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
HTML
<div class="d-flex u-align-content-start u-flex-wrap" style="height: 200px">
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
HTML
<div class="d-flex u-align-content-end u-flex-wrap" style="height: 200px">
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
HTML
<div class="d-flex u-align-content-center u-flex-wrap" style="height: 200px">
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
HTML
<div class="d-flex u-align-content-between u-flex-wrap" style="height: 200px">
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
HTML
<div class="d-flex u-align-content-around u-flex-wrap" style="height: 200px">
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
HTML
<div class="d-flex u-align-content-stretch u-flex-wrap" style="height: 200px">
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
  <div class="example-item">Flex item</div>
</div>

Responsive variations also exist for u-align-content.

  • .u-align-content-start
  • .u-align-content-end
  • .u-align-content-center
  • .u-align-content-around
  • .u-align-content-stretch
  • .u-align-content-sm-start
  • .u-align-content-sm-end
  • .u-align-content-sm-center
  • .u-align-content-sm-around
  • .u-align-content-sm-stretch
  • .u-align-content-md-start
  • .u-align-content-md-end
  • .u-align-content-md-center
  • .u-align-content-md-around
  • .u-align-content-md-stretch
  • .u-align-content-lg-start
  • .u-align-content-lg-end
  • .u-align-content-lg-center
  • .u-align-content-lg-around
  • .u-align-content-lg-stretch

Align text

Use u-text-align utilities on flexbox containers to align flex item text. Choose from left (browser default), right, or center.

Flex item
Flex item
Flex item
HTML
<div class="d-flex u-flex-column">
  <div class="example-item u-text-align-left">Flex item</div>
</div>
<div class="d-flex u-flex-column">
  <div class="example-item u-text-align-center">Flex item</div>
</div>
<div class="d-flex u-flex-column">
  <div class="example-item u-text-align-right">Flex item</div>
</div>

Responsive variations also exist for u-text-align.

  • .u-text-align-left
  • .u-text-align-center
  • .u-text-align-right
  • .u-text-align-sm-left
  • .u-text-align-sm-center
  • .u-text-align-sm-right
  • .u-text-align-md-left
  • .u-text-align-md-center
  • .u-text-align-md-right
  • .u-text-align-lg-left
  • .u-text-align-lg-center
  • .u-text-align-lg-right

▲ TOP