Content

Content utility classes offer variety of ways to group or organize content using borders, box shadows, tables and opacity filters.

Border

The border utilities set borders and element radius with a default border color of gray-200. The border color can be changed by adding custom styles.

Class value	Breakpoint	Border style
`border-{breakpoint syntax}`	sm, md, lg, xl	border: 1px solid $base-border-gray
`border-{breakpoint syntax}-0`	sm, md, lg, xl	border: 0
`border-{breakpoint syntax}-x`	sm, md, lg, xl	border-right: 1px solid $base-border-gray border:-left: 1px solid $base-border-gray
`border-{breakpoint syntax}-y`	sm, md, lg, xl	border-top: 1px solid $base-border-gray border:-bottom: 1px solid $base-border-gray
`border-{breakpoint syntax}-top`	sm, md, lg, xl	border-top: 1px solid $base-border-gray
`border-{breakpoint syntax}-right`	sm, md, lg, xl	border-right: 1px solid $base-border-gray
`border-{breakpoint syntax}-bottom`	sm, md, lg, xl	border-bottom: 1px solid $base-border-gray
`border-{breakpoint syntax}-left`	sm, md, lg, xl	border-left: 1px solid $base-border-gray
`border-{breakpoint syntax}-top-0`	sm, md, lg, xl	border-top: 0
`border-{breakpoint syntax}-right-0`	sm, md, lg, xl	border-right: 0
`border-{breakpoint syntax}-bottom-0`	sm, md, lg, xl	border-bottom: 0
`border-{breakpoint syntax}-left-0`	sm, md, lg, xl	border-left: 0

border-sm

border-sm-x

border-sm-y

border-sm-top

border-sm-right

border-sm-bottom

border-sm-left

<div class="border-sm-x">...</div>

Fixed Border

Class value	Border style
`border`	border: 1px solid $base-border-gray
`border-0`	border: 0
`border-x`	border-right: 1px solid $base-border-gray border:-left: 1px solid $base-border-gray
`border-y`	border-top: 1px solid $base-border-gray border:-bottom: 1px solid $base-border-gray
`border-top`	border-top: 1px solid $base-border-gray
`border-right`	border-right: 1px solid $base-border-gray
`border-bottom`	border-bottom: 1px solid $base-border-gray
`border-left`	border-left: 1px solid $base-border-gray
`border-top-0`	border-top: 0
`border-right-0`	border-right: 0
`border-bottom-0`	border-bottom: 0
`border-left-0`	border-left: 0

Divider

Divider utility classes add a border between columns and rows. Dividers require more than one element.

Class value	Sets border
`divider-col`	right
`divider-row`	bottom

divider-col

<div class="d-flex divider-col">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

divider-row

<div class="d-grid divider-row">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Border Radius

Border radius utilities rounds the corner of an element's outer border edge.

Class value	Breakpoint	Radius length
`rounded-{breakpoint syntax}`	sm, md, lg, xl	8px
`rounded-{breakpoint syntax}-0`	sm, md, lg, xl	0px
`rounded-{breakpoint syntax}-1`	sm, md, lg, xl	2px
`rounded-{breakpoint syntax}-2`	sm, md, lg, xl	4px
`rounded-{breakpoint syntax}-3`	sm, md, lg, xl	8px
`rounded-{breakpoint syntax}-4`	sm, md, lg, xl	16px
`rounded-{breakpoint syntax}-5`	sm, md, lg, xl	24px
`rounded`	-	8px
`rounded-0`	-	0px
`rounded-1`	-	2px
`rounded-2`	-	4px
`rounded-3`	-	8px
`rounded-4`	-	16px
`rounded-5`	-	24px

rounded-0

rounded-1

rounded-2

rounded-3

rounded-4

rounded-5

<div class="rounded-4">...</div>

Rounded Edges

Choose which edge of an element to set the border radius.

