Utilities

Utilities have been defined to help developers apply commonly used properties to elements.

Responsive utility classes accelerate changes of element properties at different resolution tiers.

• Display classes
• Responsive display classes
  • Responsive display classes example
• Flexbox classes
  • Flexbox direction
  • Flexbox wrap
  • Flexbox justify content
  • Flexbox align items
  • Flexbox align content
  • Flex classes
  • Flex align self
  • Flex order
• Text alignment classes
  • Responsive text alignment classes
  • Responsive text alignment classes example
• Float alignment classes
  • Responsive float alignment classes
  • Responsive float alignment classes example
• Responsive spacing classes
• Adaptive padding classes
• Block spacers

---

Display classes

The following display classes have also been defined to apply display properties to various elements. Vendor prefixes and additional syntax added when necessary.

Class	Display property
.d-none	display: none;
.d-block	display: block;
.d-inline-block	display: inline-block;
.d-inline	display: inline;
.d-table	display: table;
.d-table-header-group	display: table-header-group;
.d-table-row-group	display: table-row-group;
.d-table-row	display: table-row;
.d-table-cell	display: table-cell;
.d-flex	display: -webkit-flex; display: flex;
.d-inline-flex	display: -webkit-inline-flex; display: inline-flex;

---

Responsive display classes

Display classes can be combined with responsive tier affixes as d-{affix}-{type}, where affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where type is one of the display types described in the table above. The display classes defined above also cover for the xxs affix which is not defined, due to the override logic of responsive classes explained below.

Each property defined by a display class at a specific resolution tier is carried over to the next one, unless it is overridden by another property at a higher resolution tier.

By combining responsive d-{affix}-none classes with other d-{affix}-{type} classes, elements can be toggled at different resolution tiers.

---

Responsive display classes example

In the following example:

• The first element is only visible on the md screen resolution tier
• The second element is visible on the xs, sm, md screen resolution tiers
• The third element is visible only on the xxs resolution tiers

HTML Markup

Copy<div class="d-none d-md-block d-lg-none">This element is visible only on the md screen resolution tier.</div>
<div class="d-none d-xs-block d-lg-none">This element is visible on the xs,sm and md screen resolution tiers.</div>
<div class="d-block d-xs-none">This element is visible only on the xxs screen resolution tier.</div>

A detailed explanation of the behavior of each element:

First element

Classes applied d-none d-md-block d-lg-none:

Second element

Classes applied d-none d-xs-block d-lg-none:

Third element

Classes applied d-block d-xs-none:

---

Flexbox classes

Flexbox classes simplify aligning and reordering elements inside a flex container.

Most flexbox classes are applied directly to the flex container, with the exception of a few that are applied to the contained items.

---

Flexbox direction

Flexbox direction classes are used to specify the direction of the item inside the flex container and are defined as flex-{modifier} where modifier can be either row, row-reverse, column or column-reverse.

Code output

HTML Markup

Copy<div class="d-flex flex-row">...</div>
<div class="d-flex flex-row-reverse">...</div>
<div class="d-flex flex-column">...</div>
<div class="d-flex flex-column-reverse">...</div>

---

Responsive flexbox direction classes

Responsive flexbox direction classes can be used to change item distribution on the applied resolution tier affix.

They follow the same behavior with the responsive display classes as explained above and are defined as flex-{affix}-{modifier} where affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where modifier is either row, row-reverse, column or column-reverse.

---

Flexbox wrap

Flexbox wrap classes are used to specify wether the items of the flex container will wrap to a different line and are defined as flex-{modifier}:

• flex-nowrap constrains item on one line. If the items' total width exceeds the flexbox container width, they overflow the container.
• flex-wrap allows items to wrap to a new line.
• flex-wrap-reverse allows items to wrap to a new line that preceeds the initial line.

Code output

HTML Markup

Copy<div class="d-flex flex-nowrap">...</div>
<div class="d-flex flex-wrap">...</div>
<div class="d-flex flex-wrap-reverse">...</div>

---

Responsive flexbox wrap classes

