Bootstrap5 Tutorial

Bootstrap 教程

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

Bootstrap5 is currently the latest version of Bootstrap, an open-source toolkit for HTML, CSS, and JS development. It supports Sass variables and mixins, a responsive grid system, numerous prebuilt components, and powerful JavaScript plugins, helping you quickly design and customize responsive, mobile-first sites.

Who should read this tutorial?

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

Knowledge you need before reading this tutorial:

Before you start reading this tutorial, you must have basic knowledge of HTML, CSS, and JavaScript. If you are not familiar with these concepts, we recommend that you first read our tutorials:

Why use Bootstrap

  • Easy to get started:Anyone with a basic understanding of HTML and CSS can use Bootstrap very quickly.

  • Responsive design:Bootstrap can adapt to different platforms (mobile phones, tablets, and desktops).

  • Mobile-first:In Bootstrap, mobile adaptation 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 Examples

The following is a simple Bootstrap5 example:

Bootstrap5 Examples

<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>First column</h3> <p>Example</p> <p>What we learn is not only technology, but also dreams!!!</p> </div> <div class="col-sm-4"> <h3>Second column</h3> <p>Example</p> <p>What we learn is not only technology, but also dreams!!!</p> </div> <div class="col-sm-4"> <h3>Third column</h3> <p>Example</p> <p>What we learn is not only technology, but also dreams!!!</p> </div> </div> </div>

Try it yourself »

Bootstrap5 vs Bootstrap 3 & 4

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

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

The main difference between Bootstrap5 and Bootstrap 3 & 4 is that Bootstrap5 no longer depends on jQuery, but uses nativeJavaScript, of course, if we want to use it, we can also importjQuery。

Bootstrap5 IE11 and below browsers, Bootstrap4 dropped support for IE8 and iOS 6. If you need compatibility with older browsers, then useBootstrap3。

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

Other extensions