Bootstrap make an element at the end of the row

Question

I am using Bootstrap framework and need to make an element at the end of the row.

<div class="row">
    <div>div 1</div>
    <div>div end</div>
</div>

These divs are in a row -it is desired. But I need the "end div" element to pull to the right corner of the row. I tried many Bootstrap classes. but somewhat they stay adjacent.

from the doc `In a grid layout, content must be placed within columns and only columns may be immediate children of rows.` — Temani Afif, Feb 19 '18 at 11:34
possible duplicate of : https://stackoverflow.com/questions/45494882/css-float-right-not-working-in-bootstrap-4 — Temani Afif, Feb 19 '18 at 12:17

score 14 · Accepted Answer · answered Feb 19 '18 at 11:30

Since Bootstrap 4 uses flexbox or display: flex on row class you can just use ml-auto on second div which will add margin-left auto and push that div to the right side.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div>div 1</div>
    <div class="ml-auto">div end</div>
  </div>
</div>

Michel Engelen · Answer 2 · 2018-02-19T11:56:54.543

5

This is from the Bootstrap docs. By default each column is aligned/floated left, but with this the space in between the columns is equally distributed:

<div class="row justify-content-between">
    <div class="col-4">
        <div> Div 1 </div>
    </div>
    <div class="col-4">
        <div> Div End </div>
    </div>
</div>

It makes use of flexbox and there are several more options available to align your columns inside a row, or even wrap and nest them.

Read about it with this link: Bootstrap docs - Grid

With Bootstrap 4 there is another option for this. Because it makes use of flexbox you can add the .ml-auto to the last div in a row, but you should be wary of the overall row width (It should not exceed 12/12 columns widths). You can read anything about it in the Bootstrap 4 docs in the Layout/Grid section.

edited Feb 19 '18 at 11:56

answered Feb 19 '18 at 11:47

Michel Engelen

533
5
16

1

the only good answer that respect the Boostrap rules ! add the container and it will be perfect ;) – Temani Afif Feb 19 '18 at 11:49
Ah, well ... I should by more wary of the code that is provided ... I do have the habit of rewriting it like I would write it in the first place! ;) – Michel Engelen Feb 19 '18 at 12:02

score 1 · Answer 3 · answered Feb 19 '18 at 11:31

Try this.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<div class="">
    <div class="float-left">div 1</div>
    <div class="float-right">div end</div>
</div>
</div>

Bootstrap make an element at the end of the row

3 Answers3