bootstrap 4 col align right with ml-auto

Question

I want to align the navigation to the right, but using .ml-auto with .d-flex is not working and I do not understand why.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="panel-form">
  <div class="row">
    <div class="col-lg-3">
      <form action="">
      <input type="text" placeholder="Искать по имени" class="form-control">
      </form>
    </div>
    
 <div class="col-lg-9"

        <ul class="nav nav-pills justify-content-end">
        <li class="nav-item pl-4"><a href="#" class="nav-link active">Active</a></li>
        <li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
        <li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
        <li class="nav-item pl-4"><a href="#" tabindex="-1" aria-disabled="true" class="nav-link disabled">Disabled</a></li>
        </ul>
      </div>
    </div>
</div>

For anyone coming to this question while upgrading from Bootstrap 4 to 5, I found the answer in https://stackoverflow.com/questions/63948287/bootstrap-5-navbar-align-items-right (use `ms-auto` instead of `ml-auto` in Bootstrap 5) — Eric Walker, Sep 06 '22 at 21:37

score -1 · Answer 1 · answered Apr 15 '19 at 21:00

Since Bootstrap 4.x already applies Flexbox layout to its Navigational component you need to rely on Flexbox-oriented alignment utilities. For the described behavior you're asking for you can opt for just a single additional class: justify-content-end

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<ul class="nav nav-pills justify-content-end">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
</ul>

Bootstrap 4.x has a lot of different alignment utilities that work best with Flexbox or with more basic placements. I highly recommend reviewing its documentation for justifying and aligning Flexbox content

But then is not responsive :( I need how In stackoverflow do: https://stackoverflow.com/tags — Mafys Grif, Apr 15 '19 at 21:01
You original question did not indicate that responsive behavior was necessary. That being said, `justify-content-*` is subject to responsive breakpoints, which you would know if you had reviewed the documentation I linked. — Robert, Apr 16 '19 at 12:52

IvanS95 · Accepted Answer · 2019-04-15T21:27:26.023

-1

If you inspect the elements, there's no "empty" space between the columns to add the margin, since both columns are using the full 12 slots; instead you should place the ml-auto class in the ul element, which is not using the full available width, and can be moved inside its parent;

The other option is actually using the flex-utilities that Bootstrap provides to align and justify content inside a flex-container.

Edit: Since what you need is to keep the size of the input; you can set that column to col-auto, this will make that column use only the space needed to contain its elements; then in the other column you can use col so it uses all the remaining space without having to set an specific amount of slots; finally you can again use the flex utilities like justify-content-end on the ul element so it sticks to the right side.

There are many options to apply a size to a column, read Grid System

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="panel-form">
  <div class="row justify-content-between">
    <div class="col-auto">
      <form action="">
        <input type="text" placeholder="Искать по имени" class="form-control">
      </form>
    </div>

    <div class="col">
      <ul class="nav nav-pills justify-content-end flex-nowrap">
        <li class="nav-item pl-4"><a href="#" class="nav-link active">Active</a></li>
        <li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
        <li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
        <li class="nav-item pl-4"><a href="#" tabindex="-1" aria-disabled="true" class="nav-link disabled">Disabled</a></li>
      </ul>
    </div>
  </div>
</div>

edited Apr 15 '19 at 21:27

answered Apr 15 '19 at 21:03

IvanS95

5,364
4
24
62

But how I can do this responsive? Now looks is bad :( – Mafys Grif Apr 15 '19 at 21:04
What do you mean with "responsive"? what behavior do you expect? It is rezising as it should as per Bootstrap standard – IvanS95 Apr 15 '19 at 21:06
how I can do resize how in stackoverflow on page tags? https://stackoverflow.com/tags – Mafys Grif Apr 15 '19 at 21:14
You are not being clear, what difference do you see on how its resizing on the snippet in comparison to the tags page? – IvanS95 Apr 15 '19 at 21:15
I need input do not resize, how on stackoverflow. Now your input is resize, and if screen size < 500, then input is small. – Mafys Grif Apr 15 '19 at 21:18
Good, now its clearer, I edited the answer, take a look – IvanS95 Apr 15 '19 at 21:21
Check please: https://imgur.com/a/BeNBbvp can we do how on stackoverflow? Now navs go on bottom.. – Mafys Grif Apr 15 '19 at 21:29
Yes, they go to the bottom because of the size you gave them; if you reduce StackOverflow more they do the same thing; if you don't want them to go to the bottom you can resize them; this goes beyond your original question about aligning the items to the right – IvanS95 Apr 15 '19 at 21:31

bootstrap 4 col align right with ml-auto

2 Answers2