Bootstrap First Example
1) Add HTML5 doctype
Before starting the example of Bootstrap, we should know about the some basic rules of Bootstrap. We have to add HTML5 doctype with lang element and CSS properties.
2) Bootstrap 3 is mobile-first
The latest version of Bootstrap is used to create responsive website for mobile devices. We have to use <meta> tag inside the <head> element for better performance like rendering and touch zooming.
3) Containers
Containers are the layout element in Bootstrap. It is required while using default grid system. It wraps the content of the site. There are two classes of the container that are given below:
Try Now
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1">
- The .container class provides a responsive fixed width container.
- The .container-fluid class provides a full width container, spanning the entire width of the viewport.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>We are learning Bootstrap</h2>
</div>
</body>
</html>