How to apply Bootstrap styling to HTML

Overview

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

We can visit this link 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:

The Bootstrap button

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

The Bootstrap navigation bar

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.

Free Resources