How to align image and text in same line in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this article, I will show to align image and text in same line in bootstrep with step by step guide.

We know that adding images to a website makes it more attractive and presentable. Sometimes, we need to align the images either at the right or to the left. Most of the time, we place an image at the center.

Here, we will use .d-fle and align-items-center classes. Within Bootstrap, “d-flex” specifies to set the element to display as flex. The align-items-center class specifies the property align-items: center.

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Buttons</title>
    <style>
.align-items-center {
  -ms-flex-align: center!important;
  align-items: center!important;
}
.d-flex {
  display: -ms-flexbox!important;
  display: flex!important;
}
    </style>
  </head>
  <body>
    <section class="section mt-5">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div>
              <img alt="Web Studio" class="img-fluid" src="images/pexels-photo-257360.jpeg" />
            </div>
          </div>
          <div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0">
            <div>
              <p>Align image and text in same line in bootstrap</p>
            
            </div>
          </div>
        </div>
      </div>
    </section>
      
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html

Check the output of the above code example.

Bootstrap, Image, Left

All the best 👍