English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Basic Tutorial

Bootstrap4 Tutorial

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

Bootstrap4 This is the latest version of Bootstrap, an open-source toolkit for developing with HTML, CSS, and JS. With the provided Sass variables, a large number of mixins, a responsive grid system, extendable pre-built components, and a powerful plugin system based on jQuery, you can quickly develop prototypes for your ideas or build entire apps.

Who is this tutorial suitable for?

If you have a basic understanding 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 required before reading this tutorial:

Before you start reading this tutorial, you must have a basic understanding of HTML, CSS, and JavaScript. If you are not familiar with these concepts, it is recommended that you read our tutorials on these topics first:

Bootstrap4 Example

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap4　Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
　　<h1>My first Bootstrap page</h1>
　　<p>Resize the browser to see the effect!</p>/p>　
</div>
　
<div class="container">
　　<div class="row">
　　　　<div class="col-sm-4">
　　　　　　<h3>First column</h3>
　　　　　　<p>Basic tutorial</p>
　　　　　　<p>Learn the basics well, and you can go further!!!</p>/p>
　　　　</div>
　　　　<div class="col-sm-4">
　　　　　　<h3>Second column</h3>
　　　　　　<p>Basic tutorial..</p>
　　　　　　<p>Learn the basics well, and you can go further!!!</p>/p>
　　　　</div>
　　　　<div class="col-sm-4">
　　　　　　<h3>Third column</h3>　
　　　　　　<p>Basic tutorial..</p>
　　　　　　<p>Learn the basics well, and you can go further!!!</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

Bootstrap4 　compatible with Bootstrap3

Bootstrap4 is the latest version of Bootstrap, compatible with Bootstrap3 compared to having more specific classes and turning some related parts into related components. At the same time, the volume of Bootstrap.min.css has been reduced4over 0%.

Bootstrap4 abandoned support for IE8 and iOS 6 support, now only supports IE9 and iOS 7 browser versions. If you need to use older browsers, then please use Bootstrap3.

Note: By default, Bootstrap 4Will use mobile-first methods for responsiveness. Bootstrap 4.3is the latest and most stable version of Bootstrap. All major modern browsers support Bootstrap 4, such as Google Chrome, Firefox, Safari, Internet Explorer 10and higher versions, etc.
Bootstrap4 Installation and Usage