Boostrap 4 Utilities
What is Utilities?
The utility feature is a responsive toggle where common values of the display property are to be found.
Use it together with the grid system, content or components in viewports to enable them visible or disappear depending on the viewports.
Spacing Utilities:
Spacing utilities allow you to add margin or padding to elements using predefined classes.
These classes use shorthand notation to specify the direction and size of the spacing.
<div class="m-2">Margin on all sides</div>
<div class="p-3">Padding on all sides</div>
<div class="mt-4">Margin top</div>
<div class="py-5">Padding top and bottom</div>
<div class="ml-auto">Margin left auto</div> <!-- Aligns to the right -->
Visibility Utilities:
Visibility utilities control the visibility of elements on the page.
You can show or hide elements based on screen size or printing status using these classes.
<div class="d-block">Display block</div> <!-- Shown on all screens -->
<div class="d-none d-md-block">Display none on small screens</div> <!-- Hidden on small screens -->
<div class="d-print-none">Hidden when printing</div> <!-- Hidden when printing -->
Flexbox Utilities:
Flexbox utilities help in creating flexible layouts using the CSS Flexbox model.
They allow you to control the alignment, direction, ordering, and wrapping of elements within a container.
<div class="d-flex justify-content-between">Items will be spaced evenly within the container</div>
<div class="d-flex align-items-center">Items will be vertically centered within the container</div>
<div class="d-flex flex-column">Items will be stacked vertically</div>