Bootstrap helper and utilities classes

Borders

Additive Borders

Subtractive Borders

Border color

Border-radius

Example rounded image75x75Example top rounded image75x75Example right rounded image75x75Example bottom rounded image75x75Example left rounded image75x75Completely round image75x75Rounded pill image150x75Example non-rounded image (overrides rounding applied elsewhere)75x75

Border-radius Sizes

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

Example small rounded image75x75Example large rounded image75x75

Overflow

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
This is an example of using .overflow-hidden on an element with set width and height dimensions.

Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Horizontal centering Spacing

Centered element

Negative margin

In CSS, margin properties can utilize negative values (padding cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 1, 2, 3, 4, 5). These utilities are ideal for customizing grid column gutters across breakpoints.

The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here’s an example class that’s the opposite of .mt-1:

Custom column padding
Custom column padding

Stretched link

Add .stretched-link to a link to make its containing block clickable via a ::after pseudo element. In most cases, this means that an element with position: relative; that contains a link with the .stretched-link class is clickable.

Cards have position: relative by default in Bootstrap, so in this case you can safely add the .stretched-link class to a link in the card without any other HTML changes.

Multiple links and tap targets are not recommended with stretched links. However, some position and z-index styles can help should this be required.

Card image cap
Card with stretched link

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Media objects do not have position: relative by default, so we need to add the .position-relative here to prevent the link from stretching outside the media object.

Generic placeholder image
Media with stretched link

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Go somewhere

Font weight and italics

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.