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

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To image and text in the same line in bootstrap with responsive, you have to use a bootstrap grid with the d-flex align-items-center class which will make the image and text side by side.

See a short example of the bootstrap image left text right.

<div class="row">
  <div class="col-md-6">
    <div>
      <img alt="Web Studio" class="img-fluid" src="images/facebook.jpg" />
    </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>

Here, I have used the col-md-6 class to make div responsive but you can also use Flex

For make images and text in the same line using flex check below article.

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

In this article, I will show multiple examples of align images and text in the same line.

  1. Example of bootstrap image and text side by side
  2. Example of bootstrap icon and text on the same line

Let’s start today’s tutorial example of bootstrap text next to image

Example of bootstrap image and text side by side

In this example, I used the image with text and align the image and text side by side using the bootstrap class.

To make align the image and text side by side, I going to use the following class which is provided by Bootstrap.

  1. row and col-md-6 to make bootstrap image and text side by side with responsive.
  2. d-flex and align-items-center class for align image and text in the same line

To use the above class I will use bootstrap 5 in this example to get image and text in the same line.

Let’s start coding for bootstrap image inline with text

index.html

<!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>
  </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/facebook.jpg" />
            </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

In this above example, I put image in left side and text in right side, and when the screen is small text will go bottom and the image up using the bootstrap grid class.

Here, I have provided code sandbox links for the above program for the image and text side-by-side bootstrap. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

Example of bootstrap icon and text on the same line

In this example, I will align the bootstrap icon and text in the same line, using custom css such as flex, justify-content, and align-items.

Above mentioned css attributes help you to align icons and text in the same line.

index.html

<!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"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
    />
    <title>Buttons</title>
    <style>
      .icon-container {
        display: flex;
        border: 1px solid;
        width: 150px;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <section class="section mt-5">
      <div class="container">
        <div class="icon-container">
          <i style="font-size: 30px;" class="bi bi-airplane"></i>
          <span style="margin-left: 10px;">Airplane</span>
        </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>

Here, I have provided code sandbox links for the above program for the icon and text side-by-side bootstrap. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts