Bootstrap Lecture 5

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 .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.

Customizing Navigation Bars

• 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.

Navbar Brand/Logo

• 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.

Navbar Text

• The .navbar-text class 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", 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.

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-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.).