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:
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:
For certain styles, Bootstrap requires specific ways to nest our HTML elements.
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.