Bootstrap Utilities
One example is as follows:
Border
This section was fairly easy to achieve! The space should take up about 5/12ths of the space in this container, and is designed to show just how easily a border can be incoprorated into a design via Bootstrap. This iteration of the code is adjusted slightly for our container: can you identify how?
<div class="container">
<h3 class="display-3">Border Utility</h3>
<div class="row">
<div class="col-md-4 border rounded border-success">
~Add code here :)
</div>
</div>
</div>
There are more elegant ways of structuring code, but keeping this div in the middle shows just how stark the border option can be!
Shadow
Allows you to add (or remove) shadows to elements with box-shadow utilities
More Utilities
Spacing in Bootstrap
We often want things to have different amounts of space - especially padding or margin, on different elements
We can use the shorthand mentioned to help us achieve padding (p) and margin (m). Please read the documentation!
Card
The card class is a nice way to incorporate content.
It's basically a box with a border that is a nice way to display what you like:
See here for more about cards.
Carousel
The carousel class is simply an easy way to create sliders.
When you use Facebook or Instagram stories, you'll see these used a lot.
Dropdowns
These are also quite flexible! Spinners, Modals, and Progress are also fairly common!