With visibility utilities you have control the visibility, without modifying the display, of elements.
Bootstrap Utilities : “Visibility”
Tag: scmgalaxy tutorials bootstrap 4 utilities
Bootstrap utilities : “Vertical align”
Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
Change the alignment of elements with the vertical-alignment utilities.
These are the classes:- .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.
Bootstrap Utilities : Text
Text Utilities classes, contains various text properties, such as, text alignment, text wrapping, text overflow, text transformation, font weight, italics, monospace, resetting color of text, removing text decorations.
1. Text alignment :
- .class text-justify
- .class text-left
- .class text-center
- .class text-right
- .class text-sm|md|lg|xl-left
2. Text wrapping and overflow :
- .class text-wrap
- .class text-nowrap
- .class text-truncate
3. Word break :
- .class text-break
4. Text transform :
- .class text-lowercase
- .class text-uppercase
- .class text-capitalize
5. Font weight and italics :
- .class font-weight-bold
- .class font-weight-bolder
- .class font-weight-normal
- .class font-weight-light
- .class font-weight-lighter
- .class font-italic
6. Monospace :
- .class text-monospace
7. Reset color :
- .class text-muted
8. Text decoration
- .class text-decoration-none
Bootstrap Utilities : Spacing
Spacing helpers are useful for modifying the padding and margin of an element.
Where property is one of:
- m–sets margin
- p-sets padding
Sides is one of:-
- t-sets margin-padding “top“
- b-sets margin-padding “bottom“
- l-sets margin-padding “left“
- r-sets margin-padding “right“
- x-sets padding left|right or margin left|right
- y-sets padding top|bottom or margin top|bottom
- blank-sets margin padding on all sides of the element
Size is one of:-
- 0-sets m|p to 0
- 1-sets m|p to .25rem
- 2-sets m|p to .5rem
- 3-sets m|p to 1rem
- 4-sets m|p to 1.5rem
- 5-sets m|p to 3rem
- auto-sets margin to auto
Negative margin :-
- n1-sets margin to -.25rem
- n2-sets margin to -.5rem
- n3-sets margin to -1rem
- n4-sets margin to -1.5rem
- n5-sets margin to -3rem
Bootstrap Utilities : “Screenreaders”
.sr-only class is used to hide an element in all device except screenreader.
Bootstrap Utilities : “Shadows”
box-shadow utilities class is use to add or remove shadows in the elements.
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
Bootstrap: Utilities “Flex”
Bootstrap utilities Flex utility can be used to manage the layout, alignment, grid columns, navigation, and other components of the page.
All flex classes come with additional responsive classes, which makes it easy to set a specific flex class on specific screen size.
The * the symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description |
| .d-*-flex | Creates a flexbox container for different screens |
| .d-*-inline-flex | Creates an inline flexbox container for different screens |
| .flex-*-row | Display flex items horizontally on different screens |
| .flex-*-row-reverse | Display flex items horizontally, and right-aligned, on different screens |
| .flex-*-column | Display flex items vertically on different screens |
| .flex-*-column-reverse | Display flex items vertically, with reversed order, on different screens screens |
| .justify-content-*-start | Display flex items from the start (left-aligned) on different screens |
| .justify-content-*-end | Display flex items at the end (right-aligned) on different screens |
| .justify-content-*-center | Display flex items in the center of a flex container on different screens |
| .justify-content-*-between | Display flex items in “between” on different screens |
| .justify-content-*-around | Display flex items “around” on different screens |
| .flex-*-fill | Force flex items into equal widths on different screens |
| .flex-*-grow-0 | Don’t make the items grow on different screens |
| .flex-*-grow-1 | Make items grow on different screens |
| .flex-*-shrink-0 | Don’t make the items shrink on different screens |
| .flex-*-shrink-1 | Make items shrink on different screens |
| .order-*-0-12 | Change the order from 0 to 12 on small screens |
| .flex-*-nowrap | Don’t wrap items on different screens |
| .flex-*-wrap | Wrap items on different screens |
| .flex-*-wrap-reverse | Reverse the wrapping of items on different screens |
| .align-content-*-start | Align gathered items from the start on different screens |
| .align-content-*-end | Align gathered items at the end on different screens |
| .align-content-*-center | Align gathered items in the center on different screens |
| .align-content-*-around | Align gathered items “around” on different screens |
| .align-content-*-stretch | Stretch gathered items on different screens |
| .align-items-*-start | Align single rows of items from the start on different screens |
| .align-items-*-end | Align single rows of items at the end on different screens |
| .align-items-*-center | Align single rows of items in the center on different screens |
| .align-items-*-baseline | Align single rows of items on the baseline on different screens |
| .align-items-*-stretch | Stretch single rows of items on different screens |
| .align-self-*-start | Align a flex item from the start on different screens |
| .align-self-*-end | Align a flex item at the end on different screens |
| .align-self-*-center | Align a flex item in the center on different screens |
| .align-self-*-baseline | Align a flex item on the baseline on different screens |
| .align-self-*-stretch | Stretch a flex item on different screens |
Bootstrap: Utilities “Embed”
Bootstrap embeds is a utility that helps you insert video or slideshow in the page keeping width of the parent and scales on any device.
Bootstrap: Utilities “Display”
Bootstrap utility display changes the value of the property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.
| Screen Size | Class |
| Hidden an element | .d-none |
| Hides an element on a specific screen size | .d-*-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| An element inline | .d-inline |
| An element inline on a specific screen size | .d-*-inline |
| An element inline-block | .d-inline-block |
| An element inline-block on a specific screen size | .d-*-inline-block |
| An Element display as a table | .d-table |
| An element display as a table on a specific screen size | .d-*-table |
| An element display as a table cell | .d-table-cell |
| An element display as a table cell on a specific screen size | .d-*-table-cell |
| An element display as a table row | .d-table-row |
| An element display as a table row on a specific screen size | .d-*-table-row |
| Creates a flexbox container and transforms direct children into flex items | .d-flex |
| Creates a flexbox container on a specific screen size | .d-*-flex |
| Creates an inline flexbox container | .d-inline-flex |
| Creates an inline flexbox container on a specific screen size | .d-*-inline-flex |
Syntax:-
<div class="container mt-4">
<h2>Display Inline Block</h2>
<p>Use the d-inline-block class.</p>
<div class="d-inline-block">Inline block DIV.</div>
<div class="d-inline-block">Inline block DIV.</div>
</div>
Bootstrap: Utilities “Borders”
Bootstrap 4 has a lot of utility classes to quickly style elements. With no using CSS code.
Borders:-
This class adds a border all around the element.
- Borders by using the border classes to add or remove borders from an elements.
- Border Color by using border border-colorname to and color to the borders.
- Border Radius by using rounded classes to rounded the corners.
