Bootstrap4 Tutorial

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

Bootstrap4 is an open-source toolkit for developing with HTML, CSS, and JS. Using our Sass variables and a large number of mixins, a responsive grid system, extensible prebuilt components, and a powerful jQuery-based plugin system, you can quickly develop prototypes or build entire apps for your ideas.

Who is this tutorial for?

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

What you need to know 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, it is recommended that you first read these tutorials:

Bootstrap4 Examples

<div class="jumbotron text-center"> <h1>My first Bootstrap page</h1> <p>Resize the browser to see the effect!</p> </div> <div class="container"> <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 »

Bootstrap4 and Bootstrap3

Bootstrap4 is the latest version of Bootstrap. Compared with Bootstrap3, it has more specific classes and turns some related parts into corresponding components. At the same time, the size of Bootstrap.min.css has been reduced by more than 40%.

Bootstrap4 has dropped support for IE8 and iOS 6, and now only supports IE9+ and iOS 7+ browsers. If you need to use older browsers, please useBootstrap3。

Other extensions