Bootstrap Example

html-css-logo

Bootstrap uses HTML elements and CSS properties, so you have to add the HTML 5 doctype at the beginning of the page with the lang attribute and correct character set.

Ex:

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

Bootstrap is mobile-friendly: Bootstrap 3 is designed to be responsive to mobile devices.

Mobile-first styles are part of the core framework of Bootstrap. You have to add the following <meta> tag inside the <head> element for proper rendering and touch zooming:

<meta name="viewport" content="width=device-width, initial-scale=1">

Note: The “width=device-width” part is used to set the width of the page to follow the screen width of the device (vary according to the devices).

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

Containers: the container is used to wrap the site contents. There are two container classes.

  • 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.

Note: A container cannot be placed inside a container.

First Bootstrap Example (with responsive fixed width container)

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>This is a Bootstrap example</title>  
    
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
</head>  
<body>  
<div class="container">  
  <h1> First Bootstrap web page</h1>  
  <p>Write your text here..</p>   
</div>  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</body>  
</html>