Text and spacing
At the end of the previous lesson, we finally managed to place the Call to action elements perfectly in the center of our Hero Image. But the result is far from satisfactory.
First of all, you can hardly see anything here!
Step 1 - change the color of the text
Changing the text color in Bootstrap is simple. To change it, for example, to white, just add the
text-white class to the element.
Then all elements that are its children will take this property. So add
text-white class to the parent element of our Call to action:
<!-- Call to action --> <div class="text-white"> <h1>Whoah, what a view!</h1> <h5>Learning web design is such an amazing thing</h5> <a class="btn btn-primary" href="#" role="button">Learn with me</a> </div>
Slightly better, but still the contrast against the background is too weak. We'll get to that soon. Now let's try to improve the position of the text a bit.
Step 2 - center the text
It is true that we managed to center the Call to action in relation to the Hero Image, but still elements such as headings or the button are pressed to the left edge of the Call to Action. It would be nice if they were fully centered.
This is also very easy to do in Bootstrap. Just add the
text-center class to the Call to action element.
<!-- Call to action --> <div class="text-white text-center"> <h1>Whoah, what a view!</h1> <h5>Learning web design is such an amazing thing</h5> <a class="btn btn-primary" href="#" role="button">Learn with me</a> </div>
As you can see, the text-center class centered not only the text but also the button.
Step 3 - add spacing
The elements in Call to action are very close to each other, which makes them seem squeezed. I don't know about you, but I have the impression that they are asking for some space and breath.
This is exactly what Bootstrap's spacing utilities classes are for - they allow us to offset elements in 4 directions - up, down, left and right.
For example - if you want to add a bottom margin to an
<h1> element you can add class
mb- ("m" for "margin" and "b" for "bottom") to it and choose a unit between
So let's add
<!-- Call to action --> <div class="text-white text-center"> <h1 class="mb-3">Whoah, what a view!</h1> <h5 class="mb-4">Learning web design is such an amazing thing</h5> <a class="btn btn-primary" href="#" role="button">Learn with me</a> </div>
Now they can breathe freely!
You may have guessed that if you need to use the
mb- class to add a bottom margin, you need to add the
mt- class to add a
top margin. And you will be right.
So you further conclude that to add a margin on the right you would use
mr- class and a margin on the left you would use
And here I have to disappoint you. Bootstrap creators decided to unify their spacing utilities with flexbox utilities.
This means that if instead of "right" we use the word "end" (or the letter
e for short) and instead of "left" we use the word "start" (or the letter
s for short).
ms-2 to add some margin to the left
me-4 to add some margin to the right
Below is an example using classes for the right margin with a visual representation of their sizes. The same sizes apply to all directions (left, right, top, bottom) and for both margins and padding.
|Class name||Size||Visual representation|
Note: The same scheme for margins applies to padding - so for example,
pt-4 to add some top padding,
ps-5 to add some left padding, and so on.
If you want to learn more about margins, padding and spacing utilities read spacing utilities documentation page.
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.