Is it possible to add a gap between shadowed div elements?

I am attempting to create 3 divs in a single row. Each div is divided into two parts, one with an image and the other with three lines of text.

The divs have a box-shadow style applied to them.

However, I am facing issues with spacing between the divs. When I add extra margin or padding, it creates problems when the page is resized.

Currently, my layout is close to what I want, but resizing the browser causes the divs to collide with each other.

I have tried using breakpoints like col-sm-6-md-4, but it has not been effective.

One solution that worked for me involved positioning the image above the text at the bottom, which resolved the issue.

.box1 {
  box-shadow: 1px 1px 3px 1px grey;
}
<section>
  <div class="container">

    <div class="row">

      <div class="col-4 py-4">
        <div class="row">
          <div class="col ">
            <div class="row justify-content-center">
              <div class="col-11 box1 d-flex">
                <div class="box2"><img style="width: 100px; height: 100px;" src="img/icon/m/img.png" alt="a"></div>
                <div class="box2">
                  <p>text</p>
                  <p>text</p>
                  <p>text</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-4 py-4">
        <div class="row">
          <div class="col ">
            <div class="row justify-content-center">
              <div class="col-11 box1 d-flex">
                <div class="box2"><img style="width: 100px; height: 100px;" src="img/icon/m/img.png" alt="a"></div>
                <div class="box2">
                  <p>text</p>
                  <p>text</p>
                  <p>text</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-4 py-4">
        <div class="row">
          <div class="col ">
            <div class="row justify-content-center">
              <div class="col-11 box1 d-flex">
                <div class="box2"><img style="width: 100px; height: 100px;" src="img/icon/m/img.png" alt="a"></div>
                <div class="box2">
                  <p>text</p>
                  <p>text</p>
                  <p>text</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</section>



<---- below is working code but with some different layouts that I don't want -->


  <---- below is working code but with some different layouts that I don't want -->



    <div class="container">
      <div class="row">

        <div class="col-sm-4">
          <div class="box1">
            <img class="" src="img/icon/m/img.png" alt="a">
            <p>text</p>
            <p>text</p>
            <p>text</p>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="box1">
            <img class="" src="img/icon/m/img.png" alt="a">
            <p>text</p>
            <p>text</p>
            <p>text</p>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="box1">
            <img class="" src="img/icon/m/img.png" alt="a">
            <p>text</p>
            <p>text</p>
            <p>text</p>
          </div>
        </div>
      </div>
    </div>

htmlcssbootstrap-4

Answer №1

Have you experimented with utilizing percentage-based margin and widths?

If you're employing bootstrap, the columns ought to automatically come with padding between them.

Consider something like this - 

.col-sm-4 {
    width: 30%
    margin: 1.66666667%;
}

It's possible that I may have misconstrued your intentions.

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 CSS or Javascript, you can eliminate the (textnode) from Github Gist lists

My goal is to extract the username and / values from a series of gists on Github Gists. The challenge lies in the fact that there are no identifiable classes or IDs for the / value. https://i.stack.imgur.com/9d0kl.png Below is the HTML snippet with a lin ...

javascripthtmlcsscustom-data-attribute

Automating testing for numbered lists with CSS list-style-type decimal

