Podcast
Questions and Answers
What is the purpose of adding a responsive collapsing class to a navigation bar in Bootstrap?
What is the purpose of adding a responsive collapsing class to a navigation bar in Bootstrap?
What is the class used to center a navigation bar in Bootstrap?
What is the class used to center a navigation bar in Bootstrap?
What is the purpose of the .navbar-dark class in Bootstrap?
What is the purpose of the .navbar-dark class in Bootstrap?
How do you create a standard navigation bar in Bootstrap?
How do you create a standard navigation bar in Bootstrap?
Signup and view all the answers
What is the purpose of the .bg-color classes in Bootstrap?
What is the purpose of the .bg-color classes in Bootstrap?
Signup and view all the answers
What is the class used to remove the collapsing feature of a navigation bar in Bootstrap?
What is the class used to remove the collapsing feature of a navigation bar in Bootstrap?
Signup and view all the answers
What is the purpose of the .navbar-brand class in Bootstrap?
What is the purpose of the .navbar-brand class in Bootstrap?
Signup and view all the answers
What is the class used to vertical align any elements inside the navbar that are not links?
What is the class used to vertical align any elements inside the navbar that are not links?
Signup and view all the answers
What attribute is used to specify the target of the collapsible navigation bar?
What attribute is used to specify the target of the collapsible navigation bar?
Signup and view all the answers
How can you create a fixed navigation bar at the top or bottom of the page?
How can you create a fixed navigation bar at the top or bottom of the page?
Signup and view all the answers
What is the purpose of the .navbar-toggler class in Bootstrap?
What is the purpose of the .navbar-toggler class in Bootstrap?
Signup and view all the answers
What can you include inside the navigation bar using Bootstrap?
What can you include inside the navigation bar using Bootstrap?
Signup and view all the answers
What class makes the navigation bar fixed at the top?
What class makes the navigation bar fixed at the top?
Signup and view all the answers
Which class is used to make the navbar stay at the bottom of the page?
Which class is used to make the navbar stay at the bottom of the page?
Signup and view all the answers
What classes are used to change the width of the border?
What classes are used to change the width of the border?
Signup and view all the answers
Which class is used to center an element?
Which class is used to center an element?
Signup and view all the answers
What classes are used to set the width of an element?
What classes are used to set the width of an element?
Signup and view all the answers
What class is used to float an element to the right?
What class is used to float an element to the right?
Signup and view all the answers
Study Notes
Bootstrap Navigation Bars
- 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
.navbarclass, followed by a responsive collapsing class (e.g..navbar-expand-lgfor large screens). - To add links inside the navbar, use either a
<ul><li>or</li></ul><div>element with classnavbar-nav, and then add `` elements with classnav-itemand<a>elements with classnav-link. - To create a vertical navigation bar, remove the
.navbar-expand-*class. - To center the navigation bar, add the
.justify-content-centerclass.
Customizing Navigation Bars
- To change the background color of the navbar, use any of the
.bg-colorclasses (e.g..bg-primary,.bg-success, etc.). - To add a white text color to all links in the navbar, use the
.navbar-darkclass, or use the.navbar-lightclass for a black text color.
Navbar Brand/Logo
- The
.navbar-brandclass is used to highlight the brand/logo/project name of your page. - When using the
.navbar-brandclass with images, Bootstrap will automatically style the image to fit the navbar vertically.
Navbar Text
- The
.navbar-textclass is used to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).
Collapsible Navigation Bars
- To create a collapsible navigation bar, use a button with class
navbar-toggler,data-bs-toggle="collapse", anddata-bs-target="#thetarget". - Wrap the navbar content (links, etc.) inside a
</a><div><a>element with classcollapse navbar-collapse, followed by an id that matches thedata-bs-targetof the button.
Navbar Forms and Buttons
- You can include forms inside the navigation bar.
Fixed Navigation Bars
- To make the navigation bar fixed at the top or bottom of the page, use the
.fixed-topor.fixed-bottomclass, respectively. - The
.sticky-topclass 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-1to.border-5to 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-endclass or to the left with.float-start, and clear floats with the.clearfixclass.
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.).
