Question 213469 in Html Question posted in
Some basic documentation can be found here.

Html – How to make text more distant from images using Bootstrap 5

How do I separate the descriptive text to make it more distant from the image I tried to fix it but it didn’t work and how can I fix it so that my text is postponed to make it more distant from the image Thank you
enter image description here

show details

 <!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>show details</title>
      <link rel="stylesheet" href="./CSS/style.css">
      <!-- Boxicons CDN Link -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        .book-details{
            background-color:#f5f5f5;
        }
    </style>
    </head>
    <body>

      <div class="container">
        <header class="d-flex justify-content-between my-4">
        <h4>show details</h4>
        <hr>
            </header>
            <div class="book-details p-5 my-5">
            <div class="container">
            <div class="row">
               <div class="col-md-6 order-md-1">
                  <img src="../Problem_image/<?= $rowDd['image'];?>" width="600">
                 </div>
            
                 <div class="col-md-6 order-md-2">
                 <h5>name:</h5>
                 <p><?= $rowDd["name_surname"];?></p>
                 <h5>phone:</h5>
                 <p><?= $rowDd["phone_number"];?></p>
                 </div>
              </div>
            </div>
         </div>
       </div>
    </body>
  </html>
Tags:

2

Answers


  1. 0

    The issue is that you are currently setting the image width to 600px which makes it overflows the col-md-6 bootstrap container.

    In order to fix that you need to set it to 100% so it aligns with your layout.

    Try this:

     <!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>show details</title>
      <link rel="stylesheet" href="./CSS/style.css">
      <!-- Boxicons CDN Link -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        .book-details{
            background-color:#f5f5f5;
        }
    </style>
    </head>
    <body>

      <div class="container">
        <header class="d-flex justify-content-between my-4">
        <h4>show details</h4>
        <hr>
            </header>
            <div class="book-details p-5 my-5">
            <div class="container">
            <div class="row">
               <div class="col-md-6 order-md-1">
                  <img src="../Problem_image/<?= $rowDd['image'];?>" width="100%">
                 </div>
            
                 <div class="col-md-6 order-md-2">
                 <h5>name:</h5>
                 <p><?= $rowDd["name_surname"];?></p>
                 <h5>phone:</h5>
                 <p><?= $rowDd["phone_number"];?></p>
                 </div>
              </div>
            </div>
         </div>
       </div>
    </body>
  </html>
    Login or Signup to reply.
  2. 0

    To achieve this result, you can insert an empty column. Also, your image should have width set to 100% so that it aligns with your layout.

    <div class="row">
    <div class="col-md-6 order-md-1">
        <img src="../Problem_image/<?= $rowDd['image'];?>" width="100%">
    </div>
    <div class="col-md-1 order-md-2"></div>
    <div class="col-md-5 order-md-3">
        <h5>name:</h5>
        <p><?= $rowDd["name_surname"];?></p>
        <h5>phone:</h5>
        <p><?= $rowDd["phone_number"];?></p>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search