In Bootstrap 4, NavBar is an essential component for menu purposes. To align menu items to right by using float-right class is works well in Bootstrap 3, but it doesn’t work in Bootstrap 4 because the navbar is now flexbox. The following approach will explain clearly.
In Bootstrap 4, NavBar contains so many items like text, link text, disable the link, dropdown buttons, forms, etc. To align text, link text, disable link and dropdown buttons to the right use class=”text-right”. But for forms use form class=”flex-row-reverse” to align right within NavBar. Using CSS properties might also help to align right within NavBar if the default class not needed.
Below example illustrates how to set hamburger items on the right in bootstrap 4.
- How to change Hamburger Toggler color in Bootstrap ?
- How to align navbar items to the right in Bootstrap 4 ?
- How to Align Navbar Items to Center using Bootstrap 4 ?
- How to cover the whole screen when the hamburger menu is pressed on smaller screens?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- How to remove items from a select box ?
- CSS | align-items Property
- CSS | Ordering Flex Items
- Minimum number of items to be delivered
- How to set vertical space between the list of items using CSS ?
- Use of :even and :odd pseudo-classes with list items in CSS
- Count ways to distribute m items among n people
- How to prevent line breaks in the list of items using CSS?
- Python | Count number of items in a dictionary value that is a list
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.