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.

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 reorder columns and add gutters with Bootstrap 5.

Reordering Columns

We can reorder columns with the .order-* classes.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col">  
      First in DOM  
    </div>  
    <div class="col order-2">  
      Second in DOM  
    </div>  
    <div class="col order-1">  
      Third in DOM  
    </div>  
  </div>  
</div>

The visual order of the 2nd and 3rd div are flipped because we applied order-2 to the 2nd div and order-1 to the 3rd div.

There are also the .order-first and .order-last classes to change the order of an element.

.order-first aligns an item as the first element.

.ordet-last aligns an item as the last element.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col order-last">  
      First in DOM  
    </div>  
    <div class="col">  
      Second in DOM  
    </div>  
    <div class="col order-first">  
      Third in DOM  
    </div>  
  </div>  
</div>

to use those classes.

Offsetting Columns

We can add offset classes to shift columns by the size of the offset.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-md-4">.col-md-4</div>  
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>  
  </div>  
  <div class="row">  
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>  
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>  
  </div>  
  <div class="row">  
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>  
  </div>  
</div>

to move the columns with the offset classes.

It takes a breakpoint and the size to move.

offset-md-4 means that the column moved by 4 columns to the right if the viewport hits the md breakpoint or higher.

offset-md-3 means that the column moved by 3columns to the right if the viewport hits the md breakpoint or higher.

Margin Utilities

Bootstrap 5 comes with margin utilities.

The .mr-auto class force the sibling columns to move away from one another.

Standalone Column Classes

The .col-* classes can be used outside a .row to give an element a specific width.

Paddings are omitted if we use .col-* classes outside a .row .

For example, we can write:

<div class="col-6 bg-light p-3 border">  
  width of 50%  
</div>  
<div class="col-sm-8 bg-light p-3 border">  
  width of 67% above sm breakpoint  
</div>

We can size our columns with 50% of the width of the viewport for the first div.

The 2nd is sized 67% when it’s sm or above.

Gutters

Gutters let us add padding between columns.

We can use it to space and align content.

For example, we can write:

<div class="container px-4">  
  <div class="row gx-5">  
    <div class="col">  
     <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border">column padding</div>  
    </div>  
  </div>  
</div>

to add some padding between the 2 divs inside the row with the gx-5 class.

Also, we can add the .overflow-hidden class to do the same thing.

For example, we can write:

<div class="container overflow-hidden">  
  <div class="row gx-5">  
    <div class="col">  
     <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border">column padding</div>  
    </div>  
  </div>  
</div>

Vertical gutters

We can add vertical gutters with the .gy-* classes.

For example, we can write:

<div class="container overflow-hidden">  
  <div class="row gy-5">  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
  </div>  
</div>

We have the gy-5 class to add some padding vertically between the divs.

Horizontal and Vertical Gutters

We can combine the .gx-* and .gy-* classes to add gutters vertically and horizontally.

For example, we can write:

<div class="container">  
  <div class="row g-2">  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
  </div>  
</div>

We combined it with the g-2 class. This will give us space both horizontally and vertically.

Conclusion

We can add gutters to add space between columns.

Columns can also be reordered.

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 align columns with Bootstrap 5.

Nesting

We can nest our content with the default grid.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-sm-3">  
      Level 1: .col-sm-3  
    </div>  
    <div class="col-sm-9">  
      <div class="row">  
        <div class="col-7 col-sm-5">  
          Level 2: .col-7 .col-sm-5  
        </div>  
        <div class="col-6 col-sm-6">  
          Level 2: .col-6 .col-sm-6  
        </div>  
      </div>  
    </div>  
  </div>  
</div>

Columns

We can change columns with options for alignment, ordering, and offsetting.

It’s based on flexbox to make sizing easy.

Bootstrap has predefined classes for creating fast and responsive layouts.

For example, we can write:

<div class="container">  
  <div class="row align-items-start">  
    <div class="col">  
      1 of three columns  
    </div>  
    <div class="col">  
      2 of three columns  
    </div>  
    <div class="col">  
      3 of three columns  
    </div>  
  </div>  
  <div class="row align-items-center">  
    <div class="col">  
      1 of three columns  
    </div>  
    <div class="col">  
      2 of three columns  
    </div>  
    <div class="col">  
      3of three columns  
    </div>  
  </div>  
  <div class="row align-items-end">  
    <div class="col">  
      1 of three columns  
    </div>  
    <div class="col">  
      2 of three columns  
    </div>  
    <div class="col">  
      3 of three columns  
    </div>  
  </div>  
</div>

We have the col class to size the columns.

Th align the column we have the align-items classes.

align-items-start aligns at the top

align-items-center vertically centers the columns.

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

We can have one row with multiple columns with their own vertical alignment.

To do that, we write:

