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.

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 customize and extend Bootstrap 5 features and browser and device support.

Supported Browsers

Bootstrap supports modern browsers including the latest version of Legacy Edge.

Alternative browsers that use the Webkit, Blink, or Gecko engines should also display properly.

Mobile Devices

Bootstrap support most modern Android devices.

Android browser and webview from Android 6 or later is also supporred.

Chrome and Firefox in Android are also supported

iOS Chrome, Firefox, and Safari are also supported.

Desktop Browsers

On Mac, Chrome, Firefox, Edge, Opera, and Safari are supported.

On Windows, Chrome, Firefox, Edge, and Opera are supported.

Internet Explorer

Internet Explorer is no longer supported in Bootstrap 5.

Modals and Dropdowns on Mobile

overflow: hidden on body support is limited in iOS and Android.

This means that we can still scroll even with the CSS applied to it in those platforms.

iOS Text Fields and Scrolling

Since iOS 9.2, while a modal is open, the initial touch of a scroll features with an input element or body underneath the modal will be scrolled instead of the modal itself.

Navbar Dropdowns

.dropdown-navbar element isn’t used in iOS in the nav because of complexity with z-index.

Browser Zooming

Zooming may show rendering artifacts on the page and there’s no clean solution for this at the moment.

Sass

We can import SASS modules from the Bootstrap package.

This way, we can extend the Bootstrap SASS code with our own code.

For example, we can write:

@import "../node_modules/bootstrap/scss/bootstrap";

to include all Bootstrap styles.

We can also import them pieces one-by-one by writing:

@import "../node_modules/bootstrap/scss/functions";  
@import "../node_modules/bootstrap/scss/variables";  
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/reboot";  
@import "../node_modules/bootstrap/scss/type";  
@import "../node_modules/bootstrap/scss/images";  
@import "../node_modules/bootstrap/scss/code";  
@import "../node_modules/bootstrap/scss/grid";

Then we can override the values with our own code. For example, we can write:

$body-bg: green;  
$body-color: orange;

Modify Map

We can modify the $theme-colors map with our own code by overriding the values of the variables.

For example, we can write:

$primary: green;  
$danger: red;

And then they’ll override the values in the map.

Add to Map

We can add new values to the $theme-colors map.

For example, we can write:

$theme-colors: (  
  "custom-color": brown  
);

to our $theme-colors map.

Remove from Map

We can remove a color from a map with the map-remove function.

For example, we can write:

@import "../node_modules/bootstrap/scss/functions";  
@import "../node_modules/bootstrap/scss/variables";  
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light");
@import "../node_modules/bootstrap/scss/root";  
@import "../node_modules/bootstrap/scss/reboot";  
@import "../node_modules/bootstrap/scss/type";

We remove the info and light values from the $theme-colors map.

Colors

Bootstrap 5 dropped the color() , theme-color() , and gray() functions since those values are available as standalone variables.

For example, instead of using the theme-color("primary") to get the primary color value, we use $primary .

CSS Variables

Bootstrap includes many CSS variables that we can use in our app.

They include:

:root {  
  --bs-blue: #0d6efd;  
  --bs-indigo: #6610f2;  
  --bs-purple: #6f42c1;  
  --bs-pink: #d63384;  
  --bs-red: #dc3545;  
  --bs-orange: #fd7e14;  
  --bs-yellow: #ffc107;  
  --bs-green: #28a745;  
  --bs-teal: #20c997;  
  --bs-cyan: #17a2b8;  
  --bs-white: #fff;  
  --bs-gray: #6c757d;  
  --bs-gray-dark: #343a40;  
  --bs-primary: #0d6efd;  
  --bs-secondary: #6c757d;  
  --bs-success: #28a745;  
  --bs-info: #17a2b8;  
  --bs-warning: #ffc107;  
  --bs-danger: #dc3545;  
  --bs-light: #f8f9fa;  
  --bs-dark: #343a40;  
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";  
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;  
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));  
}

We can use these values for colors and fonts.

Conclusion

Bootstrap 5 supports most modern browsers.

Also, we can customize values in various ways.