Categories
Bootstrap HTML

Bootstrap 5 — Flexbox Margins, Ordering, and Wrapping

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.

Categories
Bootstrap HTML

Bootstrap 5 — Positioning and Other Styles

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.

Categories
Bootstrap HTML

Bootstrap 5 — More Flexbox Utilities

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.

Categories
Bootstrap HTML

Bootstrap 5 — Gutters and Utility Classes

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 gutters and utility classes with Bootstrap 5.

Row Columns Gutters

We can add the g class to add horizontal and vertical padding to columns.

For example, we can write:

<div class="container">  
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
  </div>  
</div>

We have the g-2 and g-lg-3 classes to add our gutters.

g-2 lets us add a smaller gutter in breakpoints smaller than lg .

And g-lg-3 lets us add a bigger gutter if our viewport hit the lg breakpoint or larger.

Change the Gutters

We can change the buyers with some SASS code.

For example, we can write:

$grid-gutter-width: 2.5rem;  
$gutters: (  
  0: 0,  
  1: $spacer * .25,  
  2: $spacer * .5,  
  3: $spacer,  
  4: $spacer * 1.5,  
  5: $spacer * 3,  
);

to change the gutter by changing the $grid-gutter-width variables.

We can also change the $gutters map to change the width of them.

Utilities for Layout

Bootstrap 5 has display utilities for responsively toggling display of elements.

They’re indicated by .d-{value} for xs and .d-{breakpoint}-{value} for the other breakpoints.

The value can be one of:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

For example, we can write:

<div class="d-inline p-2 bg-primary text-white">d-inline</div>

to display the div inline when the breakpoint is xs or higher as indicated by the d-inline class.

Hiding Elements

We can hide things with .d-none or .d-{breakpoint}-none .

.d-nonw always hides something.

.d-{breakpoint}-none hides something if the viewport hits the given breakpoint or above.

We can write them in the following way:

  • Screen sizeClassHidden on all — .d-none
  • Hidden only on xs — .d-none .d-sm-block
  • Hidden only on sm — .d-sm-none .d-md-block
  • Hidden only on md — .d-md-none .d-lg-block
  • Hidden only on lg — .d-lg-none .d-xl-block
  • Hidden only on xl — .d-xl-none
  • Hidden only on xxl — .d-xxl-none
  • Visible on all — .d-block
  • Visible only on xs — .d-block .d-sm-none
  • Visible only on sm — .d-none .d-sm-block .d-md-none
  • Visible only on md — .d-none .d-md-block .d-lg-none
  • Visible only on lg — .d-none .d-lg-block .d-xl-none
  • Visible only on xl — .d-none .d-xl-block .d-xxl-none
  • Visible only on xxl — .d-none .d-xxl-block

Display in Print

We can also make things only display in print.

To do that, we can add the following classes:

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

to display items that are only shown when printed in the way we want.

For instance, we can write:

<div class="d-print-none">Screen Only</div>

to add a div that hides on print only.

Conclusion

Bootstrap 5 provides us with many utility classes for displaying items our way.

Also, we can add gutters to columns to add padding.

Categories
Bootstrap HTML

Bootstrap 5 — Flexbox Utilities

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.

Flex

Bootstrap 5 provides us with classes to let us use flexbox easily.

For example, we can write:

<div class="d-flex p-2 bd-highlight">flexbox container</div>

to add the d-flex prop to make our div display: flex .

Other variations of the d-flex class includes:

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex
  • .d-xxl-flex
  • .d-xxl-inline-flex

Direction

We can change the direction of the flexbox layout by adding more classes.

For example, we can write .flex-row to flex horizontally.

And .flex-row-reverse will make the flex layout start from the right instead of the left.

So we can write:

<div class="d-flex flex-row bd-highlight mb-3">  
  <div class="p-2 bd-highlight">Flex item 1</div>  
  <div class="p-2 bd-highlight">Flex item 2</div>  
  <div class="p-2 bd-highlight">Flex item 3</div>  
</div>  
<div class="d-flex flex-row-reverse bd-highlight">  
  <div class="p-2 bd-highlight">Flex item 1</div>  
  <div class="p-2 bd-highlight">Flex item 2</div>  
  <div class="p-2 bd-highlight">Flex item 3</div>  
</div>

to add them.

The first div will stick to the left edge.

And the 2nd one will start from the right edge and displayed in reversed order.

We can use the .flex-column to set a vertical direction.

.flex-column-reverse starts the vertical direction from the opposite side.

We can add that with:

<div class="d-flex flex-column bd-highlight mb-3">  
  <div class="p-2 bd-highlight">Flex item 1</div>  
  <div class="p-2 bd-highlight">Flex item 2</div>  
  <div class="p-2 bd-highlight">Flex item 3</div>  
</div>  
<div class="d-flex flex-column-reverse bd-highlight">  
  <div class="p-2 bd-highlight">Flex item 1</div>  
  <div class="p-2 bd-highlight">Flex item 2</div>  
  <div class="p-2 bd-highlight">Flex item 3</div>  
</div>

The following are also available:

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

Justify Content

We can space out our content by using the justify-content classes.

The suffix can be end , center , between , around and evenly .

start is the default value. The items start from the left edge.

end makes items start from the right edge.

center make them centered.

between make them displayed with space in between.

around make them display with space on both sides.

evenly make them spread out evenly.

For example, we can write:

<div class="d-flex justify-content-start">...</div>  
<div class="d-flex justify-content-end">...</div>  
<div class="d-flex justify-content-center">...</div>  
<div class="d-flex justify-content-between">...</div>  
<div class="d-flex justify-content-around">...</div>  
<div class="d-flex justify-content-evenly">...</div>

to use those classes.

Other choices include:

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

Conclusion

We can use flexbox with Bootstrap 5’s provided classes.

Items can be aligned and justified our way with them.