DEV Community

Cover image for Day 9 Bootstrap 5 Utilities
Brijesh Dobariya
Brijesh Dobariya

Posted on

Day 9 Bootstrap 5 Utilities

#bootstrap #tutorial

API

Bootstrap 5 API

The utility API is a Sass-based tool to generate utility classes.

Bootstrap utilities are generated with our utility API can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the official Sass docs to get started.

The $utilities map contains all our utilities and is later merged with your custom $utilities map, if present. The utility map contains a keyed list of utility groups which accept the following options:

• property: Name of the property, this can be a string or an array of strings (needed for eg. horizontal paddings or margins).

• responsive (optional): Boolean indicating if responsive classes need to be generated. false by default.

• rfs (optional): Variable to enable fluid rescaling. Have a look at the RFS page to find out how this works. false by default.

• class (optional): Variable to change the class name if you don’t want it to be the same as the property. In case you don’t provide the class key and property key is an array of strings, the class name will be the first element of the property array.

• state (optional): List of pseudo-class variants like :hover or :focus to generate for the utility. No default value.

• values: List of values, or a map if you don’t want the class name to be the same as the value. If null is used as map key, it isn’t compiled.

• print (optional): Boolean indicating if print classes need to be generated. false by default.

• rtl (optional): Boolean indicating if utility should be kept in RTL. true by default.

API explained

All utility variables are added to the $utilities variable within our _utilities.scss stylesheet. Each group of utilities looks something like this:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);
Enter fullscreen mode Exit fullscreen mode

Which outputs the following:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .50; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Enter fullscreen mode Exit fullscreen mode

Custom class prefix

Use the class option to change the class prefix used in the compiled CSS:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
Enter fullscreen mode Exit fullscreen mode

Output:

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .50; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
Enter fullscreen mode Exit fullscreen mode

Responsive utilities

Add the responsive boolean to generate responsive utilities (e.g., .opacity-md-25) across all breakpoints.

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
Enter fullscreen mode Exit fullscreen mode

Output :

opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .50; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0; }
  .opacity-sm-25 { opacity: .25; }
  .opacity-sm-50 { opacity: .50; }
  .opacity-sm-75 { opacity: .75; }
  .opacity-sm-100 { opacity: 1; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0; }
  .opacity-md-25 { opacity: .25; }
  .opacity-md-50 { opacity: .50; }
  .opacity-md-75 { opacity: .75; }
  .opacity-md-100 { opacity: 1; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0; }
  .opacity-lg-25 { opacity: .25; }
  .opacity-lg-50 { opacity: .50; }
  .opacity-lg-75 { opacity: .75; }
  .opacity-lg-100 { opacity: 1; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0; }
  .opacity-xl-25 { opacity: .25; }
  .opacity-xl-50 { opacity: .50; }
  .opacity-xl-75 { opacity: .75; }
  .opacity-xl-100 { opacity: 1; }
}

@media (min-width: 1200px) {
  .opacity-xxl-0 { opacity: 0; }
  .opacity-xxl-25 { opacity: .25; }
  .opacity-xxl-50 { opacity: .50; }
  .opacity-xxl-75 { opacity: .75; }
  .opacity-xxl-100 { opacity: 1; }
}
Enter fullscreen mode Exit fullscreen mode

Changing utilities

Override existing utilities by using the same key. For example, if you want additional responsive overflow utility classes, you can do this:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);
Enter fullscreen mode Exit fullscreen mode

Print utilities

Enabling the print option will also generate utility classes for print, which are only applied within the @media print { ... } media query.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );
Enter fullscreen mode Exit fullscreen mode

Output:

.opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; } @media print { .opacity-print-0
{ opacity: 0; } .opacity-print-25 { opacity: .25; } .opacity-print-50 { opacity: .5; }
.opacity-print-75 { opacity: .75; } .opacity-print-100 { opacity: 1; } }
Enter fullscreen mode Exit fullscreen mode

Using the API

Now that you're familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities.

Add utilities

New utilities can be added to the default $utilities map with a map-merge. For example, here's how to add a responsive cursor utility with three values.

$utilities: map-merge( $utilities, ( "cursor": ( property: cursor, class: cursor
responsive: true, values: auto pointer grab, ) ) );
Enter fullscreen mode Exit fullscreen mode

Modify utilities

Modify existing utilities in the default $utilities map with map-get and map-merge functions. In the example below, we're adding an additional value to the width utilities. Start with an initial map-merge and then specify which utility you want to modify. From there, fetch the nested "width" map with map-get to access and modify the utility's options and values.

$utilities: map-merge( $utilities, ( "width": map-merge( map-get($utilities, "width"), (
values: map-merge( map-get(map-get($utilities, "width"), "values"), (10: 10%), ), ), ),
) );
Enter fullscreen mode Exit fullscreen mode

Remove utilities

Remove any of the default utilities by setting the group key to null. For example, to remove all our width utilities, create a $utilities map-merge and add "width": null within.

$utilities: map-merge( $utilities, ( "width": null ) );
Enter fullscreen mode Exit fullscreen mode

Background

Convey meaning through background-color and add decoration with gradients.

Background color

Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use .text-* color utilities.

Alt Text

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
Enter fullscreen mode Exit fullscreen mode

Background gradient

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
Do you need a gradient in your custom CSS? Just add background-image: var(--bs-gradient);.

Alt Text

Border

Bootstrap 5 Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Basic examples

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Additive

Alt Text

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
Enter fullscreen mode Exit fullscreen mode

Subtractive

Alt Text

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-end-0"></span>
<span class="border-bottom-0"></span>
<span class="border-start-0"></span>
Enter fullscreen mode Exit fullscreen mode

Color

Change the border color using utilities built on our theme colors.

Alt Text

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Enter fullscreen mode Exit fullscreen mode

Border-radius

Add classes to an element to easily round its corners.

Alt Text

<img src="..." class="rounded" alt="..." />
<img src="..." class="rounded-top" alt="..." />
<img src="..." class="rounded-end" alt="..." />
<img src="..." class="rounded-bottom" alt="..." />
<img src="..." class="rounded-start" alt="..." />
<img src="..." class="rounded-circle" alt="..." />
<img src="..." class="rounded-pill" alt="..." />
<img src="..." class="rounded-0" alt="..." />
Enter fullscreen mode Exit fullscreen mode

Sizes

Use .rounded-lg or .rounded-sm for larger or smaller border-radius.

Alt Text

<img src="..." class="rounded-0" alt="..." />
<img src="..." class="rounded-1" alt="..." />
<img src="..." class="rounded-2" alt="..." />
<img src="..." class="rounded-3" alt="..." />
Enter fullscreen mode Exit fullscreen mode

Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Colors

Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.

Alt Text

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Enter fullscreen mode Exit fullscreen mode

Specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a

or more semantic element with the desired class.

Display

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

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 xxl, 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, xl, and xxl.
Where value is one of:

• none

• inline

• inline-block

• block

• grid

• 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 affect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on lg, xl, and xxl screens.

Examples

Alt Text

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

Alt Text

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

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,xxl}-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 .d-xxl-none will hide the element for all screen sizes except on medium and large devices.

Alt Text

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

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

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

[display in print]

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

Flex

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.

Enable flex behaviours

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.

Alt Text

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

Alt Text

<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

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

• .d-flex

• .d-inline-flex

• .d-sm-flex

• .d-sm-inline-flex

• .d-md-flex

• .d-md-inline-flex

• .d-lg-flex

• .d-lg-inline-flex

• .d-xl-flex

• .d-xl-inline-flex

• .d-xxl-flex

• .d-xxl-inline-flex

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 .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

Alt Text


<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

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

Alt Text

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Responsive variations also exist for flex-direction.

• .flex-row

• .flex-row-reverse

• .flex-column

• .flex-column-reverse

• .flex-sm-row

• .flex-sm-row-reverse

• .flex-sm-column

• .flex-sm-column-reverse

• .flex-md-row

• .flex-md-row-reverse

• .flex-md-column

• .flex-md-column-reverse

• .flex-lg-row

• .flex-lg-row-reverse

• .flex-lg-column

• .flex-lg-column-reverse

• .flex-xl-row

• .flex-xl-row-reverse

• .flex-xl-column

• .flex-xl-column-reverse

• .flex-xxl-row

• .flex-xxl-row-reverse

• .flex-xxl-column

• .flex-xxl-column-reverse

Justify content

Use 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, around, or evenly.

Alt Text

<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>
<div class="d-flex justify-content-evenly">...</div>

Responsive variations also exist for justify-content.

• .justify-content-start

• .justify-content-end

• .justify-content-center

• .justify-content-between

• .justify-content-around

• .justify-content-evenly

• .justify-content-sm-start

• .justify-content-sm-end

• .justify-content-sm-center

• .justify-content-sm-between

• .justify-content-sm-around

• .justify-content-sm-evenly

• .justify-content-md-start

• .justify-content-md-end

• .justify-content-md-center

• .justify-content-md-between

