Bootstrap4 Tutorial

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

Bootstrap4 is an open-source toolkit for developing with HTML, CSS, and JS. With our Sass variables and numerous mixins, the responsive grid system, extensible prebuilt components, and the powerful jQuery-based plugin system, you can quickly prototype your ideas or build a whole app.

Who is this tutorial for?

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

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 read our tutorials first:

Bootstrap4 Examples

<div class="jumbotron text-center"> <h1>My first Bootstrap page</h1> <p>Resize the browser window 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>Learning is not only about technology, but also about dreams!!!</p> </div> <div class="col-sm-4"> <h3>Second column</h3> <p>Example..</p> <p>Learning is not only about technology, but also about dreams!!!</p> </div> <div class="col-sm-4"> <h3>Third column</h3> <p>Example..</p> <p>Learning is not only about technology, but also about dreams!!!</p> </div> </div> </div>

Try it »

Bootstrap4 vs Bootstrap3

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

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

Other extensions