Ways to create more space between text and images with Bootstrap 5

Is there a way to adjust the spacing between descriptive text and an image on a webpage? I've tried fixing it, but it didn't work. How can I ensure that my text is properly separated from the image? Thank you.

<!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/bootstrap/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>

Answer №1

One problem arises from setting the image width to 600px, causing it to overflow the col-md-6 bootstrap container.

To correct this issue, adjust the image width to 100% for proper alignment with your layout.

Consider this solution:

 <!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d31382d697067">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2bdjQ2Vyep5IDxbcnCeuOxjzrPF/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>

Answer №2

In order to accomplish this task, you will need to include a blank column. Additionally, ensure that the width of your image is specified as 100% so it fits properly within your design.

<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>

Answer №3

The issue at hand, as pointed out by others, is caused by the image exceeding its container size. To resolve this, it is recommended to utilize the Bootstrap class img-fluid instead of employing inline styles.

<img src="../Problem_image/<?= $rowDd['image'];?>" width="600">

<img src="../Problem_image/<?= $rowDd['image'];?>" class="img-fluid">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c4dfc3dfc3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-md-6 order-md-1">
            <img src="//placeholder.pics/svg/600" class="img-fluid">
        </div>
        <div class="col-md-6 order-md-2">
            <h5>name:</h5>
            <p>Jenny</p>
            <h5>phone:</h5>
            <p>867-5309</p>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using HTML and CSS to Trigger Animation of Gif (or video) Upon Mouse Hover, Depending on Mouse Position

Is there a way to create an animation for a gif or video that changes based on the position of the mouse relative to the frame? For example, if the gif shows someone turning around 360 degrees, I would like the person to be facing forward when the mouse i ...

arranging <li> elements in alphabetical order

I'm looking for a way to alphabetically sort an unordered list while still keeping the outer html intact. My current method sorts the list alphabetically, but it only reorganizes the inner html of the list elements and not the entire element itself. T ...

Enhancing Your Website with Animation Delay using Animate.css and ViewportChecker

I am attempting to apply a delay to various elements with animated classes on a specific webpage using animate.css version 3.5.1 by Daniel Eden and jquery-viewport-checker version 1.8.7 by Dirk Groenen. My initial approach was to utilize the setTimeout fu ...

Troubleshooting problem with Laravel and Vue integration

I have experience working on a Laravel and Vue.js project. Here is the code snippet for the Laravel view: @extends('layouts/app') @section('content') <div id="app"> </div> @endsection And here is the ...

Problem with zooming and linear-gradient in Safari browser

I have implemented a linear-gradient(90deg, transparent 0 47px, #000 47px 48px); background-size: 48px; to create 1px vertical lines on the background. It is functioning correctly in all browsers, including Safari, except when the Safari browser is zoom ...

Designing a website similar to sevenly.org using jquery: A step-by-step guide

My understanding of javascript and jquery is at a beginner level. I am interested in creating a design similar to Sevenly, where one page/div moves over another. I'm not sure where to begin with this. Any advice or ideas on how to implement this effec ...

Transferring user-selected values from JavaScript to a PHP file

When sending values from JavaScript to a PHP file, everything works smoothly when all the values are collected. Step1 functions perfectly as both fields are mandatory. However, in Step2, values are only sent when all the fields are selected. There are co ...

Viewing code on Ionic Serve is as quick as a blink of an eye

I am experiencing a strange issue where my code appears for just a moment after running ionic serve and then disappears. I have all the necessary components like nodejs, cordova, ionic, jdk, etc. installed on my machine. As a newcomer to ionic, I would rea ...

Is it possible to generate distance between 2 elements without utilizing padding or margin?

In my React Native project, I'm currently working with 2 inline buttons - the search and add buttons: https://i.stack.imgur.com/tKZrf.png I'm looking to add some spacing between these buttons without impacting their alignment with the left and ...

Tips for automatically closing a dropdown menu when it loses focus

I'm having some trouble with my Tailwind CSS and jQuery setup. After trying a few different things, I can't seem to get it working quite right. In the code below, you'll see that I have placed a focusout event on the outer div containing th ...

Line of cubes - tap on a single cube and the others gracefully slide away from view

I am working on a project where I need to create a row of blocks. The goal is for the blocks to slide off the screen when one is clicked, leaving the clicked block in the first position. For instance: https://i.sstatic.net/IB5LI.jpg I attempted using jQ ...

Scrolling to the active list item in the navigation bar

Having an unordered list with the id mainul in the navigation bar is causing a problem when the page reloads. The navigation bar always starts at the beginning, but I would like it to automatically scroll to the active li element. This is my HTML code: & ...

`There is a delay in rendering the background image on Chrome`

Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...

Printing in HTML is limited to only one page

While printing an HTML table that can vary in length, I often encounter the issue of it printing multiple pages. Is there a way to limit the printing to just one page through coding? Yes, you can achieve this by using the option in the browser print dialog ...

Submitting the form for validation to parse.com

Is there a way to ensure that my form is only submitted to parse.com when all fields are filled in? Despite using a validation script, the form still submits even if the fields are empty when I click the submit button. I attempted using a button instead o ...

What could be causing the malfunction of the ::after selector in my code?

I am currently utilizing bootstrap 4 in my code and have implemented the following ::after styling for certain elements: .navbar-light .navbar-nav > li >a::after{ content: " "; height: 50px; width: 10%; background-image: linear-gradi ...

When using React <p> and Tailwind, the text overflow occurs in either the X or Y axis, despite specifying Y specifically

I am building a React frontend using TailwindCSS 2.2, and I have these two texts inside a <p> dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ...

Perform a jQuery computation using a CSS style

Having trouble with a calculation using a CSS property that is not returning any value. Seems like the issue might be due to the CSS property returning '200px' instead of just '200'. Any suggestions for a workaround? Thanks in advance. ...

Is it possible to update the CSS file of an external SVG file in real-time?

Is there a way for an SVG image to reference another CSS file? A webpage contains an SVG file. A button allows users to switch between classic colors and high contrast mode on the entire webpage, including the SVG image. Attempt w.css (white backgrou ...

What is the proper method for integrating the next.js Image component with the HTML <picture> element?

When it comes to optimizing images, Next.js offers an Image component that lazy loads images and includes a srcset for a particular image. However, there are instances where we need to serve different images based on the device being used (art redirection ...