Categories
Bootstrap HTML

Bootstrap 5 — Ordering Columns and Gutters

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.

Categories
Bootstrap HTML

Bootstrap 5 — Column Alignment

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.

Categories
Bootstrap HTML

Bootstrap 5 — Column Sizing

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.

Categories
Bootstrap HTML

Bootstrap 5 — Layouts

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.

Categories
Bootstrap HTML

Bootstrap 5 — Browser Support and Customization

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.