Bootstrap5 tutorial

Bootstrap is the world’s most popular front-end component library for developing WEB projects with responsive layouts and mobile device priorities.

Bootstrap5 is currently the latest version of Bootstrap and is an open source toolset for HTML, CSS, and JS development. It supports Sass variablesand mixins, responsive grid systems, a large number of pre-built componentsand powerful JavaScript plug-ins to help you quickly design and customize responsive, mobile device-first sites.

Who is suitable for this tutorial?

As long as you have the basic knowledge of HTML and CSS, you can read this tutorial and develop your own website. After you have completed this tutorial, you will reach the intermediate level of developing Web projects using Bootstrap.

What you need to know before reading this tutorial:

Before you begin this tutorial, you must have a basic knowledge of HTML, CSS, and JavaScript. If you do not already understand these concepts, it is recommended that you read our tutorials first:

HTML tutorial
CSS tutorial
JavaScript tutorial

Why use Bootstrap

Easy to use: anyone who has a basic understanding of HTML and CSS can use Bootstrap very quickly.
Responsive design: Bootstrap can be adapted to different platforms (phones, tablets and desktops).
Mobility first: in Bootstrap, adaptive mobile is the 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 or below, use Bootstrap4 or Bootstrap3.

Bootstrap5 instance

Here is a simple example of Bootstrap5:

Bootstrap5 instance

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

<div class="container mt-5">
    <div class="row">
        <div class="col-sm-4">
        <h3>First column</h3>
        <p>Rookie Tutorial</p>
        <p>Learning is not only about technology, but also about dreams！！！</p>
        </div>
        <div class="col-sm-4">
        <h3>Second column</h3>
        <p>Rookie Tutorial</p>
        <p>Learning is not only about technology, but also about dreams！！！</p>
        </div>
        <div class="col-sm-4">
        <h3>Third column</h3>
        <p>Rookie Tutorial</p>
        <p>Learning is not only about technology, but also about dreams！！！</p>
        </div>
    </div>
</div>

Bootstrap5 and Bootstrap 3 & 4

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

Bootstrap5 supports all major latest stable version browsers, but does not support Internet Explorer 11 and below.

The main difference between Bootstrap5 and Bootstrap 3 & 4 is that Bootstrap5 is no longer dependent on jQuery and uses native JavaScript, although we can introduce jQuery if we want to.

For browsers below Bootstrap5 IE11, Bootstrap4 has abandoned support for IE8 and iOS 6. If you need compatibility with older browsers, use Bootstrap3.

Note: the official team is still maintaining Bootstrap 3 and Bootstrap 4, and we can continue to use them, but no new features will be added to Bootstrap 3 & 4.