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.

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="utf-8">   
  </head>  
</html>
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.
<meta name="viewport" content="width=device-width, initial-scale=1">
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:
  • 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>
Try Now