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. This is because of the built-in padding on the Container. 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. 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.) 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 change this setting to Success, you will see that it will look just like the last image in your examples above. 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 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. 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. You do not need to mess with the Display or Float settings at all. How much horizontal space the Navbar takes up is dependent on how it is placed on the page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |