Home >>Bootstrap Tutorial >Bootstrap Example

Bootstrap Example

Bootstrap Example

Add the HTML 5 doctype: This is most important that you have to add the HTML 5 doctype at the beginning of the page with lang attribute and correct character set , bootstrap uses HTML elements and CSS properties.

Let's take an Example of Bootstrap:

<!DOCTYPE html>    
<html lang="en">    
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">  
    <title>Write your title</title>    
</head>    
<body>    
//write code    
</body>    
</html>  

Bootstrap is mobile friendly: Bootstrap 3 is basically designed to be most responsive towards mobile devices.

The programmers add <Meta> tag inside the <head> element for proper rendering the core framework of bootstrap are mobile-first styles:

The width=device-width part is used to set the initial zoom level when the page is first loaded by the browser.

It can set the initial zoom level, when the page is first loaded by the browser. The initial-scale=1 work in meta tag.

Let's take an example:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap example</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
</head>  
<body>
<div class="container" style="background: #7fbbf0;">    
 <h4>This is my first heading in bootstrap</h4>  
<p>This is my first paragraph in bootstrap</p> 
<div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> 
</body>  
</html>
Output:

This is my first heading in bootstrap

This is my first paragraph in bootstrap


Popular Tutorials