CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Thibs
Thibs

Reputation: 8288

Bootstrap 4 Beta 2 - navbar: align right no collapse

I'm trying to create a navbar with a button on the left and 2 icons, then buttons on the far right.

I can get it going with some examples I found, but I do not want any of the buttons to collapse on small screens.

Makes me wonder if I really need to use navbar, but here is my code that worked in alpha-6, in beta-2 the buttons do not stretch to the right, how can I accomplish this?

<nav class="navbar navbar-default fixed-top">
<div class="row">
    <div class="col">
        <div class="navbar-brand">
            <button type="button" class="btn btn-primary">
                <i class="fa fa-reorder"></i>
            </button>
            <img [src]="source/path" height="25px" /><img [src]="source/path" height="25px" />
        </div>
    </div>
    <div class="col col-auto text-right">
        <span class="logged-in-user">username</span>

        <button class="btn btn-secondary">
            <i class="fa fa-wechat"></i>
        </button>

        <button class="btn btn-secondary">
            <i class="fa fa-address-book"></i>
        </button>

        <button class="btn btn-secondary">
            <i class="fa fa-anchor"></i>
        </button>
    </div>
</div>
</nav>

Upvotes: 1

Views: 81

Answers (1)

Cray
Cray

Reputation: 5513

Make the row 100% in width and add ml-auto to the second col (instead of text-right):

Upvotes: 2

Related Questions