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 style text with Bootstrap 5.

Word Break

Bootstrap provides the .text-break class to set the word-wrap: reak-word CSS property.

For example, we can write:

<p class="text-break">  
ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff  
</p>

to add a p element with the long word broken up to prevent overflowing the viewport.

Text Transform

We can transform text to upper case, lower case, or capitalized case with various classes.

For example, we can write:

<p class="text-lowercase">lower case</p>  
<p class="text-uppercase">upper case</p>  
<p class="text-capitalize">capital case</p>

to change the case of the text in the classes.

text-lowercase changes the text to lower case.

text-uppercase change the text to upper case.

text-capitalize change the case to capitalized case.

Font Weight and Italics

We can also make text bold or italic with classes provided by Bootstrap 5.

For example, we can write:

<p class="font-weight-bold">Bold text.</p>  
<p class="font-weight-bolder">Bolder text</p>  
<p class="font-weight-normal">Normal text.</p>  
<p class="font-weight-light">Light text.</p>  
<p class="font-weight-lighter">Lighter text.</p>  
<p class="font-italic">Italic text.</p>  
<p class="font-normal">unstyled text</p>

The font-weight-bold class makes text bold.

font-weitght-bolder makes text bolder relative to the parent.

font-weight-light makes text light.

font-weight-lighter makes text lighter relative to the parent.

font-italic makes text italic.

font-normal makes text unstyled.

Line Height

We can change the line height with the .lh-* classes.

For example, we can write:

<p class="lh-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat.</p><p class="lh-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat.</p><p class="lh-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat.</p><p class="lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat.</p>

lh-l makes the space between each line short.

lh-sm makes the space between each line a bit bigger.

lh-base makes the space between each line bigger than lh-sm.

lh-l makes the space between each line large.

Monospace

We can make text monospace with the font-monospace class.

For example, we can write:

<p class="font-monospace">monospace</p>

to show text in a monospaced font.

Reset Color

To make a piece of text or a link’s color reset to the same style as the parent, we can use the .text-reset class.

For example, we can write:

<p class="text-muted">  
  <a href="#" class="text-reset">reset link</a>.  
</p>

Since we have the text-muted class make the text muted in the p element.

text-reset will make that style apply to the link.

Text Decoration

Bootstrap 5 has classes for changing text decoration.

For example, we can write:

<p class="text-decoration-underline">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat. Proin aliquam auctor ipsum eu congue. Mauris consequat dolor id posuere posuere. Curabitur in blandit eros. Donec at dui turpis. Curabitur faucibus est enim, quis facilisis enim ultrices a. Vivamus sed tellus tortor. Fusce malesuada ante dui. Morbi dignissim sapien eu mattis facilisis. Nunc vel enim nec risus rhoncus mollis at accumsan diam. Aliquam sed volutpat turpis.  
</p><p class="text-decoration-line-through">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat. Proin aliquam auctor ipsum eu congue. Mauris consequat dolor id posuere posuere. Curabitur in blandit eros. Donec at dui turpis. Curabitur faucibus est enim, quis facilisis enim ultrices a. Vivamus sed tellus tortor. Fusce malesuada ante dui. Morbi dignissim sapien eu mattis facilisis. Nunc vel enim nec risus rhoncus mollis at accumsan diam. Aliquam sed volutpat turpis.  
</p><a href="#" class="text-decoration-none">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat. Proin aliquam auctor ipsum eu congue. Mauris consequat dolor id posuere posuere. Curabitur in blandit eros. Donec at dui turpis. Curabitur faucibus est enim, quis facilisis enim ultrices a. Vivamus sed tellus tortor. Fusce malesuada ante dui. Morbi dignissim sapien eu mattis facilisis. Nunc vel enim nec risus rhoncus mollis at accumsan diam. Aliquam sed volutpat turpis.  
</a>

text-decoration-underline makes the text underlined.

text-decoration-line-through makes the text have a line going through the middle.

text-decoration-none removes all text decorations.

Conclusion

Bootstrap 5 provides many classes for styling text our way.

They include underline, strikethrough, muted text, and more.

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.

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 add margins, ordering, and wrapping with Bootstrap 5.

Auto Margins

We can add margins with the .mr-auto to add right margins and .ml-auto to add left margins.

For example, we can write:

<div class="d-flex bd-highlight mb-3">  
  <div class="p-2 bd-highlight">Flex item</div>  
  <div class="p-2 bd-highlight">Flex item</div>  
  <div class="p-2 bd-highlight">Flex item</div>  
</div>  
  
<div class="d-flex bd-highlight mb-3">  
  <div class="mr-auto p-2 bd-highlight">Flex item</div>  
  <div class="p-2 bd-highlight">Flex item</div>  
  <div class="p-2 bd-highlight">Flex item</div>  
</div>  
  
<div class="d-flex bd-highlight mb-3">  
  <div class="p-2 bd-highlight">Flex item</div>  
  <div class="p-2 bd-highlight">Flex item</div>  
  <div class="ml-auto p-2 bd-highlight">Flex item</div>  
