Align FontAwesome icon to <h1>

Question

I'm quite new to learning Bootstrap, but I have some trouble aligning my icon on the same line as my.

What it looks like right now.. I've been trying to fix it within the container, but also with rows, columns and several aligning methods. This is my code right now:

<div class="container">
  <div class="row">
    <div class="col">
    <h1 class="mb-3 ml-5">Products</h1>
    <button class="filterIcon navbar-toggler float-right align-self-start" type="button">
        <i class="fa fa-list"></i>
      </button>
      </div>
  </div>

Can someone show me what I'm doing wrong? I can't really seem to find the answer in documentation as well. If someone does have documentation, please show me so I can learn from it:).

Thank you!

Answer 1

You can use a flex layout to get the items aligned side by side and in the center vertically. For bootstrap, this means using the classes d-flex and align-items-center

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" /> <div class="container"> <div class="row"> <div class="col d-flex align-items-center"> <h1 class="m-0" style="flex-grow:1;">Products</h1> <button class="filterIcon navbar-toggler" type="button"> <i class="fa fa-list"></i> </button> </div> </div>