I need help with a JavaScript and CSS project. I have a situation where I have a numbered list like this: Coffee Tea Cola Here is the code structure I am using: <!DOCTYPE html> <html> <head> <style> ul.a {list-style-type ...

htmlcssseleniumui-automation

Discover the best way to reference a JavaScript variable within an HTML form textfield

I'm having trouble with a script that is supposed to display the selected value from a drop down list in a text field on an HTML form. When I select an option, the value is not appearing in the text field. Can someone please assist me with this issue? ...

javascripthtml

Setting a fixed row height for Material-UI tables in ReactJS, even when the content is long

I'm currently working on a listing component using the material UI table in ReactJS. Within this table, I have a ResumeUrl field that can span over 3 or 4 lines, but I need to limit it to just 2 lines with the rest of the content being represented by ...

cssreactjsmaterial-ui

"Upon submission, the form will display results within the designated div container

After struggling for a few days and editing some codes, I finally managed to send my form data to process.php without reloading the page. I am using a bootstrap layout and want to avoid the page reload or redirection to process.php. The HTML form works pe ...

htmlajaxformspostreload

Implementing unique functionalities based on whether the link is clicked an odd or even number of times

Three student names are listed as links. When a link is clicked for the first time or odd number of times, a div containing details about that student appears. Clicking the same link for the second time or even number of times hides the student div. This f ...

phpjqueryhtml

Excessive Text Overflow in HTML Input Placeholder

<input class="form-control" style="width: 15rem; height: 15rem;" v-model="formData.booking_code" placeholder="Enter Booking Code, e.g. XYBJLL" /> I am facing an issue where the placeholder text ...

javascripthtmlcssvue.js

Remove the div of the previous selection in jQuery and add the current selection by appending it, ensuring only one selection per row is allowed when

Here is a code snippet that includes buttons appending selections to the "cart" div upon clicking. The first script ensures only one selection per row when multiple buttons in the same row are clicked. In the second script, selections are appended to the ...

javascripthtmljquerycss

What makes Django forms the better choice over HTML forms?

Greetings! As a beginner in the world of Django, I am currently struggling to grasp the concept of Django forms. I find myself questioning the utility of Django forms when we already have the option to use HTML forms. Can someone please clarify this for ...

htmldjangoforms

Using Bootstrap's collapse class with a smooth linear transition

I've been attempting to implement Bootstrap collapse with a linear effect, but have been encountering challenges. After trying different versions of Bootstrap, I found that the transitions were quite similar. I decided to go with the latest version av ...

htmlcssbootstrap-4

Prevent double tap selection

At times, I enable the user to click on the <li> or <span class="icon"> elements, but if they happen to click twice, it causes a bit of chaos and spreads the blue selection all over :/ To address this issue, I have come up with two solutions: ...

htmlcssdouble-click

Building a row of five dynamic columns using Bootstrap's responsive design

I'm looking to set up a row with 5 responsive columns that have equal padding on all sides, but I'm struggling to find the best way to do this using Bootstrap. Here's my current HTML: <div class="row five-col-row"> < ...

htmlcsstwitter-bootstrapbootstrap-4sass

css effect of background image transitioning on mouse hover

Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website: This is the HTML code I currently have: <section id="home" data-speed="3" data-t ...

javascriptjqueryhtmlcss

What could be causing the failure of loading CSS images or JS in my Laravel project?

This is a continuation of my previous question where I managed to get the site up and running. Initially, all files including css, js, and images were loading properly. However, now I am encountering issues as the files are not loading and the console disp ...

javascriptphpcsslaravelimage

Updating part of a page while also changing the navigation

Apologies in advance, as this is my first attempt at coding a website. I have a specific need where I want to update only one div on my web page when a link in the navigation bar is clicked. <body> <div id="wrapper"> <header id= ...

javascriptjqueryhtmlajax

The elusive Holy Grail layout for Flex content cannot be achieved on IE11

UPDATE I attempted to insert height:100vh into the .app-container, but unfortunately, it did not have the desired effect. I am utilizing bootstrap 4 for creating my web application. My goal is to implement the Holy grail layout. Everything appears to be ...

csssassresponsive-designflexboxbootstrap-4

Divide table rows in html without a header into two equal parts, with 50% on the left side

I am trying to format 20 rows in a standard html table without any headers. The current setup looks like this: current situation <table> <tbody> <tr> <td>1</td> </tr> <tr> ...

htmlcsshtml-tablecss-tables

What is the best way to transfer a value from *ngFor directive in Angular to the data-target attribute?

I was trying to create dynamic collapsible lists using Angular and the Bootstrap library. Since I didn't know how many lists there would be, I decided to use an *ngFor loop. However, I encountered a problem right at the start. I needed a way to identi ...

htmlangularbootstrap-4

Guide to correctly inserting an image into a webpage using JavaScript

Currently, I am working on a tutorial for creating a dynamic webpage. The objective is to display the time and an image that changes based on the current hour. However, the method used by the instructor to insert the image is unfamiliar to me, and despit ...

javascripthtmlimage

Combining Angular Material with another CSS framework

I'm diving into my first Angular project and contemplating incorporating Angular Material. It offers an abundance of components, which aligns with my project needs. However, I've noticed a lack of grid system and utility classes within Angular Ma ...

cssangularangular-material