Bootstrap5 Tutorial

Bootstrap 教程

Bootstrap is the world's most popular front-end component library, used for developing responsive, 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, extensive prebuilt components, and powerful JavaScript plugins, helping you quickly design and customize responsive, mobile-first sites.

Who is this tutorial for?

As long as you have a 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 of 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 yet familiar with these concepts, we suggest you read these tutorials first:

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 adjust according 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 faster responsiveness.

Bootstrap5 supports all major latest stable versions of 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, and uses nativeJavaScriptOf course, if we want to use it, we can also introduce it.jQuery。

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

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

Other extensions