</div>

The first div aligns everything to the left.

The 2nd div has the first one with right margins so that the 2 that come after it are on the right side.

The 3rd div has the last child with the ml-auto class added so the last div is on the right and the rest are on the left.

With Align-Items

We can also align items vertically.

Bootstrap 5 comes with the mb-auto and mt-auto classes to do the alignment.

For instance, we can write:

<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">  
  <div class="mb-auto p-2 bd-highlight">item</div>  
  <div class="p-2 bd-highlight">item</div>  
  <div class="p-2 bd-highlight">item</div>  
</div>  
  
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">  
  <div class="p-2 bd-highlight">item</div>  
  <div class="p-2 bd-highlight">item</div>  
  <div class="mt-auto p-2 bd-highlight">item</div>  
</div>

to do the alignment.

We use the mb-auto class to push the divs that come after it to the bottom.

And we use the mt-auto class to add space between the bottom div and the 2 above it.

Wrap

We can wrap items with various classes.

They include the flex-nowrap and flex-wrap classes.

.flex-nowrap disables wrapping, which is the browser default.

.flex-wrap enables wrapping.

We can wrap items in reverse with .flex-wrap-reverse .

For example, we can write:

<div class="d-flex flex-nowrap">  
  ...  
</div>  
<div class="d-flex flex-wrap">  
  ...  
</div>  
<div class="d-flex flex-wrap-reverse">  
  ...  
</div>

to add them.

The first div won’t wrap the children.

The 2nd div wraps the children.

The last wrap them in reverse.

These responsive variations are also available:

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse
• .flex-xxl-nowrap
• .flex-xxl-wrap
• .flex-xxl-wrap-reverse

Order

The visual order of the items can be changed.

Bootstrap 5 comes with the order class to do that.

For example, we can write:

<div class="d-flex flex-nowrap bd-highlight">  
  <div class="order-3 p-2 bd-highlight">First</div>  
  <div class="order-2 p-2 bd-highlight">Second</div>  
  <div class="order-1 p-2 bd-highlight">Third</div>  
</div>

to change the order.

We can also write:

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xxl-0
• .order-xxl-1
• .order-xxl-2
• .order-xxl-3
• .order-xxl-4
• .order-xxl-5

These classes are also available for making items the first or last item:

• .order-first
• .order-last
• .order-sm-first
• .order-sm-last
• .order-md-first
• .order-md-last
• .order-lg-first
• .order-lg-last
• .order-xl-first
• .order-xl-last
• .order-xxl-first
• .order-xxl-last

Conclusion

We can add margins and align-items with Bootstrap 5 classes.

There’re also classes for ordering elements.

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 add floats and many other styles with Bootstrap 5.

Float

We can toggle floats in elements with Bootstrap 5.

It can be applied to any breakpoint.

The floart classes let us add the CSS float property to our elements.

For example, we can write:

<div class="float-left">Float left</div><br>  
<div class="float-right">Float right</div><br>  
<div class="float-none">Don't float</div>

float-left makes the div floats left.

float-right makes the div float right.

And float-none disable floats.

Responsive

We can apply floats to certain breakpoints only.

For example, we can write:

<div class="float-sm-left">Float left on sm or wider</div><br>  
<div class="float-md-left">Float left on md or wider</div><br>  
<div class="float-lg-left">Float left on lg or wider</div><br>  
<div class="float-xl-left">Float left on xl or wider</div><br>

We have the sm , md , lg , and xl breakpoints to specify when the floats should apply.

They’re always applied to that breakpoint or wider.

Other float classes include:

• .float-left
• .float-right
• .float-none
• .float-sm-left
• .float-sm-right
• .float-sm-none
• .float-md-left
• .float-md-right
• .float-md-none
• .float-lg-left
• .float-lg-right
• .float-lg-none
• .float-xl-left
• .float-xl-right
• .float-xl-none
• .float-xxl-left
• .float-xxl-right
• .float-xxl-none

Interactions

Bootstrap 5 provides classes to change the way content is selected when we interact with them.

For example, we can write:

<p class="user-select-all">lorem ipsum.</p>  
<p class="user-select-auto">lorem ipsum.</p>  
<p class="user-select-none">lorem ipsum.</p>

user-select-all make all the text selected if we click on it.

user-select-auto is the default select behavior.

user-select-none make the paragraph not selectable when clicked by the user.

Pointer Events

The pe-none and pe-auto classes change how we interact with elements.

pe-none disables element interaction.

pe-auto add element intreraction.

For example, we can write:

<a href="#" class="pe-none">can't click</a>  
<a href="#" class="pe-auto">can click</a>  
<p class="pe-none">  
  <a href="#">can't click</a>  
  <a href="#" class="pe-auto"can click</a>  
</p>

pe-none sets the link to pointer-events: none , so it can’t be clicked.

pe-auto sets the default link behavior.

These classes are inherited so they’ll propagate to child elements unless we override them as in the paragraph.

Overflow