Responsive flexbox wrap classes can be used to change item distribution on the applied resolution tier affix.

They follow the same behavior with the responsive display classes as explained above and are defined as flex-{affix}-{modifier} where affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where modifier is either row, nowrap, wrap or wrap-reverse.

---

Flexbox justify content

Flexbox justify classes are used to change the horizontal distribution of the items inside the flex container and defined as justify-content-{modifier}:

• justify-content-start applies the default behavior, which is all items are distributed from the left side of the container.
• justify-content-end pushes all items towards the end of the container.
• justify-content-centers centers all items in the middle of the container.
• justify-content-between distributes evenly all items inside the full width of the container with spaces between the items starting from the edges of the containre.
• justify-content-around distributes evenly all items inside the full width of the container with spaces around the items.

Code output

HTML Markup

Copy<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

---

Responsive flexbox justify content classes

Responsive flexbox justify content classes can be used to change item distribution on the applied resolution tier affix.

They follow the same behavior with the responsive display classes as explained above and are defined as justify-content-{affix}-{modifier} where affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where modifier is either start, end, center, between or around.

---

Flexbox align items

Flexbox align item classes are used to change the vertical alignment of the items inside a flex container and are defined as align-content-{modifier}:

• align-items-stretch stretches items to have equal heights, based on the child with the biggest height.
• align-items-center centers items vertically.
• align-items-start aligns items to the top of the flex container.
• align-items-end aligns items to the bottom of the flex container.
• align-items-baseline aligns items to the baseline of the flex container.

Code output

HTML Markup

Copy<div class="d-flex align-items-stretch">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-baseline">...</div>

---

Responsive flexbox align items classes

Responsive flexbox align items classes can be used to change item distribution on the applied resolution tier affix.

They follow the same behavior with the responsive display classes as explained above and are defined as align-items-{affix}-{modifier} where affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where modifier is either stretch, center, start, end or baseline.

---

Flexbox align content

Flexbox align content classes are used to change the vertical alignment of the rows inside a flex container; essentially this means that there must be wrapped content inside the flex container for the classes to be meaningful. Align content classes are defined as align-content-{modifier}:

• align-content-stretch stretches each row so that its items have equal heights, based on the child with the biggest height, so that rows occupy the full flex container height.
• align-content-center centers row content vertically.
• align-content-start aligns row content to the top of the flex container.
• align-content-end aligns row content to the bottom of the flex container.
• align-content-between evenly aligns row content based on the height of the flex container with even spaces between rows.
• align-content-around evenly aligns row content based on the height of the flex container with even spaces around rows.

Code output

HTML Markup

Copy<div class="d-flex flex-wrap align-content-stretch">...</div>
<div class="d-flex flex-wrap align-content-center">...</div>
<div class="d-flex flex-wrap align-content-start">...</div>
<div class="d-flex flex-wrap align-content-end">...</div>
<div class="d-flex flex-wrap align-content-between">...</div>
<div class="d-flex flex-wrap align-content-around">...</div>

---

Responsive flexbox align content classes

Responsive flexbox align content classes can be used to change item distribution on the applied resolution tier affix.

They follow the same behavior with the responsive display classes as explained above and are defined as align-content-{affix}-{modifier} where affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where modifier is either stretch, center, start, end, between or around.

---

Flex classes

The flex classes are applied on the flex container items as opposed to all the classes described above that were applied on the flex container. Sibling flex items are allocated different flex container space based on combination of flex classes.

• flex-0 forces an item not to grow or shrink when combined with a fixed width.
• flex-1 stretches an item to occupy the full flex container width. When applied to several sibling items, then the width of the flex container is divided equally to all items with the same content, otherwise the space is distributed proportionately based on item content.
• flex-1-0 behaves like flex-1, but only allows an item to shrink down to its content width without allowing it to wrap often leading to flex container overflow.

Code output

HTML Markup

Copy<div class="d-flex flex-wrap">
  <div class="flex-1">flex-1</div>
  <div class="flex-1">flex-0</div>
  <div class="flex-1">flex-1-0</div>
