Category: 04. Utilities

Responsive helper utility is used to allow browsers to determine video or slideshow dimensions according to the width of their containing block in a way that it will properly scale on any device. You have to apply rules directly on <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you…

Bootstrap position utility is used to quickly place a component outside the normal document flow. There are several fixed and sticky position classes are available. Fixed top It is used to position an element at the top of the viewport, from edge to edge. You can also add some additional CSS. Syntax: Fixed Bottom It…

The .invisible class can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document. Syntax: How to use it:

The .text-hide class or mixin is used to replace an element’s text content with a background image. Syntax:

Following is a list of some display utilities: .d-block display utility: This utility is used to set an element display property to block. Syntax: .d-inline utility: This utility is used to set an element display property to inline. Syntax: .d-inline-block: This utility is used to set an element display property to inline block. Syntax:

Flexbox is used to quickly manage the layout, alignment and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. You can also do complex implementations using custom CSS. Flexbox Properties: Enable Flex Behavior The “display” utility is used to create a flexible container and transform direct children elements…

By using utility classes you can change the color of the text. It can also be used to links and will darken on hover just like our default link styles. Syntax: Muted Class: Primary Class: Success: Info: Warning: Danger: White: Contextual text classes can also be used with anchors tags with the provided hover and…

Close icon is used for dismissing content like modals and alerts. Be sure to include text for screen readers, as we’ve done with aria-label. Syntax:

Clearfix is used to easily clear floats by adding .clearfix to the parent element. It utilizes the micro clearfix as popularized by Nicolas Gallagher. It can also be used as a mixin. Syntax: How to use in mixin How to use Clearfix Let’s take an example to see how the clearfix can be used. Without…

Border utility is used to quickly change the border-style and border-radius of an element. It is mainly used for images, buttons, or any other element. You can use the border classes to an element to remove all borders or some borders. Syntax: For no border: To remove top-border: To remove right-border: To remove bottom-border: To…