With visibility utilities you have control the visibility, without modifying the display, of elements.
Tag: scmGalaxy DevOps Training Online
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>