Bootstrap 4 Utilities J-Z Tweet

Overflow

You can use classes overflow-hidden or overflow-auto to quickly define how the contents overflows from an HTML element. You must define the element's height though.

<div class="content overflow-hidden"></div>

Position

Bootstrap 4 also offers classes for positioning of an HTML element quickly. You can use any of the classes listed below to define positioning of an element.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>

Screen Readers

You can use class sr-only to display some content only for screen readers. You can also use class sr-only-focusable with the sr-only class to make contents appear while on focus.

Shadows

Bootstrap 4 also offers utility classes to add or remove box shadows to/from an HTML element which can be used with responsive variants too.

<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Larger shadow</div>

Result

Sizing

Bootstrap 4 also offers classes to define width and height of an HTML element quickly and easily. Available classes to define width are as follows.

• w-25 - 25% width of the parent container
• w-50 - 50% width of the parent container
• w-75 - 75% width of the parent container
• w-100 - 100% width of the parent container
• w-auto - auto width of the parent container

Available classes to define height are as follows.

• h-25 - 25% height of the parent container
• h-50 - 50% height of the parent container
• h-75 - 75% height of the parent container
• h-100 - 105% height of the parent container
• h-auto - auto height of the parent container

Max Width and Max Height

You can also define the max width or max height of an HTML element with classes mw-100 and mh-100.

Width and Height Relative to Viewport

You can also use utilities to set the width and height of any HTML element relative to the viewport.

min-vw-100 - minimum viewport width 100%

min-vh-100 - minimum viewport height 100%

vw-100 - viewport width 100%

vh-100 - viewport height 100%

Spacing

Bootstrap 4 includes a wide range of margin and padding utility classes to define an element’s appearance. All of them support their responsive variants from xs to xl too where the spacing is the multiple of 1rem which the default font size of the document.

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

Property Options are as follows.

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

Options for sides are as follows.

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

Options for the spacing size are as follows.

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

Negative Margin

You can also add negative margin using class format {property}{sides}-n{size} or {property}{sides}-{breakpoint}-n{size}.

Horizontally Centered Element

You can use class mx-auto to center an HTML element horizontally.

Examples

<div class="mt-0"></div>
<div class="my-3"></div>
<div class="px-2"></div>
<div class="pb-5"></div>

Stretched Link

You can make an entire div clickable by adding class stretched-link to its child anchor tag. Position and z-index might need to be added sometimes to make it work properly.

<div class="w-50 p-2 shadow-sm bg-dark text-light">	
  <h4>Content Heading</h4>
  <p class="text-justify">Lorem ipsum dolor sit amet...</p>
  <a href="#" class="stretched-link">Read more »</a>
</div>  

Result

Text Utilities

Bootstrap 4 includes a wide range of text utility classes to define their alignment, wrapping, transform, weight, etc.

Text Alignment

You can align texts using bootstrap 4 easily with these utility classes.

• text-left
• text-center
• text-right
• text-justify

You can also use their responsive variants like text-sm-left.

Text Wrap

You can force or remove text wrapping using utility classes text-wrap or text-nowrap.

Text Truncate

You can also truncate a text adding ellipsis at the end using utility class text-truncate.

<div class="w-50 text-truncate">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
</div>

Result

Text Break

You can break a long word using class text-break in order to prevent it from breaking your layout.

<div class="w-25 text-break">
  bfkdaodfnaodbfadfasbdpfbksdbkfjbabdsfadbkfabk
</div>

Result

Text Transform

You can change the text capitalization using text transformation utilities as shown below.

<p class="text-lowercase">LOWERED SENTENCE CASE</p>
<p class="text-uppercase">uppered sentence case</p>
<p class="text-capitalize">capitalized text</p>

Result

LOWERED SENTENCE CASE

uppered sentence case

capitalized text

Font Weight, Italics and Monospace

You can use font utilities to change the weight of the text or italicize them. You can also set the font family to monospace using utility class.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text.</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.</p>
<p class="font-italic">Italic text.</p>

Result

Bold text.

Bolder weight text.

Normal weight text.

Light weight text.

Lighter weight text.

Italic text.

Text Monospace

You can change the font family of a text to monospace using class text-monospace.

<p class="text-monospace">This is in monospace</p>	

Result

This is in monospace

Reset Text Color

You can use class text-reset to reset the text color of any text or link.

Text Decoration

You can also use class text-decoration-none to remove text decoration from a link.

Visibility

You can set the visibility of the element using classes visible or invisible easily with bootstrap 4.