Bootstrap Lecture 5

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the purpose of adding a responsive collapsing class to a navigation bar in Bootstrap?

To add links inside the navigation bar

To make the navigation bar responsive to screen size (correct)

To change the background color of the navigation bar

To make the navigation bar always visible

What is the class used to center a navigation bar in Bootstrap?

.justify-content-end

.nav-justify-center

.justify-content-center (correct)

.justify-content-start

What is the purpose of the .navbar-dark class in Bootstrap?

To add a white text color to all links in the navbar

To make the navbar always visible

To change the background color of the navbar

To add a black text color to all links in the navbar (correct)

How do you create a standard navigation bar in Bootstrap?

With the .navbar class Signup and view all the answers

What is the purpose of the .bg-color classes in Bootstrap?

To change the background color of the navbar Signup and view all the answers

What is the class used to remove the collapsing feature of a navigation bar in Bootstrap?

Removing the .navbar-expand-* class Signup and view all the answers

What is the purpose of the .navbar-brand class in Bootstrap?

To highlight the brand/logo/project name of your page Signup and view all the answers

What is the class used to vertical align any elements inside the navbar that are not links?

.navbar-text Signup and view all the answers

What attribute is used to specify the target of the collapsible navigation bar?

data-bs-target Signup and view all the answers

How can you create a fixed navigation bar at the top or bottom of the page?

By using a fixed position Signup and view all the answers

What is the purpose of the .navbar-toggler class in Bootstrap?

To create a collapsible navigation bar Signup and view all the answers

What can you include inside the navigation bar using Bootstrap?

Forms and buttons Signup and view all the answers

What class makes the navigation bar fixed at the top?

.fixed-top Signup and view all the answers

Which class is used to make the navbar stay at the bottom of the page?

.fixed-bottom Signup and view all the answers

What classes are used to change the width of the border?

.border-1 to .border-5 Signup and view all the answers

Which class is used to center an element?

.mx-auto Signup and view all the answers

What classes are used to set the width of an element?

.w-25 to .w-100 Signup and view all the answers

What class is used to float an element to the right?

.float-end Signup and view all the answers

Study Notes

A navigation bar is a navigation header that is placed at the top of the page, and can extend or collapse depending on the screen size.
To create a standard navigation bar, use the .navbar class, followed by a responsive collapsing class (e.g. .navbar-expand-lg for large screens).
To add links inside the navbar, use either a <ul><li> or </li></ul><div> element with class navbar-nav, and then add `` elements with class nav-item and <a> elements with class nav-link.
To create a vertical navigation bar, remove the .navbar-expand-* class.
To center the navigation bar, add the .justify-content-center class.

To change the background color of the navbar, use any of the .bg-color classes (e.g. .bg-primary, .bg-success, etc.).
To add a white text color to all links in the navbar, use the .navbar-dark class, or use the .navbar-light class for a black text color.

The .navbar-brand class is used to highlight the brand/logo/project name of your page.
When using the .navbar-brand class with images, Bootstrap will automatically style the image to fit the navbar vertically.

The .navbar-text class is used to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).

To create a collapsible navigation bar, use a button with class navbar-toggler, data-bs-toggle="collapse", and data-bs-target="#thetarget".
Wrap the navbar content (links, etc.) inside a </a><div><a> element with class collapse navbar-collapse, followed by an id that matches the data-bs-target of the button.

You can include forms inside the navigation bar.

To make the navigation bar fixed at the top or bottom of the page, use the .fixed-top or .fixed-bottom class, respectively.
The .sticky-top class makes the navbar fixed/stay at the top of the page when you scroll past it (does not work in IE11 and earlier).

Bootstrap Borders

Use the border classes to add or remove borders from an element.
Use .border-1 to .border-5 to change the width of the border.
Add a color to the border with any of the contextual border color classes.
Add rounded corners to an element with the rounded classes.

Bootstrap Float and Clearfix

Float an element to the right with the .float-end class or to the left with .float-start, and clear floats with the .clearfix class.

Bootstrap Width and Height

Set the width of an element with the w-* classes (e.g. w-25, w-50, etc.).
Set the height of an element with the h-* classes (e.g. h-25, h-50, etc.).