</div>

---

Responsive flex classes

Responsive flex classes can be used to change item behavior on the applied resolution tier affix and are defined as flex-{affix}-{modifier} where affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where modifier is either 1, 0 or 1-0.

---

Flex align self

The align-self class is applied directly on a flex item and allow it to be individually aligned vertically on the flex row, essentially overriding any align-items classes applied on the flex container.

• align-self-stretch stretches the item to consume the full flex row height.
• align-self-center aligns the item at the center of the flex row.
• align-self-start aligns the item at the top of the flex row.
• align-self-end aligns the item at the bottom of the flex row.
• align-self-baseline aligns the item at the baseline of other items in the flex row.

Code output

HTML Markup

Copy<div class="d-flex flex-wrap">
  <div class="align-self-stretch">align-self-stretch</div>
  <div class="align-self-center">align-self-center</div>
  <div class="align-self-start">align-self-start</div>
  <div class="align-self-end">align-self-end</div>
  <div class="align-self-baseline">align-self-baseline</div>
</div>

---

Responsive align self

Responsive align self classes can be used to change item vertical alignment on the applied resolution tier affix and are defined as align-self-{affix}-{modifier} where affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where modifier is either stretch, center, start, end or baseline.

---

Flex order

Flex items can be reordered by using order classes defined as order-{number} where number is a number from 1 to 12 - based on the 12 column nature of the grid.

Code output

HTML Markup

Copy<div class="d-flex">
    <div class="box p-h order-4">Flex item 1<br>order-4</div>
    <div class="box p-h order-3">Flex item 2<br>order-3</div>
    <div class="box p-h order-1">Flex item 3<br>order-1</div>
    <div class="box p-h order-2">Flex item 4<br>order-2</div>
  </div>

---

Responsive order classes

Responsive order classes can be used to change item order on the applied resolution tier affix and are defined as order-{affix}-{number} where affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where number a number from 1 to 12.

---

Text alignment classes

Text can be easily aligned by using the following text alignment classes.

Code output

HTML Markup

Copy<p class="text-left">This is a paragraph with left aligned text.</p>
<p class="text-center">This is a paragraph with center aligned text.</p>
<p class="text-right">This is a paragraph with right aligned text.</p>
<p class="text-justify">This is a really long paragraph that contains a lof of text, so it has to wrap onto a second line. The text is justified along the edges of the paragraph block container.</p>
<p class="text-justify text-last-center">This is a really long paragraph that contains a lof of text, so it has to wrap onto a second line. The text is justified along the edges of the paragraph block container. By also applying the <code class="code-inline">text-last-center</code> class, the last paragraph line text is center aligned.</p>

---

Responsive text alignment classes

Responsive text alignment classes can be used to change the text alignment depending on the applied resolution tier affix.

They follow the same behavior with the responsive display classes as explained above and are defined as text-{affix}-{modifier} where affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where modifier is either justified, center, left or right.

An additional responsive text alignment class, that holds only the center modifier, defined as text-{affix}-last-center is applied to set the alignment of the last line of a paragraph to centered, on the specific resolution tier.

---

Responsive text alignment classes example

In the following example:

• In the first paragraph the text is right aligned up to the md screen resolution tier
• In the second paragraph the text is center aligned from the md screen resolution tier and above
• In the third paragraph the text is right aligned at the xxs and center aligned at the lg screen resolution tiers

Notice the clearfix element that clears the floats.

Code output

HTML Markup

Copy<p class="text-right text-md-left">The text in this paragraph is right aligned up to 991px.</p>
<p class="text-md-right">The text in this paragraph is center aligned from 992px and above.</p>
<p class="text-right text-xs-left text-md-center text-lg-left">The text in this paragraph is right aligned up to 544px and center aligned from 992px up to 1200px.</p>

---

Float alignment classes

Elements can be aligned left or right by applying classes float-left or float-right respectively.

Float elements are part of the flow of a web document, but they can still overlap other content until their float properties are cleared.The clearfix class has been defined for this purpose.

Code output

