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

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:

Resolution tier class Resolution Display type Comments
d-none > 544px none Property defined by initial d-none class
- 545px - 767px none Property is carried over from initial d-none class
- 768px - 991px none Property is carried over from initial d-none class
d-md-block 992px - 1200px block Property defined by d-md-block class overrides previous properties
d-lg-none 1201px - 1600px none Property defined by d-lg-none class overrides previous properties
- 1601px+ none Property is carried over from d-lg-none class

Second element

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

Resolution tier class Resolution Display type Comments
d-none > 544px none Property defined by initial d-none class
d-xs-block 545px - 767px block Property defined by d-xs-block class overrides previous properties
- 768px - 991px block Property is carried over from d-xs-block class
- 992px - 1200px block Property is carried over from d-xs-block class
d-lg-none 1201px - 1600px none Property defined by d-lg-none class overrides previous properties
- 1601px+ none Property is carried over from d-lg-none class

Third element

Classes applied d-block d-xs-none:

Resolution tier class Resolution Display type Comments
d-block > 544px block Property defined by initial d-block class
d-xs-none 545px - 767px none Property defined by d-xs-none class overrides previous properties
- 768px - 991px none Property is carried over from d-xs-none class
- 992px - 1200px none Property is carried over from d-xs-none class
- 1201px - 1600px none Property is carried over from d-xs-none class
- 1601px+ none Property is carried over from d-xs-none class

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
flex-row
Flex item 1
Flex item 2
Flex item 3
flex-row-reverse
Flex item 1
Flex item 2
Flex item 3
flex-column
Flex item 1
Flex item 2
Flex item 3
flex-column-reverse
Flex item 1
Flex item 2
Flex item 3
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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


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
flex-nowrap
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-wrap
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-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
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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


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
justify-content-start
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
justify-content-end
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
justify-content-center
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
justify-content-between
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
justify-content-around
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


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
align-items-stretch
Flex item
Flex item
second line
Flex item
second line
third line

Flex item

Flex item
align-items-center
Flex item
Flex item
second line
Flex item
second line
third line

Flex item

Flex item
align-items-start
Flex item
Flex item
second line
Flex item
second line
third line

Flex item

Flex item
align-items-end
Flex item
Flex item
second line
Flex item
second line
third line

Flex item

Flex item
align-items-baseline
Flex item
Flex item
second line
Flex item
second line
third line

Flex item

Flex item
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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


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
align-items-stretch
Flex item
Flex item
second line
Flex item
second line
third line
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
second line
Flex item
Flex item
align-items-center
Flex item
Flex item
second line
Flex item
second line
third line
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
second line
Flex item
Flex item
align-items-start
Flex item
Flex item
second line
Flex item
second line
third line
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
second line
Flex item
Flex item
align-items-end
Flex item
Flex item
second line
Flex item
second line
third line
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
second line
Flex item
Flex item
align-items-between
Flex item
Flex item
second line
Flex item
second line
third line
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
second line
Flex item
Flex item
align-items-around
Flex item
Flex item
second line
Flex item
second line
third line
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
second line
Flex item
Flex item
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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


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
flex-0
flex-0
flex-0
flex-0
flex-1
flex-1
flex-1
flex-1 with more content
flex-1
flex-1
flex-1
flex-1
flex-1 with more content allows wrapping
flex-1-0 with more content does not allow its content to wrap
flex-1
flex-1
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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


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
Flex item
align-self-stretch
align-self-center
align-self-start
align-self-end

align-self-baseline

Flex item
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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


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.

If order classes are not applied to all sibling flex items inside a flex container, the first applied order class moves the item to the last position.

Code output
Flex item 1
order-4
Flex item 2
order-3
Flex item 3
order-1
Flex item 4
order-2
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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


Text alignment classes

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

Code output

This is a paragraph with left aligned text.

This is a paragraph with center aligned text.

This is a paragraph with right aligned text.

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.

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 text-last-center class, the last paragraph line text is center aligned.

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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


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

The text in this paragraph is right aligned up to 991px.

The text in this paragraph is center aligned from 992px and above.

The text in this paragraph is right aligned up to 544px and center aligned from 992px up to 1200px.

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
This text floats right.
This text floats left.
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>
It is good practice to place float element markup in the beginning of a container when combined with non-float content, to avoid browser rendering issues.

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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


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

This element is right aligned up to 991px.

This element is right aligned from 992px and above.

This element is right aligned up to 544px and left aligned from 992px up to 1200px.

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
  • x 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.

Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.


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

Element with large padding.

Element with medium padding.

Element with small padding.

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

Element with large horizontal-only padding.

Element with medium horizontal-only padding.

Element with small horizontal-only padding.

Element with large vertical-only padding.

Element with medium vertical-only padding.

Element with small vertical-only padding.

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

Box content

spacer-lg

Box content

spacer

Box content

spacer-md

Box content

spacer-sm

Box content

spacer-xs

Box content

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>
<...>