0

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.

Richard
  • 34,518
  • 6
  • 26
  • 27
Robbie Mills
  • 2,281
  • 4
  • 34
  • 72
  • 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 – Zim 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 – Zim Aug 03 '18 at 12:27

0 Answers0