It has been fetched right from the Bootstrap website. The background colour comes from the class .bg-primary, but it can take any of the other colour classes mentioned on the Button page, or you can leave off the colour class and decide on your own colours.
When in medium or wide viewport mode, the menu items are left-aligned. They can be centered or right-aligned by changing the flex property 'Justify Content' to 'center' or 'flex-end' on the container with the ID #navbarNav.
As a bonus we have provided a second navbar, similar to the first one, but without any colour class and with right-aligned menu items. Take your pick and decide on your own colours!
And as if that was not enough, now we also have another custom navbar, this time with centered menu items.
Download the Standard Navbar component /displayed).
Bootstrap Standard Navbar
It has been fetched right from the Bootstrap website. The background colour comes from the class .bg-primary, but it can take any of the other colour classes mentioned on the Button page, or you can leave off the colour class and decide on your own colours.
When in medium or wide viewport mode, the menu items are left-aligned. They can be centered or right-aligned by changing the flex property 'Justify Content' to 'center' or 'flex-end' on the container with the ID #navbarNav.
As a bonus we have provided a second navbar, similar to the first one, but without any colour class and with right-aligned menu items. Take your pick and decide on your own colours!
And as if that was not enough, now we also have another custom navbar, this time with centered menu items.
Download the Standard Navbar component /displayed).
Download the Right-aligned Navbar component.
Download the Custom Centered Navbar component.