<div class="container">  
  <div class="row">  
    <div class="col align-self-start">  
      One of three columns  
    </div>  
    <div class="col align-self-center">  
      One of three columns  
    </div>  
    <div class="col align-self-end">  
      One of three columns  
    </div>  
  </div>  
</div>

We can put the align classes in each column to vertically position them.

Horizontal Alignment

To horizontally align columns, we can use the justify-content classes.

For example, we can write:

<div class="container">  
  <div class="row justify-content-start">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
  <div class="row justify-content-center">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
  <div class="row justify-content-end">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
  <div class="row justify-content-around">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
  <div class="row justify-content-between">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
  <div class="row justify-content-evenly">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
</div>

justify-content-start left align the columns.

justify-content-center center aligns the columns.

justify-content-end right align the columns.

justify-content-around aligns the columns with space before, between and after each column.

justify-content-between aligns the columns on 2 ends.

justiffy-columns-evenly aligns s the columns with an even amount of spaces between them.

Column Wrapping

Columns will automatically wrap to the next line if they overflow the width fo the row.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-9">.col-9</div>  
    <div class="col-4">.col-4</div>  
    <div class="col-6">.col-6</div>  
  </div>  
</div>

And we’ll see the last 2 columns be on the line after the first since they overflow the 12 column grid.

Column Breaks

We can force columns to display on the next line with a column break element.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-6 col-sm-2">.col-6 .col-sm-2</div>  
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>  
  
    <div class="w-100"></div>  
  
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>  
    <div class="col-6 col-sm-2">.col-6 .col-sm-2</div>  
  </div>  
</div>

to force the last 2 columns on the next line with the div with the w-100 class.

Conclusion

We can add column breaks to force columns to the next line.

We can also nest columns and align them vertically or horizontally.

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 size columns with Bootstrap 5.

Auto-Layout Columns

We can add columns that are laid out automatically.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col">  
      foo  
    </div>  
    <div class="col">  
      bar  
    </div>  
  </div>  
  <div class="row">  
    <div class="col">  
      foo  
    </div>  
    <div class="col">  
      bar  
    </div>  
    <div class="col">  
      baz  
    </div>  
  </div>  
</div>

We have the container class with 2 rows inside it.

Then we have 2 columns on the first row and 3 in the 2nd.

They’re divided evenly.

Setting One Column Width

We can set the width of one column.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col">  
      foo  
    </div>  
    <div class="col-6">  
      bar  
    </div>  
  </div>  
  <div class="row">  
    <div class="col">  
      foo  
    </div>  
    <div class="col-6">  
      bar  
    </div>  
    <div class="col">  
      baz  
    </div>  
  </div>  
</div>

We can set the width of one column with one number.

Variable Width Content

We can use the col-{breakpoint}-auto class to make one column resize automatically.

For example, we can write:

<div class="container">  
  <div class="row justify-content-md-center">  
    <div class="col col-lg-3">  
      something  
    </div>  
    <div class="col-md-auto">  
      Variable width content  
    </div>  
    <div class="col col-lg-3">  
      something  
    </div>  
  </div>  
  <div class="row">  
    <div class="col">  
      something  
    </div>  
    <div class="col-md-auto">  
      Variable width content  
    </div>  
    <div class="col col-lg-3">  
      something  
    </div>  
  </div>  
</div>

We have col-md-auto class to make columns automatically sized when we hit the md breakpoint.

All Breakpoints

We can stick to col if we don’t need columns to have a particular size.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col">col</div>  
    <div class="col">col</div>  
    <div class="col">col</div>  
    <div class="col">col</div>  
  </div>  
</div>

to make them all equal-sized.

Stacked to Horizontal

We can create a basic grid system that starts our stacked and becomes horizontal at a given breakpoint.

For example, we can use .col-sm-* to make the columns horizontal once they hit the sm breakpoint:

<div class="container">  
  <div class="row">  
    <div class="col-sm-7">col-sm-7</div>  
    <div class="col-sm-5">col-sm-5</div>  
  </div>  
  <div class="row">  
    <div class="col-sm">col-sm</div>  
    <div class="col-sm">col-sm</div>  
    <div class="col-sm">col-sm</div>  
  </div>  
</div>

Mix and Match

We can mix and match column classes for different breakpoints.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-md-8">.col-md-8</div>  
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>  
  </div> <div class="row">  
    <div class="col-6 col-md-3">.col-6 .col-md-3</div>  
    <div class="col-6 col-md-3">.col-6 .col-md-3</div>  
    <div class="col-6 col-md-3">.col-6 .col-md-3</div>  
    <div class="col-6 col-md-3">.col-6 .col-md-3</div>  
  </div> <div class="row">  
    <div class="col-4">.col-4</div>  
    <div class="col-4">.col-4</div>  
    <div class="col-4">.col-4</div>  
  </div>  
</div>

The first row has the columns stacked on mobile by making one full width and the other half-width.

The 2nd starts with 50% width on mobile and changes to 1/4 width of the desktop.

