Right aligning breadcrumb items in Bootstrap 4 (flexbox)

Asked Aug 03 '18 at 12:02

Active Sep 02 '18 at 07:28

Viewed 689 times

I'm using Bootstrap 4 (which uses flexbox for breadcrumbs) and I'm trying to have one of my breadcrumb items appear on the right hand side of the breadcrumb bar.

In bootstrap 3 this used to work:

<ul class="breadcrumb">
    <li><a href="/">Home</a> <span class="divider">/</span></li>
    <li class="active">Jobs</li>
    <li class="pull-right">
        <a href="/create" class="btn btn-default">
            New
        </a>
    </li>
</ul>

However in Bootstrap 4, this doesn't work, all 3 items are on the left (I've replaced pull-right with float-right as per the docs)

Edit

Not a duplicate - as mentioned I know to use float-right - it just doesn't work in breadcrumbs because these use flexbox.

edited Sep 02 '18 at 07:28

Richard

39,052
6
25
29

asked Aug 03 '18 at 12:02

Robbie Mills

2,705
7
52
87

Not a duplicate, I know what happened to them, they are replaced with float-left and float-right asI've indicated in my question – Robbie Mills Aug 03 '18 at 12:06
1

Breadcrumbs are now flexbox, so use auto margins or flexbox utils to align right: https://www.codeply.com/go/6ITgrV7pvL – Carol Skelly Aug 03 '18 at 12:15
Thanks! How do I get rid of the divider for the last item? – Robbie Mills Aug 03 '18 at 12:18
1

You should use `breadcrumb-item` to make dividers and don't use it on the last item. see the 2nd example: https://www.codeply.com/go/6ITgrV7pvL – Carol Skelly Aug 03 '18 at 12:27

Right aligning breadcrumb items in Bootstrap 4 (flexbox)

0 Answers0