• .justify-content-md-around

• .justify-content-md-evenly

• .justify-content-lg-start

• .justify-content-lg-end

• .justify-content-lg-center

• .justify-content-lg-between

• .justify-content-lg-around

• .justify-content-lg-evenly

• .justify-content-xl-start

• .justify-content-xl-end

• .justify-content-xl-center

• .justify-content-xl-between

• .justify-content-xl-around

• .justify-content-xl-evenly

• .justify-content-xxl-start

• .justify-content-xxl-end

• .justify-content-xxl-center

• .justify-content-xxl-between

• .justify-content-xxl-around

• .justify-content-xxl-evenly

Align items

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

Alt Text

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

Align self

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

Alt Text

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Fill

Use the .flex-fill class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

Alt Text

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Grow and shrink

Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the .flex-grow-1 elements uses all available space it can, while allowing the remaining two flex items their necessary space.

Alt Text

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with .flex-shrink-1 is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with .w-100.

Alt Text

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

Auto margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.me-auto), and pushing two items to the left (.ms-auto).

Alt Text

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="me-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>

With align-items

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

Alt Text

<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Wrap

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

Alt Text

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

Alt Text

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

Alt Text

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

Order

Change the visual order of specific flex items with a handful of 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 from 0 to 5, add custom CSS for any additional values needed.

<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Align content

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

Alt Text

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Alt Text

<div class="d-flex align-content-end flex-wrap">...</div>

Alt Text

<div class="d-flex align-content-center flex-wrap">...</div>

Alt Text

<div class="d-flex align-content-between flex-wrap">...</div>

Alt Text

<div class="d-flex align-content-around flex-wrap">...</div>

Alt Text

<div class="d-flex align-content-stretch flex-wrap">...</div>

Media object

Looking to replicate the media object component from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.

Alt Text

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

And say you want to vertically center the content next to the image:

Alt Text

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Float

Toggle floats on any element, across any breakpoint, using our responsive float utilities.

Overview

These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. important is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.

Alt Text

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Responsive

Responsive variations also exist for each float value.

Alt Text

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Here are all the support classes:

• .float-start

• .float-end

• .float-none

• .float-sm-start

• .float-sm-end

• .float-sm-none

• .float-md-start

• .float-md-end

• .float-md-none

• .float-lg-start

• .float-lg-end

• .float-lg-none

• .float-xl-start

• .float-xl-end

• .float-xl-none

• .float-xxl-start

• .float-xxl-end

• .float-xxl-none

Interaction

Utility classes that change how users interact with contents of a website.

Text selection

Change the way in which the content is selected when the user interacts with it.

Alt Text

<p class="user-select-all">
  This paragraph will be entirely selected when clicked by the user.
</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">
  This paragraph will not be selectable when clicked by the user.
</p>

Pointer events

Bootstrap provides pe-none and pe-auto classes to prevent or add element interactions.

Alt Text

<p><a href="#" class="pe-none">This link</a> can not be clicked.</p>
<p>
  <a href="#" class="pe-auto">This link</a> can be clicked (this is default behaviour).
</p>
<p class="pe-none">
  <a href="#">This link</a> can not be clicked because the
  <code>pointer-events

Overflow

Use these shorthand utilities for quickly configuring how content overflows an element.

Alt Text

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

Using Sass variables, you may customize the overflow utilities by changing the $overflows variable in _variables.scss.

Shadow

Add or remove shadows to elements with box-shadow utilities.

Examples

While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

Alt Text

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>

Sizing

Easily make an element as wide or as tall with our width and height utilities.

Relative to the parent

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

Alt Text

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

Alt Text

<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, 0.1)"
  >
    Height 25%
  </div>
  <div
    class="h-50 d-inline-block"
    style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
  >
    Height 50%
  </div>
  <div
    class="h-75 d-inline-block"
    style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
  >
    Height 75%
  </div>
  <div
    class="h-100 d-inline-block"
    style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
  >
    Height 100%
  </div>
  <div
    class="h-auto d-inline-block"
    style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
  >
    Height auto
  </div>
</div>

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

Alt Text

...

Alt Text

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

Relative to the viewport

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

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

Top comments (0)

Read next

mike_andreuzza profile image

How to create a image gallery with Tailwind CSS and Alpinejs

Michael Andreuzza -

icarossio profile image

[Webinar] How to secure GraphQL

Antoine Carossio -

bytehide profile image

How to Use Intellicode in Visual Studio

ByteHide -

bytehide profile image

Gitlens Tutorial - Visual Studio Extension 2024

ByteHide -