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?
- How to convert the hamburger icon of navigation menu to X on click ?
- How to align navbar items to the right in Bootstrap 4 ?
- How to Align Navbar Items to Center using Bootstrap 4 ?
- How to put items underneath each other flex box in Bootstrap 4 ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- How to load notification alert on top right corner without click of button in bootstrap ?
- How to place button in top Right corner using bootstrap?
- .pull-left and .pull-right classes in Bootstrap 4
- How to align button to right side of text box in Bootstrap?
- How to set vertical space between the list of items using CSS ?
- Count ways to distribute m items among n people
- Minimum number of items to be delivered
- 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
- Use of :even and :odd pseudo-classes with list items in CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. 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.