Progress Bar in Bootstrap 4 is mainly used to indicate to the user, how much progress of the process is done. progress bars featuring support for stacked bars, animated backgrounds, and text labels. Use utility classes for the background (bg-success, bg- info, bg-light, bg-dark, bg-danger, bg-warning) for creating a progress bar with a different color.
Where to use Progress Bar:-
Progress Bar With Label by placing text within the .progress-bar.
Progress Bar With Height.
Colored Progress Bar by using .progress-bar-sucess|info|warning|danger.
Striped Progress Bar by using .progress-bar-striped class.
Animated Progress Bar by using .active class.
Stacked Progress Bars by using <div class=”progress”>.
The navbar is one of the prominent features of Bootstrap sites. A navigation bar is a navigation header that is placed at the top of the page. the navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class.
Format of nav bar:-
Vertical Navbar by using class=”navbar-nav”.
Centered Navbar by using .justify-content-center class to center the navigation bar.
Colored Navbar by using any of the .bg-color classes to change the background color of navbar.
Brand/Logo by using .navbar-brand class is used to highlight the brand/logo/project name of your page.
Collapsing The navbar To create a collapsible navigation bar, use a button with class=”navbar-toggler”, data-toggle=”collapse” and data-target=”#thetarget”.
Navbar With Dropdown.
Navbar Froms and Buttons Add a <form> element with class=”form-inline” to group inputs and buttons side-by-side.
Nevbar Text use .navbar-text class to vertically align any elements inside the navbar that are not links.
Fixed Navbar by using .fixed-top or .fixed-bottom class to make the navbar fixed.
Sticky navbar use the .sticky-top class to make the navbar fixed/stay at the thop of the page.