How to align image and text in same line in bootstrap?
April 18, 2022Hi 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.
- Example of bootstrap image and text side by side
- 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.
rowandcol-md-6to make bootstrap image and text side by side with responsive.d-flexandalign-items-centerclass 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>
</htmlIn 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.
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.
All the best 👍
