'Right align text within Bootstrap 4 breadcrumbs

I want to right align a link within bootstrap 4's breadcrumb class. I did this pretty easily with pull-right class in BS3, however BS4's 'float-right' does not do the job.

For example:

<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" aria-current="page">Data</li>
    <a href="Basket" class="float-right">Basket</a>
  </ol>
</nav>

In this case it doesnt float-right at all and I cannot seem to work out a solution. How can I do this?

htmlcsstwitter-bootstrap


Solution 1:[1]

Bootstrap dropped pull-left and pull-right in v4 and replaced it with float-left and .float-right.

Here below is a work around with the new flex-box I hope it helps

<nav aria-label="breadcrumb" class="breadcrumb d-flex justify-content-between">
  <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" aria-current="page">Data</li>

    </ol>   
<a href="#">Basket</a>  
</nav>

You can refer to this section of the Bootstrap documentation Bootstrap 4 Docs

Solution 2:[2]

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

Solution 3:[3]

Use just like this in Bootstrap v4+

<nav aria-label="breadcrumb">
    <ol class="breadcrumb justify-content-center">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

Solution 4:[4]

Simply call ml-auto class in the first item of breadcrumb :)

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item ml-auto"><a href="index.html">Home</a></li>
    <li class="breadcrumb-item" aria-current="page">Menu</li>
  </ol>
</nav>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Julien van der Kluft
Solution 2
Solution 3 Sanu
Solution 4 Zafar Faheem

Related Questions