Move plus-minus icon on bootstrap accordion to extreme right

Question

I am trying to move the plus-minus icon on bootstrap accordion to extreme right position but my code doesn't seem to be working.

Here's the CSS past:

.mb-0 > a:before {
        float: right !important;
        font-family: FontAwesome;
        content:"\f068";
        padding-right: 5px;
    }
    .mb-0 > a.collapsed:before {
        float: right !important;
        content:"\f067";
    }
    .mb-0 > a:hover, 
    .mb-0 > a:active, 
    .mb-0 > a:focus  {
        text-decoration:none;
    }

And here's the HTML part:

<div class="accordion" id="accordionExample" style="margin-top: 3%;">
        <div class="card">
            <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <a class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    1. Human Growth and development
                </a>
            </h2>
            </div>

            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.</p>
            </div>
            </div>
        </div>

I want something like the example shown here: JSfiddle

Answer 1

Using display flex, I set the positions of the two elements. I added the required classes to collapse only when the plus button was pressed. That seems to solve your problem.

 Css: 

  #collapse-btn {
     display: flex;
     justify-content: space-between;
     align-items: center;
  }

 Html: 

  <h2 class="mb-0">
     <a class="btn btn-link collapsed" id="collapse-btn">
        1. Human Growth and development
        <i class="fas fa-plus" data-toggle="collapse" data-target="#collapseOne"></i>
     </a>
  </h2>

Answer 2

If you use ::after rather than ::before to place the icon after the text node, you can use a combination of display: flex and justify-content: space-between to position the icon:

.mb-0>a:after {
  float: right !important;
  font-family: FontAwesome;
  content: "\f068";
  padding-right: 5px;
}

.mb-0>a.collapsed:after {
  float: right !important;
  content: "\f067";
}

.mb-0>a:hover,
.mb-0>a:active,
.mb-0>a:focus {
  text-decoration: none;
}

.mb-0>a {
  display: flex;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample" style="margin-top: 3%;">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <a class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          1. Human Growth and development
        </a>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.</p>
      </div>
    </div>
  </div>

If you want to continue using :before, you could use order to position the icon after the text node:

.mb-0>a:before {
  float: right !important;
  font-family: FontAwesome;
  content: "\f068";
  padding-right: 5px;
  
  order: 2;
}

.mb-0>a.collapsed:before {
  float: right !important;
  content: "\f067";
}

.mb-0>a:hover,
.mb-0>a:active,
.mb-0>a:focus {
  text-decoration: none;
}

.mb-0>a {
  display: flex;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample" style="margin-top: 3%;">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <a class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          1. Human Growth and development
        </a>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.</p>
      </div>
    </div>
  </div>

Answer 3

Change padding-right:5px on panel-heading

.panel-heading{
  padding-right:3px;
}

http://jsfiddle.net/lalji1051/c1f9zr4v/1/