Bootstrap 4 Utilities

Bootstrap 4 utilities also known as helper classes that are used to add more style to the components. Utilities are used to make the website or webpage more stylish or elegant. It also makes the responsive elements.

Borders – Borders classes are used to style the border of the elements such as add or remove the border, adjust border-radius, etc.

Example

Output

Bootstrap Utilities

Float and Clearfix – Float class is used to set the position of the element to the left or right. The .float-right class is used to float the element to the right and .float-left class is used to float the element to the left. Clearfix is used to prevent the collapsing between parent and child element. The .clearfix class is used to remove float.

Example

Output

Bootstrap Utilities

Responsive Float – Bootstrap 4 offers helper classes to float an element to the left or right according to the screen size with responsive behavior. The .float-*-right class is used to float the element to the right. You do not need to add the .float-*-left class because the default position of the element is left of the viewport or screen.

Where, * = sm, md,  lg, and xl.

Example

Output

Bootstrap Utilities

Center align – You can also place your content or element in the center horizontally of the viewport or screen. Add the .mx-auto class to make the content center aligned.

Example

Output

Bootstrap Utilities

Width – Bootstrap allows you to set the width of the element as per the need. To set the width of the element add .w-* class to the <div> element.

Where, * = 25, 50, 75, 100.

Example

Output

Bootstrap Utilities

Height – Bootstrap 4 allows you to set the height of the element. To set the height of the element add .h-* class and for max- height add .mh-100 class.

Where, * = 25, 50, 75, 100.

Example

Output

Bootstrap Utilities

Shadows – Bootstrap 4 allows you to give the shadow effect to the elements. To create the shadow effect, add the .shadow class to the <div> element.

Example

Output

Bootstrap Utilities

Vertical Align – You can align your content or element vertically or inline. To align the content vertically, add class .align-* to the element.

Where, * = baseline, top, middle, bottom, text-top, text-bottom, etc.

Example

Output

Bootstrap Utilities

Responsive Embeds – You can add the responsiveness to the videos or images. If you resize the video or images, it will not overlap its parent. The video or image adjusts their width automatically according to the width of the parent.

  • To create the responsive embeds, add the .embed-responsive class along with the .embed-responsive-* (* = ratio) to the parent element.

Where, * = 21by9, 16by9, 4by3, and 1by1.

  • Add the .embed-responsive-item class to the <iframe> or <video> element.

Example

Output

Bootstrap Utilities

Visibility – Bootstrap 4 provides some classes that help you to make the element visible or invisible. To make the element visible, add .visible class to the <div> element. To make the element invisible, add the .invisible class to the <div> element.

Example

Output

Bootstrap Utilities

Close Icon – The close icon is basically used in the modal or alerts. The default position of the close (‘x’) is right. The &times; symbol is used to create the actual icon. To create the close icon, add the .close class along with the type=”button” attribute to the <button> element.

Example

Output

Bootstrap Utilities

Block Elements – You can also convert an element into the block element. Add the .d-*-block class to control the action of the element (when it acts as a block or when not). To create a block element, add .d-block class to the element.

Example

Output

Bootstrap Utilities