Ideas - -Full Stack MERN Web Development
Bootstrap Utilities
Bootstrap is controlled with inline styles. The style call is placed inside the controlling HTML tag. Bootstrap has Utilities for responsively toggling common values of the Display and Flexbox properties, Margins and Padding, and Visibility properties. More information about Bootstrap Utilities can be found here.
Bootstrap Utilities Demo
We set up the following box with background color-primary, text
color-white, margin of 5px, and padding of 2px,
[ class="bg-primary text-white m-5 p-2" ]
We are going to change the first line to inline by changing
the
display property. We'll also change the background color to highlight the effect.
[
class="bg-warning
d-inline" ]
Now we can hide the next line for all displays except
medium
size or larger, with the following, [ class="d-none d-md-block" ].
We are telling it to never display this line (d-none), then we block this rule if the user is
using a
medium size or larger display (d-md-block).
If you resize the screen, you'll see the effect.
Margins and Padding
Margins are controlled with the m tag, and padding is controlled with the p tag.
From this, we can add t(top), b(bottom), l(left), and r(right).
We can also add x to select the horizontal sides, and y to select the vertical sides.