Author: Awais Farooq

Typography provides some utilities to add additional styles to texts. These utilities are: Text Alignment Text alignment is used to easily realign text to components with text alignment classes. Syntax: Align text left: Align text center: Align text right: Align text justify: Align text no-wrap: You can align text on viewports according to their size…

Spacing utility is used to assign the responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. It includes individual properties, all properties and vertical and horizontal properties. It classes are built from a default Sass map ranging from .25rem to 3rem. Notation The spacing utilities that apply…

It is used to size the element. By using sizing utility, you can easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for 25%, 50%, 75%, and 100% by default. Width and height utilities are generated from the $sizes Sass map in _variables.scss.…

Screenreaders are used to hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it?s focused (e.g. by a keyboard-only user). Can also be used as mixins. Syntax: How to use it:

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…