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:

m for margin
p for padding

sides is one of:

t – for classes that set margin-top or padding-top
b – for classes that set margin-bottom or padding-bottom
l – for classes that set margin-left or padding-left
r – for classes that set margin-right or padding-right
x – for classes that set both *-left and *-right
y – for classes that set both *-top and *-bottom
blank — for classes that set a margin or padding on all 4 sides of the element

size is one of:

0 – for classes that eliminate the margin or padding by setting it to 0
1 – (by default) for classes that set the margin or padding to $spacer * .25
2 – (by default) for classes that set the margin or padding to $spacer * .5
3 – (by default) for classes that set the margin or padding to $spacer
4 – (by default) for classes that set the margin or padding to $spacer * 1.5
5 – (by default) for classes that set the margin or padding to $spacer * 3
auto – for classes that set the margin to 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.

Post Views: 192

Bootstrap 5 — Sizing, Spacing, Wrapping, and Alignment