What is Bootstrap?

Bootstrap is world’s most popular front-end component library for developing responsive, mobile-first sites with HTML, CSS, and JS. It is free and open source framework. You can download the files from here.

Bootstrap 3 vs. Bootstrap 4

Bootstrap v4 is the newest version of Bootstrap with new components which is completely free to download and use! Click here to know what's new in Bootstrap v4.

Get Started with Bootstrap v4

Either you can download Bootstrap v4 form here, or you can directly include requires files from MaxCDN

<!-- Latest bootstrap v4 file -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- bootstrap v4js file -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Doctype

Bootstrap requires the use of the HTML5 doctype.

<!doctype html>
<html lang="en">
  ...
</html>

Responsive viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Reboot

For improved cross-browser rendering, bootstrap v4 use Reboot to correct irregularity across browsers and devices while providing slightly more options to common HTML elements.

Containers

Bootstrap 4 provides two container classes, .container and .container-fluid

.container This provides a responsive fixed width container
.container-fluid This provides a full width container, spanning the entire width of the viewport

Example with .container

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap v4 container Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Latest bootstrap v4 file -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- bootstrap v4js file -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap v4 Page with container</h1>
<p>Lorem ipsum </p>
</div>
</body>
</html>

Example with .container-fluid

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap v4 container-fluid Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Latest bootstrap v4 file -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- bootstrap v4 js file -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap v4 Page with container-fluid</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</body>
</html>
Download Files

Top