Bootstrap5 Tutorial

Bootstrap is the world's most popular front-end component library for developing responsive, mobile-first web projects.

Bootstrap5 is the latest version of Bootstrap, a set of open-source tools for HTML, CSS, and JS development. It supports Sass variables and mixins, a responsive grid system, numerous pre-built components, and powerful JavaScript plugins to help you quickly design and customize responsive, mobile-first sites.

Who is this tutorial for?

Anyone with basic knowledge of HTML and CSS can read this tutorial and develop their own website. After completing this tutorial, you will be at an intermediate level of using Bootstrap to develop web projects.

Prerequisites for reading this tutorial:

Before you start reading this tutorial, you must have a basic understanding of HTML, CSS, and JavaScript. If you are not familiar with these concepts, it is recommended that you read our tutorials on these topics:

• HTML Tutorial
• CSS Tutorial
• JavaScript Tutorial

Why use Bootstrap?

• Easy to get started: Anyone with basic knowledge of HTML and CSS can quickly start using Bootstrap.
• Responsive design: Bootstrap can adjust to different platforms (phones, tablets, and desktops).
• Mobile-first: In Bootstrap, responsive mobile design is a core part of the framework.
• Browser compatibility: Bootstrap5 is compatible with all major browsers (Chrome, Firefox, Edge, Safari, and Opera). If you need to support IE11 and below, please use Bootstrap4 or Bootstrap3.

Bootstrap5 Example

Here is a simple Bootstrap5 example:

<div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>My First Bootstrap Page</h1>
    <p>This is a responsive page, resize the browser to see the effect!</p> 
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-sm-4">
            <h3>Column 1</h3>
            <p>tutorialpro.org</p>
            <p>Learning is not just about technology, it's about dreams!!!</p>
        </div>
        <div class="col-sm-4">
            <h3>Column 2</h3>
            <p>tutorialpro.org</p>
            <p>Learning is not just about technology, it's about dreams!!!</p>
        </div>
        <div class="col-sm-4">
            <h3>Column 3</h3>        
            <p>tutorialpro.org</p>
            <p>Learning is not just about technology, it's about dreams!!!</p>
        </div>
    </div>
</div>

Bootstrap5 vs Bootstrap 3 & 4

Bootstrap5 is the latest version of Bootstrap, featuring new components, faster stylesheets, and improved responsiveness.

Bootstrap5 supports all major browsers in their latest stable versions but does not support Internet Explorer 11 and below.

The main difference between Bootstrap5 and Bootstrap 3 & 4 is that Bootstrap5 no longer relies on jQuery and uses native JavaScript. However, jQuery can still be included if desired.

Bootstrap5 does not support IE11 and below, while Bootstrap4 dropped support for IE8 and iOS 6. If compatibility with older browsers is required, please use Bootstrap3.

Note: The official team is still maintaining Bootstrap 3 and Bootstrap 4, so they can still be used. However, no new features will be added to Bootstrap 3 & 4.