Trying to achieve the text "Cena" beneath "John" where the star icon will be floating right centered.

Expected Result:

Works.

<div className='d-flex justify-content-between'>John
<span>StarIcon</span>
 </div>

Not Working.

<div className='d-flex justify-content-between'>John
<p>Cena</p>
<span>StarIcon</span>
 </div>

CodePudding user response：

You are missing two things:

• align-items-center class on the parent. You should read Bootstrap's documentation
• "John" and "Cena" should be in a container.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class='d-flex justify-content-between align-items-center'>
  <span>
    John<br/> Cena
  </span>
  <span>StarIcon</span>
</div>

CodePudding user response：

You can achieve this using the following code:

HTML:

<div className='d-flex justify-content-between'>
  <div>
    <p>John</p>
    <p>Cena</p>
  </div>

  <span className='custom-icon'>StarIcon</span>
</div>

CSS:

.custom-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
}