CODEWITHSUNDEEP
htmlcssbootstrap-4
Gngogh
Gngogh

Reputation: 177

Bootstrap 4 align icon with <a> tag

I am trying to align an icon with text, but when using the .float-right class on the icon, it gets dis-aligned with the text.

<div class="card mb-0">
  <div class="card-header collapsed" data-toggle="collapse" href="#collapse1">
    <a class="card-title text-primary"><i class="fa fa-plus align-middle float-right"></i> Diagnostic</a>
  </div>
  <div id="collapse1" class="collapse">
    <textarea name="diagnostic" class="form-control rounded-0" style="height: 120px; resize: none;"></textarea>                         
   </div>
</div>

If I remove the .float-right the icon gets properly align with text on the left.

Can anybody help me to understand the alignment properties in Bootstrap 4?

Upvotes: 2

Views: 6827

Answers (3)

Nitheesh
Nitheesh

Reputation: 19986

I think this is what you are looking for. You can align the contents inside a div using justify-content property.

Basically display :flex has two axes Main Axes and Cross Axes. Main Axes aligns items in horizontal direction which makes use of justify-content property, Cross Axes aligns the contents in vertical direction with help of align-items property.

enter image description here

Also never make use of float along with flex.

.card-item-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous"
  />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
<div class="container">
  <div class="card mb-0">
    <div class="card-header collapsed" data-toggle="collapse" href="#collapse1">
      <a class="card-title text-primary card-item-container">
        <span>Diagnostic</span>
        <i class="fas fa-cloud align-middle"></i>
      </a>
    </div>
    <div id="collapse1" class="collapse">
      <textarea name="diagnostic" class="form-control rounded-0" style="height: 120px; resize: none;"></textarea>
    </div>
  </div>
</div>

Upvotes: 1

Delowar Hosain
Delowar Hosain

Reputation: 2359

You can use d-flex & justify-content-xxxx class to align you content.

Here's the full docs: https://getbootstrap.com/docs/4.4/utilities/flex/#justify-content

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- justify-content-between -->
<div class="card mb-0">
  <div class="card-header collapsed" data-toggle="collapse" href="#collapse1">
    <a class="card-title text-primary m-0 d-flex align-items-center justify-content-between">
      <i class="fa fa-plus"></i> <span>Diagnostic</span>
    </a>
  </div>
  <div id="collapse1" class="collapse">
    <textarea name="diagnostic" class="form-control rounded-0" style="height: 120px; resize: none;"></textarea>                         
   </div>
</div>

<!-- justify-content-around -->
<div class="card mb-0">
  <div class="card-header collapsed" data-toggle="collapse" href="#collapse1">
    <a class="card-title text-primary  m-0 d-flex align-items-center justify-content-around">
      <i class="fa fa-plus"></i> <span>Diagnostic</span>
    </a>
  </div>
  <div id="collapse1" class="collapse">
    <textarea name="diagnostic" class="form-control rounded-0" style="height: 120px; resize: none;"></textarea>                         
   </div>
</div>

<!-- justify-content-end -->
<div class="card mb-0">
  <div class="card-header collapsed" data-toggle="collapse" href="#collapse1">
    <a class="card-title text-primary  m-0 d-flex align-items-center justify-content-end">
      <i class="fa fa-plus"></i> <span>Diagnostic</span>
    </a>
  </div>
  <div id="collapse1" class="collapse">
    <textarea name="diagnostic" class="form-control rounded-0" style="height: 120px; resize: none;"></textarea>                         
   </div>
</div>

Upvotes: 3

MBadrian
MBadrian

Reputation: 409

you have 2 solution for this problem first change order in code

<div class="card mb-0">
  <div class="card-header collapsed" data-toggle="collapse" href="#collapse1">
    <a class="card-title text-primary"> <i class="fa fa-plus align-middle float-right"></i> <p class="float-left">Diagnostic</p></a>
  </div>
  <div id="collapse1" class="collapse">
    <textarea name="diagnostic" class="form-control rounded-0" style="height: 120px; resize: none;"></textarea>                         
   </div>
</div>

Or user this code

<div class="card mb-0">
  <div class="card-header collapsed" data-toggle="collapse" href="#collapse1">
    <a class="card-title text-primary"> Diagnostic <i class="fa fa-plus align-middle float-right"></i></a>
  </div>
  <div id="collapse1" class="collapse">
    <textarea name="diagnostic" class="form-control rounded-0" style="height: 120px; resize: none;"></textarea>                         
   </div>
</div>

Upvotes: 0

Related Questions