How much horizontal space the Navbar takes up is dependent on how it is placed on the page. You do not need to mess with the Display or Float settings at all. Changing how the navigation links align in the Navbar is achieved by expanding the Navbar component in the overview panel, selecting the Nav component, and then going to the Option Panel and Changing the Alignment setting under the “Nav In Navbar” heading.
If you start with a new blank page using Bootstrap 5, and drop a standard Bootstrap Navbar on to the Body of the page, it will automatically take up the full width of the page. The Navbar is transparent by default. You can set the background color by clicking on the Navbar component in the overview panel and going to the Options panel > Navbar Options > Background and change the Background. If you change this setting to Success, you will see that it will look just like the last image in your examples above.
If you place a standard Bootstrap Container on your page, and then place the Navbar component inside of it, it will take up the full width of the container (less the horizontal padding that is built into the Container.) The Container width is determined by the default CSS settings assigned to it by Bootstrap at the different breakpoints. If you click on the Navbar in the overview panel and go to Options > Navbar Options > Background and set the background color, you will now find the background color only takes up the width of the container (less the built-in padding.)
The Container width can be set to fill the entire width of the browser by clicking on the Container and going to Options > Container Options and setting Fluid to “on.” However, you will still notice white spaces on each end of the navbar. This is because of the built-in padding on the Container.
In this case you can do one of two things… you can remove the padding from the Container (generally not desirable,) or you can set the background color of the Container by clicking on the Container in the Overview panel, and then going to the Option panel and choosing Decorations > Background, and choosing your color (Success would give you a green background.) Because the padding takes on the color assigned to the Component, and the Navbar is transparent, it will again look like your bottom example (or your top example, if you have not set the Container to Fluid.
If you want to get rid of the padding on the container in Bootstrap 5, you must write new CSS to override the default Bootstrap padding rules. If you’re using Bootstrap 4.x you can either write new CSS, or apply Bootstrap utility classes to the the Container component via the Attributes panel. In this case, you would use pl-0 and pr-0 to remove the padding.
In general, the Navbar is meant to be put directly on the body of the page, unless you’re building a website where you do not want the website to take up the full width of the screen.
There are multiple way to add Navbars to Bootstrap websites, and multiple ways to color things, depending on what you want to website to look like. The version of Bootstrap you are using will also play a part in how you would go about styling components.
