'How to align text content with image in a row bootstrap

I want a specific display depending on whether I have an image or not in a row bootstrap.

I want when I have an image and text content, I can have in the same row for a column size 4 my image and right my text content with a column size of 8 enter image description here

According to the display below and if the image is not there I can have instead of the image the content.

<div class="container ">
    <div class="row ">
        <div class="col-md-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
        <div class="col-md-8">
            <div>
                textdffjjfjfjfj
            </div>
        </div>
    </div>
</div>

How can I do it

htmlcssbootstrap-4


Solution 1:[1]

use align-items-center as class in parent div. here is the snippet

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <div class="container ">
    <div class="row align-items-center">
        <div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
        <div class="col-8">
            <div>
                textdffjjfjfjfj
            </div>
        </div>
    </div>
</div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

Solution 2:[2]

use align-items-center as class in parent div. here is the snippet

and if you want to remove image then you have to add style of some specific height so it will align all items in center according to the height.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <div class="container ">
    <div class="row align-items-center">
        <div class="col-4"><img src="https://via.placeholder.com/150/b0f7cc" title="picture" style="width:100px;"></div>
        <div class="col-8">
            <div>
                textdffjjfjfjfj
            </div>
        </div>
    </div>
</div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 UNRIVALLEDKING
Solution 2 UNRIVALLEDKING

Related Questions