Right align text within Bootstrap 4 breadcrumbs

by

Update 2018 Bootstrap 4.1

float-* doesn’t work with flexbox.

The better way to align breadcrumbs items to the right now that Bootstrap 4 is flexbox is to use auto-margins. Simply don’t make the last item a breadcrumb-item to remove the divider and ml-auto to push it to the right.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active">Data</li>
        <li class="ml-auto">Basket</li>
    </ol>
</nav>

EDIT:

“How about if I have two <li>‘s that I want to right aligned? If I use
two <li class="ml-auto">Basket</li>, one is in the middle.”

In that case you would just use ml-auto on the leftmost (first) of the 2 li‘s.

https://www.codeply.com/go/6ITgrV7pvL

More Related Contents:

  1. How To Create This Type of Structure in html css and bootstrap?
  2. vertical-align with Bootstrap 3
  3. Bootstrap row with columns of different height
  4. How can I override Bootstrap CSS styles?
  5. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  6. Bootstrap 4: Multilevel Dropdown Inside Navigation
  7. Twitter Bootstrap 3 Sticky Footer
  8. Extend bootstrap row outside the container
  9. How to center nav-items in Bootstrap? [duplicate]
  10. Create a responsive navbar sidebar “drawer” in Bootstrap?
  11. How to make Bootstrap 4 cards the same height in card-columns?
  12. Bootstrap – align button to the bottom of card
  13. Bootstrap: add margin/padding space between columns
  14. How to remove focus around buttons on click
  15. Bootstrap – 5 column layout
  16. Bootstrap 4 – Sticky footer – Dynamic footer height
  17. Bootstrap 4 – Responsive cards in card-columns
  18. How to center content in a Bootstrap column?
  19. How to implement curve background in CSS? [duplicate]
  20. How do I add a margin between bootstrap columns without wrapping [duplicate]
  21. Inline Form nested within Horizontal Form in Bootstrap 3
  22. Why does `transform` break `position: fixed`?
  23. Bootstrap navbar: nothing is displayed on smaller devices
  24. Bootstrap 3 Glyphicons CDN
  25. Text-align class for inside a table
  26. How to move placeholder to top on focus AND while typing?
  27. Maintain image aspect ratio in carousel
  28. Bootstrap 3 Flush footer to bottom. not fixed
  29. Responsive table handling in Twitter Bootstrap
  30. justify-content: space-between failing to align elements as expected

Leave a Comment