HTML Markup

Copy<div class="float-right">This text floats right.</div>
<div class="float-left">This text floats left.</div>
<div class="clearfix"></div>

---

Responsive float alignment classes

Responsive float alignment classes can be used to change element float depending on the applied resolution tier affix.

The responsive float alignment classes are defined as float-{affix}-{modifier} where affix is one of the 5 responsive tier affixes xxs, xs, sm, md, lg or xl and where modifier is either left, right or none.

---

Responsive float alignment classes example

In the following example:

• The first element is aligned up to the md screen resolution tier
• The second element is aligned from the md screen resolution tier and above
• The third element is aligned at the xxs and lg screen resolution tiers only

Notice the clearfix element at the end that clears the floats.

Code output

HTML Markup

Copy<p class="float-right float-md-none">This element is right aligned up to 991px.</p>
<div class="clearfix"></div>
<p class="float-md-right">This element is right aligned from 992px and above.</p>
<div class="clearfix"></div>
<p class="float-right float-xs-none float-md-left float-lg-none">This element is right aligned up to 544px and left aligned from 992px up to 1200px.</p>
<div class="clearfix"></div>

---

Responsive spacing classes

Responsive spacing classes and their responsive counterparts accelerate development by providing predefined classes for spacing using margins and paddings.

They follow the same behavior with the responsive display classes as explained above and are defined as {property}{direction}-{affix}-{value}.

The property can be either m for margin or m for padding.

The direction can be:

• Empty for property application on all sides
• x for property application on the x-axis only
• y for property application on the y-axis only
• t for property application on the top side only
• r for property application on the right side only
• b for property application on the bottom side only
• l for property application on the left side only

The affix is one of the 5 responsive tier affixes xs, sm, md, lg or xl and where modifier is either justified, center, left or right.

The value can be either 0, 0.5, 1, 2 or 3 in rem units.

The value can also be set to auto for margin classes.

---

Adaptive padding classes

Adaptive padding classes have been defined to create consistent white-spacing in boxes or containers that respond to different screen sizes, so at small resolution tiers, white-spacing is reduced accordingly based on the applied class.

Three different padding variations are available: pad-lg, pad-md and pad-sm.

Code output

HTML Markup

Copy<div class="box pad-lg">
  <p>Element with large padding.</p>
</div>

<div class="box pad-md">
  <p>Element with medium padding.</p>
</div>

<div class="box pad-sm">
  <p>Element with small padding.</p>
</div>

Additional adaptive padding classes create padding in one direction only - pad-lg-sides, pad-md-sides and pad-sm-sides for horizontal-only padding and pad-lg-tb, pad-md-tb and pad-sm-tb for vertical-only padding (tb stands for top-bottom). The classes also respond to screen resolution changes.

Code output

HTML Markup

Copy<div class="box pad-lg-sides">
  <p>Element with large horizontal-only padding.</p>
</div>

<div class="box pad-md-sides">
  <p>Element with medium horizontal-only padding.</p>
</div>

<div class="box pad-sm-sides">
  <p>Element with small horizontal-only padding.</p>
</div>

<div class="box pad-lg-tb">
  <p>Element with large vertical-only padding.</p>
</div>

<div class="box pad-md-tb">
  <p>Element with medium vertical-only padding.</p>
</div>

<div class="box pad-sm-tb">
<p>Element with small vertical-only padding.</p>
</div>

---

Block spacers

Block spasers are essentially empty div elements with prespecified height values to create white-spacing between block elements. Predefined classes spacer-lg, spacer, spacer-md, spacer-sm and spacer-xs are available.

Although element spacing classes can be applied directly on elements to adjust their top and bottom margin, it is recommended to be used on their own as spacer elements. The following example shows the differences in spacing when using each spacer class.

Code output

HTML Markup

Copy<...>
  <div class="spacer-lg"></div>
<...>
  <div class="spacer"></div>
<...>
  <div class="spacer-md"></div>
<...>
  <div class="spacer-sm"></div>
<...>
  <div class="spacer-xs"></div>
<...>