Menu Close
  • Home
  • Bootstrap 5 — Positioning and Other Styles
    •

Bootstrap 5 — Positioning and Other Styles

CodeWithAnbu

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.

Post Views: 17
Posted in Bootstrap