Class value	Breakpoint	Edge	Radius length
`rounded-{breakpoint}-{edge}-0`	sm, md, lg, xl	top, right, bottom, left	0px
`rounded-{breakpoint}-{edge}-1`	sm, md, lg, xl	top, right, bottom, left	2px
`rounded-{breakpoint}-{edge}-2`	sm, md, lg, xl	top, right, bottom, left	4px
`rounded-{breakpoint}-{edge}-3`	sm, md, lg, xl	top, right, bottom, left	8px
`rounded-{breakpoint}-{edge}-4`	sm, md, lg, xl	top, right, bottom, left	16px
`rounded-{breakpoint}-{edge}-5`	-	top, right, bottom, left	24px
`rounded-{edge}-0`	-	top, right, bottom, left	0px
`rounded-{edge}-1`	-	top, right, bottom, left	2px
`rounded-{edge}-2`	-	top, right, bottom, left	4px
`rounded-{edge}-3`	-	top, right, bottom, left	8px
`rounded-{edge}-4`	-	top, right, bottom, left	16px
`rounded-{edge}-5`	-	top, right, bottom, left	24px

rounded-top-4

rounded-bottom-4

rounded-left-4

rounded-right-4

<div class="rounded-top-4">...</div>

Rounded Full

Create circles and pill shapes using the full round utilities.

Class value	Border radius
`circle`	border-radius: 50%
`rounded-full`	border-radius: 1000px

circle

rounded-full

<div class="circle" style="height: 64px; width: 64px;">...</div>
<div class="rounded-full">...</div>

Background

Background Position

Class value	Background position
`bg-pos-top`	top
`bg-pos-right`	right
`bg-pos-bottom`	bottom
`bg-pos-left`	left
`bg-pos-center`	center

bg-pos-left

bg-pos-right

<div class="bg-pos-left">...</div>

Background Size

Class value	Background size
`bg-size-contain`	contain
`bg-size-cover`	cover
`bg-size-auto`	auto
`bg-size-height-full`	100% height / auto width
`bg-size-width-full`	100% width / auto height

bg-size-cover

bg-size-auto

<div class="bg-size-cover">...</div>

Background Repeat

Class value	Background repeat
`bg-repeat`	repeat
`bg-repeat-0`	no repeat
`bg-repeat-x`	repeat horizontally
`bg-repeat-y`	repeat vertically

bg-repeat-x

<div class="bg-repeat-x">...</div>

Background Color Opacity

Class value	Color	Opacity scale
`bg-opacity-white-{amount}`	white	0-9
`bg-opacity-black-{amount}`	black	0-9

bg-opacity-white-2

bg-opacity-white-5

bg-opacity-white-9

bg-opacity-black-2

bg-opacity-black-5

bg-opacity-black-9

<div class="bg-opacity-white-5">...</div>

Table

Class value	Property style
`table-border-collapse`	border-collapse: collapse
`table-auto`	table-layout: auto
`table-fixed`	table-layout: fixed

Not a collapsed border
A space separate the table cells.

Collapsed border
The border around each table cell collapse into a single border.

<table class="table-border-collapse">
    ...
</table>

Filter

Opacity

Responsive opacity scales from 0 (0% opacity) to 9 (90% opacity).

Class value	Breakpoint	Opacity scale
`opacity-{breakpoint}-{amount}`	sm, md, lg, xl	0-9
`opacity-{breakpoint}-none`	sm, md, lg, xl	1
`opacity-{amount}`	-	0-9
`opacity-none`	-	1

opacity-sm-2

opacity-sm-4

opacity-sm-8

opacity-sm-none

<div class="opacity-sm-4">...</div>

Blur

Blur filter works best when combined with a background color opacity.

Class value	Blur by
`blur-0`	none
`blur-1`	2px
`blur-2`	4px
`blur-3`	8px
`blur-4`	16px
`blur-5`	24px
`blur-6`	32px
`blur-7`	40px
`blur-8`	48px
`blur-9`	64px

blur-2
bg-opacity-white-5

<div class="blur-2 bg-opacity-white-5">...</div>

Box Shadow

Class value	Box shadow
`box-shadow-0`	none
`box-shadow-1`	0 1px 4px -1px rgba(76, 76, 76, 0.24)
`box-shadow-2`	0 2px 6px 0 rgba(76, 76, 76, 0.24)
`box-shadow-3`	0 3px 8px 1px rgba(76, 76, 76, 0.24)

box-shadow-1

box-shadow-2

box-shadow-3

<div class="box-shadow-2">...</div>

Visually Hide

Class value	Hides element
`display-visually-hide`	from view but accessible to screen reader
`display-hide`	from view and screen reader

In this section

Border Background Table Filter Box Shadow Visually Hide