vertical align icon with text center issue Bootstrap-CodePudding

I have problems with center. I want to center icon and text on the same line with Bootstrap but its not working good. I am beginner here so I dont know much. Wanted this: Example https://i.stack.imgur.com/prSlD.png

My code what i have tried:


 <section >
    <h2>WHY US</h2>
    <div >
      <img  src="img/icon.png"style="width:40px" alt="">
      <h5 >FAST DELIVERY  </h5>
    </div>
  </section>

CodePudding user response：

Try this , I think this will work

<section class='container-fluid text-center'>
    <h2>WHY US</h2>
    <div class='d-flex align-items-center w-100 justify-content-center'>
      <img
        class='me-3'
        src='img/icon.png'
        style='width:40px'
        alt=''
      />
      <h5 class='mb-0'>FAST DELIVERY </h5>
    </div>
 </section>

CodePudding user response：

Try this one

   <div >
    <div >
        <h2>WHY US ?</h2>
        <div >
            <i ></i>
            <h5 >Lorem ipsum dolor sit amet ,consectetur</h5>
        </div>
        <div >
            <i ></i>
            <h5 >Lorem ipsum dolor sit amet ,consectetur</h5>
        </div>
        <div >
            <i ></i>
            <h5 >Lorem ipsum dolor sit amet ,consectetur</h5>
        </div>
        <div >
            <i ></i>
            <h5 >Lorem ipsum dolor sit amet ,consectetur</h5>
        </div>
    </div>

I have use font awesome icon you can replace it with your image tag.Hope that work for you :)