Bootstrap 5 provides utility classes for setting overflows.

For instance, we can write:

<div class="overflow-auto">...</div>  
<div class="overflow-hidden">...</div>

The first div has the overflow set to auto, which is the default behavior.

The 2nd sets the overflow to hidden.

Position

Bootstrap also provides classes for position items.

We can set the positioning by writing:

<div class="position-static">...</div>  
<div class="position-relative">...</div>  
<div class="position-absolute">...</div>  
<div class="position-fixed">...</div>  
<div class="position-sticky">...</div>

to set the position of the position CSS property as indicated by the suffixes.

Shadows

We can add or remove shadows to elements with the Bootstrap box-shadow utility classes.

For example, we can write:

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>  
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>  
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>  
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

to add various shadows.

The shadow-* classes let us add shadows of various sizes.

Sizing

We can change the width of elements with some provided classes.

We can use the w-* classes to set the widths.

For example, we can write:

<div class="w-25 p-3" style="background-color: lightgray;">Width 25%</div>  
<div class="w-50 p-3" style="background-color: lightgray;">Width 50%</div>  
<div class="w-75 p-3" style="background-color: lightgray;">Width 75%</div>  
<div class="w-100 p-3" style="background-color: lightgray;">Width 100%</div>  
<div class="w-auto p-3" style="background-color: lightgray;">Width auto</div>

to sets the widths.

The h-* let us set the heights:

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">  
  <div class="h-25 d-inline-block" style="width: 120px; background-color: lightgray">Height 25%</div>  
  <div class="h-50 d-inline-block" style="width: 120px; background-color: lightgray">Height 50%</div>  
  <div class="h-75 d-inline-block" style="width: 120px; background-color: lightgray">Height 75%</div>  
  <div class="h-100 d-inline-block" style="width: 120px; background-color: lightgray)">Height 100%</div>  
  <div class="h-auto d-inline-block" style="width: 120px; background-color: lightgray">Height auto</div>  
</div>

We set the height as a fraction of the height of the outer div.

Conclusion

We can use Bootstrap 5 classes to set heights, widths, position, shadows, and overflow of elements, and interactivity of links.

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 use flexbox classes with Bootstrap 5.

Align Items

We can use the align-items classes to change the alignment of flex items.

The items will be aligned vertically with these classes.

The choices include start , end , center , baseline , or stretch .

For example, we can write:

<div class="d-flex align-items-start">...</div>  
<div class="d-flex align-items-end">...</div>  
<div class="d-flex align-items-center">...</div>  
<div class="d-flex align-items-baseline">...</div>  
<div class="d-flex align-items-stretch">...</div>

align-items-start will put the items inside the div on the top.

align-items-end put the items at the bottom.

align-items-center center them vertically.

align-items-baseline put them at the top baseline.

align-items-stretch stretch the items from top to bottom.

Other choices of classes include:

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch
• .align-items-xxl-start
• .align-items-xxl-end
• .align-items-xxl-center
• .align-items-xxl-baseline
• .align-items-xxl-stretch

Align Self

The align-self utility classes let us individually change the alignment on the cross axis.

Choices include start , end , center , baseline or stretch .

stretch is the default choice.

start will align the item to the top.

end aligns thr item to the bottom.

center vertically aligns the item.

baseline aligns the item to the baseline which is the top.

stretch stretches the content from top to bottom.

We can use them in individual elements:

<div class="align-self-start">flex item</div>  
<div class="align-self-end"> flex item</div>  
<div class="align-self-center">flex item</div>  
<div class="align-self-baseline">flex item</div>  
<div class="align-self-stretch"> flex item</div>

Other choices include:

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch
• .align-self-xxl-start
• .align-self-xxl-end
• .align-self-xxl-center
• .align-self-xxl-baseline
• .align-self-xxl-stretch

Fill

The .flex-fill class can be used on sibling elements to force them to widths equal to their content while taking up all available horizontal space.

For example, we can write:

<div class="d-flex bd-light">  
  <div class="p-2 flex-fill bd-light">Lorem ipsum dolor sit amet</div>  
  <div class="p-2 flex-fill bd-light">Lorem ipsum</div>  
  <div class="p-2 flex-fill bd-light">Lorem ipsum</div>  
</div>

We make the divs fill the space of the containers.

Other choices include:

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill
• .flex-xxl-fill

Grow and Shrink

Bootstrap 5 has flexbox classes for growing and shrinking items.

There’s the .flex-grow-* utility classes to do that.

We can use it to make an element fill all available space.

For example, we can write:

<div class="d-flex bd-highlight">  
  <div class="p-2 flex-grow-1 bd-highlight">lorem ipsum</div>  
  <div class="p-2 bd-highlight">lorem ipsum</div>  
  <div class="p-2 bd-highlight">lorem ipsum</div>  
</div>

Now the 1st div fills all the available space because we have the flex-grow-1 class applied to it.

Conclusion

We can use Bootstrap 5 classes to add flexbox properties to our elements so that we don’t have to write them from scratch ourselves.