Bootstrap 4 align elements right inside a col div

Question

My question is pretty simple but I don't find a proper way (I mean not use absolute positionning of sub elements inside a relative position container) to achieve this in Bootstrap 4.

I have a row with a col-8 and a col-4. My content in col-4 must be right aligned so its content is at the right border.

<h1 class="col-md-8">Applications portfolio</h1>

  <div class="btn-group col-md-4" role="group">
    <p class="float-right">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
  </div>

Here is a codepen:

https://codepen.io/anon/pen/QpzVgJ

I want my two buttons to right align within the col-4.

How in Bootstrap 4 to properly align right elements within a col?

Solution 1

Use ml-auto to push the buttons to the right...

https://codepen.io/anon/pen/evbLQN

<div class="btn-group col-md-4" role="group">
    <p class="ml-auto">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
</div>

Another option is to remove the btn-group from the col-md-4, and then float-right will work as expected. The pull-right class was replaced by float-right in Bootstrap 4.

<section class="row">
  <h1 class="col-md-8">Applications portfolio</h1>

  <div class="col-md-4" role="group">
    <p class="float-right">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
  </div>
</section>

---

PS - To prevent the horizontal scrollbar visible in your Codepen, make sure the .row is placed inside a container-fluid. Also, generally col-* are used to contain content, and shouldn't be applied to other components/elements. So, for example if you wanted to use the btn-group..

<div class="container-fluid">
    <section class="row">
        <div class="col-md-8">
            <h1>Applications portfolio</h1>
        </div>
        <div class="col-md-4">
            <div class="btn-group float-right mt-2" role="group">
                <a class="btn btn-secondary btn-md" href="#">
                    <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
                <a class="btn btn-md btn-secondary" href="#">
                    <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
            </div>
        </div>
    </section>
</div>

http://www.codeply.com/go/8OYDK5D8Db

---

Related: Right align element in div class with bootstrap 4

Solution 2

The btn-groupclass in that md-4 makes that DIV a flex container, so a regular text-right class for the alignment won't work. Instead, add justify-content: flex-end; in a style attribute to it:

<div class="btn-group col-md-4 text-right" role="group" style="justify-content: flex-end;">

https://codepen.io/anon/pen/RpEYEM

(note: I erased the p tag inside that DIV)

Solution 3

There a couple of issues with the markup provided that makes the layout look odd. @ZimSystem menioned the .container-fluid but also that you should always have a div.col inside a .row so that you get the same kind of padding on the edges.

You don't need a <p> around the buttons. To get the alignment simply add .ml-auto to the first button like this:

<div class="container-fluid">
<section class="row mb-2 mt-2">
  <h1 class="col-md-8">Applications portfolio</h1>

  <div class="btn-group col-md-4" role="group">
      <a class="btn btn-secondary btn-md ml-auto" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
  </div>
</section>

<section class="row" style="background-color: grey; height: 50px; overflow:hidden;">
  <div class="col">
    <p>Just a simple reference block to see the 100% width</p>
  </div>
</section>
</div>