Spread the love

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 the new features of Bootstrap 5 and how to get started using it.

New Look and Feel

Bootstrap 5 gives us a new look and feel that’s different from version 4.5.0.

Internet Explorer support is removed so that the package is now smaller.

Font sizes are now responsive rather than fixed sized.

Card decks are removed.

Navbar now requires less markup to add.

It’s no longer display as an inline-block element by default.

There’s also a new custom SVG icon library included with many icons.

jQuery and JavaScript

jQuery is removed as a dependency for Bootstrap since JavaScrtipt can provide the same functionality without the extra dependency.

Now that we don’t need it, that’s one less dependency that we’ve to include in our app.

The button plugin is now CSS only.

CSS Custom Properties

Bootstrap now uses CSS custom properties for styling.

This allows Bootstrap to reuse values for styling.

Enhanced Grid System

The grid system has improved.

Bootstrap 5 has a new grid tier, which is the xxl tier.

This is now the smallest breakpoint.

.gutter classes have been replaced with the .g* utiulities for gutter spacing.

Form layout options are replaced with a new grid system.

Vertical spacing classes are added.

Columns are no longer position: relative by default.

To define new gutters, we can write:

<div class="row g-5">  
  <div class="col">...</div>  
  <div class="col">...</div>  
</div>

We have the g-5 class for defining a butter,

Quick Start

We can download the Bootstrap package by going to the downloads page at https://v5.getbootstrap.com/docs/5.0/getting-started/download/.

Also, we can include it with the CDN. The CSS can be added by writing:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

and the JavaScript can be added by writing:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Together, we can write:

<!doctype html>  
<html lang="en">  
  <head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <title>Hello, world!</title>  
  </head>  
  <body>  
    <h1>Hello</h1> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>  
  </body>  
</html>

to get started.

The meta tags are for making the content scale properly on any screens.

The link tag has the Bootstrap CSS.

And the script tags have the Bootstrap JavaScript.

The JavaScript is optional.

The order have to be the same as what’s listed since Bootstrap requires Popper.js.

Package Managers

Bootstrap is also available as a package in NPM.

To install it, we run:

npm install bootstrap@next

Then we can include by writing:

const bootstrap = require('bootstrap')

or:

import bootstrap from 'bootstrap';

We can also install it with Yarn by running:

yarn add bootstrap

RubyGems

It’s also available as Ruby gem.

To install it, we add:

gem 'bootstrap', '~> 5.0.0-alpha1'

to our Gemfile and run bundle install .

We can also run:

gem install bootstrap -v 5.0.0-alpha1

to install it.

Composer

It’s also available as a Composer package. To installing, we run:

composer require twbs/bootstrap:5.0.0-alpha1

NuGet

If we’re using it in a .NET app, we can run:

Install-Package bootstrap

in Powershell.

HTML5 Doctype

The HTML5 doctype is required.

If we don’t have that, then we’ll see weird styling.

So we must write:

<!doctype html>  
<html lang="en">  
  ...  
</html>

Responsive Meta Tag

Bootstrap must have a responsive meta tag to enable it to zoom and scale on all devices.

This must be in the head tag.

So we must write:

<meta name="viewport" content="width=device-width, initial-scale=1">

Box-Sizing

Bootstrap switches from the box-sizing value from content-box to border-box to make sizing easier.

We can override that with:

.foo {  
  box-sizing: content-box;  
}

All child elements including ::before and ::after will inherit the specified box-sizing for .foo .

Reboot

Reboot is used to correct inconsistencies across browsers and devices.

Conclusion

Bootstrap 5 is the upcoming version of Bootstrap.

It removed IE support and lots of other bloat.

There are also many changes in appearance and code.

It’s available as many kinds of packages and also from their CDN.