How to align a container to the right with Bootstrap?

Question

I would like to have an element aligned to the top right of the window. I wrote this:

  <div class="container-fluid fixed-top">
    <div class="row">
      <div class="col-8"><!-- dummy --></div>
      <div class="col-4 alert alert-primary">Here I am!</div>
    </div>
  </div>

The problem is that if I resize the window, the dummy column give an additional vertical space.

I tried to use float-right, but my div goes out from its container.

Is there a way just have my alert alert-primary have a minimum text-width (let's say 20 chars) and being right aligned?

Answer 1

You can do this (no extra CSS)...

<div class="container-fluid fixed-top">
    <div class="row">
        <div class="ml-auto col-auto alert alert-primary">Here I am!</div>
    </div>
</div>

https://www.codeply.com/go/KeorPCu7AR

The col-auto class minimizes the column width to fit its' content, and then ml-auto will push it to the right. This way you won't need the dummy column.

Edit

Also, it would be better to put the alert inside the column...

<div class="container-fluid fixed-top p-0">
    <div class="row">
        <div class="ml-auto col-auto">
            <div class="alert alert-primary">Here I am!</div>
        </div>
    </div>
</div>

---

Also see: Right aligned Bootstrap container which also aligns with default container