How to get SVG to align right of an <h4> in Bootstrap 5

Question

I'm trying to get the SVG icon to align to the right of the H4 and center vertically using Bootstrap 5. This isn't working.

<div class="container-fluid">
  <div class="row">
     <div class="col-lg-6">
        <div class="justify-content-start"><h4>Title 1</h4>
        </div>
        <div class="justify-content-end">SVG goes here</div>
     </div>
  </div>
</div>

There's a second container that is the same content floated to the right of this one. My problem is that the SVG won't float to the right.

Any assistance would greatly be appreciated.

Answer 1

Your column needs a display:flex layout context:

So you need to add a d-flex class property.
For aligning of your svg icon to the right you could just add justify-content-between to your element's class (since you just have two elements – your icon will get pushed to the right).

.icon{
  display:inline-block;
  height: 1em;
  fill:red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 d-flex justify-content-between">
      <h4>Title 1</h4>
      <svg class="icon icon-home h4" id="icon-home" viewBox="0 0 34 48">
        <path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
      </svg>
    </div>
  </div>
</div>

Alternative: margin-left:auto (ms-auto)

.icon{
  display:inline-block;
  height: 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 d-flex">
      <h4>Title 1</h4>
      <svg class="icon icon-home h4 ms-auto" id="icon-home" viewBox="0 0 34 48">
        <path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
      </svg>
    </div>
  </div>
</div>

See also:

• Bootstrap docs:
• css-tricks: A Complete Guide to Flexbox