Search code examples
javascriptcsstwitter-bootstrapsassflexbox

Align text using FLEX

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

Not Working.

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

  • 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>