Utilities for layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.

Display

How it works

Change the value of the display property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.

Notation

Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

The display values can be altered by changing the $displays variable and recompiling the SCSS.

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.

Examples

d-inline
d-inline



 
 




<div class="app">
  <div class="row">
    <div class="col-12">
      <div class="d-inline p-2 bg-primary text-white">d-inline</div>
      <div class="d-inline p-2 bg-dark text-white">d-inline</div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8

d-block d-block



 
 




<div class="app">
  <div class="row">
    <div class="col-12">
      <span class="d-block p-2 bg-primary text-white">d-block</span>
      <span class="d-block p-2 bg-dark text-white">d-block</span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8

Hiding elements

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block

hide on screens wider than lg
hide on screens smaller than lg



 
 




<div class="app">
  <div class="row">
    <div class="col-12">
      <div class="d-lg-none">hide on screens wider than lg</div>
      <div class="d-none d-lg-block">hide on screens smaller than lg</div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8

Display in print

Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

The print and display classes can be combined.

Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print



 
 
 




<div class="app">
  <div class="row">
    <div class="col-12">
      <div class="d-print-none">Screen Only (Hide on print only)</div>
      <div class="d-none d-print-block">Print Only (Hide on screen only)</div>
      <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Bootstraps flexbox utilities are included, but we recommend using the grid for most use-cases.

External documentation

You can read Bootstraps documentation for flexbox here

Sizing

Relative to the parent

Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<div class="app">
  <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
  <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
  <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
  <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
  <div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
</div>
1
2
3
4
5
6
7

Height 25%
Height 50%
Height 75%
Height 100%
Height auto
<div class="app">
  <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
    <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
    <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
    <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
    <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
    <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

Max-height 100%
<div class="app">
  <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
    <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
  </div>
</div>
1
2
3
4
5

Relative to the viewport

You can also use utilities to set the width and height relative to the viewport.

<div class="app">
  <div class="min-vw-100">Min-width 100vw</div>
  <div class="min-vh-100">Min-height 100vh</div>
  <div class="vw-100">Width 100vw</div>
  <div class="vh-100">Height 100vh</div>
</div>
1
2
3
4
5
6

Spacing

How it works

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

Notation

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to 1 rem * .25
  • 2 - (by default) for classes that set the margin or padding to 1 rem * .5
  • 3 - (by default) for classes that set the margin or padding to 1 rem
  • 4 - (by default) for classes that set the margin or padding to 1 rem * 1.5
  • 5 - (by default) for classes that set the margin or padding to 1 rem * 3
  • auto - for classes that set the margin to auto

Examples

Here are some representative examples of these classes:

Horizontal centering

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Centered element
<div class="app">
  <div class="p-3 border border-dark">
    <div class="mx-auto text-center p-3 w-50" style="background-color: rgba(86,61,124,.15);">
      Centered element
    </div>
  </div>
</div>
1
2
3
4
5
6
7

Text

Text alignment

Easily realign text to components with text alignment classes.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<div class="app">
  <p class="text-justify">
    Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
  </p>
</div>
1
2
3
4
5

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Center aligned text on viewports sized SM (small) or wider.

Center aligned text on viewports sized MD (medium) or wider.

Center aligned text on viewports sized LG (large) or wider.

Center aligned text on viewports sized XL (extra-large) or wider.

<div class="app">
  <p class="text-left">Left aligned text on all viewport sizes.</p>
  <p class="text-center">Center aligned text on all viewport sizes.</p>
  <p class="text-right">Right aligned text on all viewport sizes.</p>
  <p class="text-sm-center">Center aligned text on viewports sized SM (small) or wider.</p>
  <p class="text-md-center">Center aligned text on viewports sized MD (medium) or wider.</p>
  <p class="text-lg-center">Center aligned text on viewports sized LG (large) or wider.</p>
  <p class="text-xl-center">Center aligned text on viewports sized XL (extra-large) or wider.</p>
</div>
1
2
3
4
5
6
7
8
9

Text wrapping and overflow

Wrap text with a .text-wrap class.

This text should wrap.
<div class="app">
  <div class="badge badge-primary text-wrap" style="width: 6rem;">
    This text should wrap.
  </div>
</div>
1
2
3
4
5

Prevent text from wrapping with a .text-nowrap class.

This text should overflow the parent.
<div class="app">
  <div class="text-nowrap bg-primary" style="width: 8rem;">
    This text should overflow the parent.
  </div>
</div>
1
2
3
4
5

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.
<div class="app">
  <!-- Block level -->
  <div class="row">
    <div class="col-2 text-truncate">
      Praeterea iter est quasdam res quas ex communi.
    </div>
  </div>

  <!-- Inline level -->
  <span class="d-inline-block text-truncate" style="max-width: 150px;">
    Praeterea iter est quasdam res quas ex communi.
  </span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

Word break

Prevent long strings of text from breaking your components' layout by using .text-break to set overflow-wrap: break-word (and word-break: break-word for IE & Edge compatibility).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<div class="app">
  <p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
</div>
1
2
3

Text transform

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

CapiTaliZed text.

<div class="app">
  <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
    <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
  </div>
</div>
1
2
3
4
5

Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

Font weight and italics

Quickly change the weight (boldness) of text or italicize text.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

<div class="app">
  <p class="font-weight-bold">Bold text.</p>
  <p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
  <p class="font-weight-normal">Normal weight text.</p>
  <p class="font-weight-light">Light weight text.</p>
  <p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
  <p class="font-italic">Italic text.</p>
</div>
1
2
3
4
5
6
7
8

Reset color

Reset a text or link's color with .text-reset, so that it inherits the color from its parent.

Muted text with a reset link.

<div class="app">
  <p class="text-muted">
    Muted text with a <a href="#" class="text-reset">reset link</a>.
  </p>
</div>
1
2
3
4
5

Text decoration

Remove a text decoration with a .text-decoration-none class.