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
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.
View all Courses