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 cover the whole screen when the hamburger menu is pressed on smaller screens?
- Include Bootstrap in AngularJS using ng-bootstrap
- CSS | Ordering Flex Items
- CSS | align-items Property
- How to remove items from a select box ?
- Minimum number of items to be delivered
- Use of :even and :odd pseudo-classes with list items in CSS
- How to prevent line breaks in the list of items using CSS?
- Count ways to distribute m items among n people
- Python | Count number of items in a dictionary value that is a list
- What's new in Bootstrap v4.3 ?
- Bootstrap 4 | Images
- Bootstrap 4 | Typography
- Bootstrap 4 | Jumbotron
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.