Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to sizing elements relative to the viewport, spacing, wrapping, and alignment with Bootstrap 5.
Sizing Relative to the Viewport
Boostrap 5 has classes to size items relative to the viewport.
To do that, we can use the following code:
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
min-vw-100 size the div with the minimum width of 100vw.
min-vh-100 sizes the div with the minimum height set to 100vh.
vw-100 sizes the width of the div to 100vw.
And vh-100 sizes the div to 100vh.
Spacing
Bootstrap provides various shorthands for responsive margin and padding sizing.
We can apply classes to add margins and padding.
The format of the classes are {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for other breakpoints.
property is one of:
mfor marginpfor padding
sides is one of:
t– for classes that setmargin-toporpadding-topb– for classes that setmargin-bottomorpadding-bottoml– for classes that setmargin-leftorpadding-leftr– for classes that setmargin-rightorpadding-rightx– for classes that set both*-leftand*-righty– for classes that set both*-topand*-bottom- blank — for classes that set a
marginorpaddingon all 4 sides of the element
size is one of:
0– for classes that eliminate themarginorpaddingby setting it to01– (by default) for classes that set themarginorpaddingto$spacer * .252– (by default) for classes that set themarginorpaddingto$spacer * .53– (by default) for classes that set themarginorpaddingto$spacer4– (by default) for classes that set themarginorpaddingto$spacer * 1.55– (by default) for classes that set themarginorpaddingto$spacer * 3auto– for classes that set themarginto auto
Horizontal Centering
We can center content horizontally wit the .mx-auto class if the element is a block element.
Anything that is display: block and has a width set are block elements.
For example, we can write:
<div class="mx-auto" style="width: 500px;">
Centered
</div>
We have a div with the content centered.
Negative Margin
Negative margins are disabled by default in Bootstrap 5, but we can enable it in the SASS code by setting $enable-negative-margins property to true .
Then we can apply the class with an n in it to apply the negative margin.
For example, we can write .mt-n1 to add a negative margin.
Text
Bootstrap 5 have utility classes for aligning text.
For example, we can write:
<p class="text-left">Left aligned.</p>
<p class="text-center">Center aligned.</p>
<p class="text-right">Right aligned.</p>
<p class="text-sm-left">Left aligned sm or wider.</p>
<p class="text-md-left">Left aligned md or wider.</p>
<p class="text-lg-left">Left aligned lg or wider.</p>
<p class="text-xl-left">Left aligned xl or wider.</p>
The text-left class left aligns text.
The text-center class centers align text.
text-right right aligns text.
text-sm-left left aligns the text when the breakpoint is sm or wider.
text-md-left left aligns text if the breakpoint is md or wider.
text-lg-left left aligns text if the breakpoint is lg or wider.
And text-xl-left left aligns text if the breakpoint is xl or wider.
Text Wrapping and Overflow
We can wrap the text with the .text-wrap class.
for example, wed can write:
<div class="badge bg-primary text-wrap" style="width: 50px;">
This text should wrap.
</div>
Then the text should wrap.
We can also use the .text-nowrap class to disable wrapping:
<div class="badge bg-primary text-nowrap" style="width: 50px;">
This text should wrap.
</div>
Conclusion
We can add spacing and alignment with various Bootstrap 5 classes.
Also, we can enable or disable wrapping with its provided classes.
Text alignment can also be done.