Columns are 50% width on mobile and desktop in the 3rd row.

Row Columns

The .row-cols-* classes let us set the number of column that best render our content and layout.

We can skip applying the column size classes for each column individually with it.

For example, we can write:

<div class="container">  
  <div class="row row-cols-2">  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>    
  </div>  
</div>

to size the columns so that we have 2 columns per row.

Also, we can write:

<div class="container">  
  <div class="row row-cols-3">  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
  </div>  
</div>

to have 3 columns per row.

To make them size automatically, we can write:

<div class="container">  
  <div class="row row-cols-auto">  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
  </div>  
</div>

Now they won’t be evenly spread across the viewport.

We can have 4 columns per row with:

<div class="container">  
  <div class="row row-cols-4">  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
  </div>  
</div>

The row-cols-4 class makes that possible.

Conclusion

There’re many ways to size rows and columns.

They’re all responsive and there’re many ways to size them automatically so we don’t have to do the sizing ourselves.

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 create layouts with Bootstrap 5.

Breakpoints

Breakpoints are the most basic parts of responsive design.

We can use it to control the layout of our pages when it’s adapted at a particular viewport or device size.

Bootstrap breakpoints are built with CSS media queries.

The design is mobile-first and it’s responsive by default.

Available Breakpoints

Bootstrap 5 has 6 breakpoints.

They include x-small which is between 0 and 576px.

Small, which has the sm class infix is 576px or larger.

Medium, which has the md class infix is 768px or larger.

Large, which has the lg class infix is 992px or larger.

Extra-large, which is infixed by xl , is 1200px or larger.

Extra extra large, which is infixed by xxl , is 1400px or larger.

Min-Width

Bootstrap has mixins for using media queries with the min-width.

They include:

@include media-breakpoint-up(md) { ... }  
@include media-breakpoint-up(lg) { ... }  
@include media-breakpoint-up(xl) { ... }  
@include media-breakpoint-up(xxl) { ... }

They are equivalent to:

@media (min-width: 768px) { ... }  
@media (min-width: 992px) { ... }  
@media (min-width: 1200px) { ... }  
@media (min-width: 1400px) { ... }

Max-Width

There’re also breakpoints for max-width.

For example, we can write:

@include media-breakpoint-down(sm) { ... }  
@include media-breakpoint-down(md) { ... }  
@include media-breakpoint-down(lg) { ... }  
@include media-breakpoint-down(xl) { ... }  
@include media-breakpoint-down(xxl) { ... }

Which is equivalent to:

@media (max-width: 575.98px) { ... }  
@media (max-width: 767.98px) { ... }  
@media (max-width: 991.98px) { ... }  
@media (max-width: 1199.98px) { ... }  
@media (max-width: 1399.98px) { ... }

xxl has no query since there’s no upper bound for the width.

Between Breakpoints

There’re also media queries that can span multiple breakpoint widths:

@include media-breakpoint-between(md, xl) { ... }

which translates to:

@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Containers

Containers let us display things inside it.

It lets us pad and aligns content in a given device or viewport.

There are the container , container-sm , container-md , container-lg , container-xl , container-xxl , and container-fluid classes to size containers.

Default Container

The container class is a responsive fixed-width container.

For example, we can write:

<div class="container">  
  <!-- ... -->  
</div>

to use it.

Responsive Containers

We can use the other classes with our containers to add responsive containers.

For example, we can write:

<div class="container-sm">small</div>  
<div class="container-md">medium </div>  
<div class="container-lg">large </div>  
<div class="container-xl">extra large </div>  
<div class="container-xxl">extra extra large </div>

to add them.

They’ll be 100% until they hit the breakpoints indicated by the infix in the class.

Fluid Containers

To add fluid containers that span the entire width of the viewport, we can use the container-fluid class:

<div class="container-fluid">  
  ...  
</div>

Grid System

The grid system lets us make things responsive by specifying how many columns of the grid it takes up.

It’s based on flexbox and it’s fully responsive.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-sm">  
      One of three columns  
    </div>  
    <div class="col-sm">  
      One of three columns  
    </div>  
    <div class="col-sm">  
      One of three columns  
    </div>  
  </div>  
</div>

col-sm indicates that there will be 3 equal-width columns across all devices until it’s below the sm breakpoint.

The grid supports 6 responsive breakpoints.

They include sm , md , lg , xl , and xxl .

Containers can be centered horizontally to pad our content.

container is used for responsive pixel width.

container-fluid is width: 100% across all viewports and devices.

Rows are wrappers for columns.

Columns are spanned across 12 columns. There’re 12 of them per row.

Gutters are also responsive and customizable. They let us add space between columns.

.g-0 is used to remove guttersgx-* are used to change horizontal gutters.

.gy-* is used to add vertical gutters.

Conclusion

We can define our own layouts with containers, columns, and gutters.

They’re all responsive and mobile-first.