#      
## Overview
In this shot, we learn how to use Bootstrap to apply styling to our HTML web pages.

We can visit this [link](https://www.educative.io/answers/how-to-add-bootstrap-to-html) to learn the basics of Bootstrap and how to add it to our HTML code.

The following are some points we should know about Bootstrap:

- Bootstrap just has the responsibility to add styling and dynamism to our web page.
- Bootstrap is a library.

## Applying Bootstrap styling to HTML
To apply Bootstrap styling to our web page, we can access the pre-made styling in its library via the class attribute of the HTML web page.

Like in regular CSS styling, we use an ID to target a specific part of the page or a class.

In Bootstrap, we only write custom CSS when it is necessary. For example, if we want to style a button, we just need to add the **`btn btn-primary`** class to the button. This is shown below:

<html>
<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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  
  </style>
</head>
<body>




  <button class="btn btn-primary">Button Sample</button>

</body>
</html>


codemirror

For certain styles, Bootstrap requires specific ways to nest our HTML elements.

<!DOCTYPE html>
<html>
<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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  
  </style>
</head>
<body>



<nav class="navbar navbar-inverse" >
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">nav bar</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

  
</body>
</html>



## Code explanation
* **Lines 19 to 26**: For a navigation bar, Bootstrap expects us to wrap the `li` element in the `ul` element, and the `ul` element in `nav` element. Also, we need to apply their class at each wrapping or nesting stage.

* **Line 19**: We use the **`navbar navbar-inverse`** class in the `nav` element to style the navigation and the nested element. This class is responsible for the positioning and background color of the navigation bar.


* **Line 20**: We use the `nav navbar-nav` class in the `ul` element to hold all the `li` items.

* **Line 21**: We use the **`active`** class to show the link item that is active on the current page.

* **Lines 22 to 24**: We use the `li` element to hold the `a` element. These are the navigation links.

How to apply Bootstrap styling to HTML

Use Bootstrap classes like `btn btn-primary` and `navbar navbar-inverse` to style HTML efficiently. Custom CSS is minimized.