Arranging columns in a row with some breathing room using Bootstrap's grid system

On my webpage, I have multiple repetitive product listings displayed.

  <div class="col-lg-12 col-md-12 col-sm-12 ">
            <div class="row">
                @foreach (var item in Model.Products)
                    {
                <div class="col-lg-3 col-md-3 col-xs-12 order-1 d-block mb-3 cart-col " style="padding-left:10px;">
                    <section>
                        <div class="cart-title text-center w-100" >
                            <a href="~/products/detail/@item.Id">  @item.Title</a>
                        </div>
                        <div class="thumb">
                            <a href="~/products/detail/@item.Id" class="d-block">

                                <img src="~/@item.ImageSrc">
                            </a>
                        </div>

                        <div class="cart-title">price: 
                            <span class="cart-title">
                                @item.Price.ToString("n0")
                            </span>
                        </div>
                    </section>
                </div>
                    }
            </div>
        </div>

As shown in the screenshot https://i.sstatic.net/z4rfr.jpg, the layout currently has no space between each product.

I would like to add margin between each book, maintaining the current configuration of products while having spacing between each column. If I modify the CSS like this:

 <div class="col-lg-3 col-md-3 col-xs-12 order-1 d-block mb-3 cart-col " style="padding-left:10px;">

it results in the layout changing, as seen in this image <a href="https://i.sstatic.net/kA7nH.jpg" rel="nofollow noreferrer"></a>.</p>
<p>Is there a way to keep the current layout with each product in a row, but also have space between each column?</p>
<p>Here is the CSS code:</p>
<pre><code>.cart-col {
width: 100%;
padding: 10px;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
display: inline-block;
background: #fff;
border-radius: 10px;
margin-bottom:15px;

}

Answer №1

Typically, the bootstrap column comes with padding on the left and right sides. If this padding is missing, it could be due to a custom padding setting in the cart-col class. In that case, consider using the following structure:

<div class="col-lg-3 col-md-3 col-xs-12">
    <div class="cart-col">

    </div>
</div>

To add space like margin-bottom, add gy-4 to the row class. This adjustment should help resolve the issue.

Answer №2

cart-col should always be nested inside

<div class="col-lg-3 col-md-3 col-xs-12 order-1 d-block mb-3">

Kindly update the code to the following:

<div class="col-lg-12 col-md-12 col-sm-12 ">
    <div class="row">
        @foreach (var item in Model.Products)
        {
        <div class="col-lg-3 col-md-3 col-xs-12 order-1 d-block mb-3">
            <div class="cart-col">
                <section>
                    <div class="cart-title text-center w-100">
                        <a href="~/products/detail/@item.Id"> @item.Title</a>
                    </div>
                    <div class="thumb">
                        <a href="~/products/detail/@item.Id" class="d-block">

                            <img src="~/@item.ImageSrc">
                        </a>
                    </div>

                    <div class="cart-title">price:
                        <span class="cart-title">
                            @item.Price.ToString("n0")
                        </span>
                    </div>
            </div>
            </section>
        </div>
        }
    </div>
</div>

Answer №3

Apply the justify-content-between class from Bootstrap to your flex by adding it as a class to a div within the row. Additionally, consider changing col-lg-3 to col-lg-2 to prevent four-row items from being forced to take up the entire width.

.cart-col {
  width: 100%;
  padding: 10px;
  border: 1px solid #e2efef;
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
  position: relative;
  display: inline-block;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6c7f6e5e2a3028302f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="col-lg-12 col-md-12 col-sm-12 ">
  <div class="row justify-content-between">
    <div class="col-lg-2 col-md-3 col-xs-12 order-1 d-block mb-3 cart-col " style="padding-left:10px;">
      <section>
        <div class="cart-title text-center w-100">
          <a href="~/products/detail/@item.Id">  @item.Title</a>
        </div>
        <div class="thumb">
          <a href="~/products/detail/@item.Id" class="d-block">

            <img src="~/@item.ImageSrc">
          </a>
        </div>

        <div class="cart-title">price:
          <span class="cart-title">
                                @item.Price.ToString("n0")
                            </span>
        </div>
      </section>
    </div>
    <div class="col-lg-2 col-md-3 col-xs-12 order-1 d-block mb-3 cart-col " style="padding-left:10px;">
      <section>
        <div class="cart-title text-center w-100">
          <a href="~/products/detail/@item.Id">  @item.Title</a>
        </div>
        <div class="thumb">
          <a href="~/products/detail/@item.Id" class="d-block">

            <img src="~/@item.ImageSrc">
          </a>
        </div>

        <div class="cart-title">price:
          <span class="cart-title">
                                @item.Price.ToString("n0")
                            </span>
        </div>
      </section>
    </div>
    <div class="col-lg-2 col-md-3 col-xs-12 order-1 d-block mb-3 cart-col " style="padding-left:10px;">
      <section>
        <div class="cart-title text-center w-100">
          <a href="~/products/detail/@item.Id">  @item.Title</a>
        </div>
        <div class="thumb">
          <a href="~/products/detail/@item.Id" class="d-block">

            <img src="~/@item.ImageSrc">
          </a>
        </div>

        <div class="cart-title">price:
          <span class="cart-title">
                                @item.Price.ToString("n0")
                            </span>
        </div>
      </section>
    </div>
    <div class="col-lg-2 col-md-3 col-xs-12 order-1 d-block mb-3 cart-col " style="padding-left:10px;">
      <section>
        <div class="cart-title text-center w-100">
          <a href="~/products/detail/@item.Id">  @item.Title</a>
        </div>
        <div class="thumb">
          <a href="~/products/detail/@item.Id" class="d-block">

            <img src="~/@item.ImageSrc">
          </a>
        </div>

        <div class="cart-title">price:
          <span class="cart-title">
                                @item.Price.ToString("n0")
                            </span>
        </div>
      </section>
    </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

Is it possible to include jQuery's selectors contain and closest within my CSS selector?

I created a script to hide specific table rows as follows: $('.ms-formtable nobr:contains("Question")').closest('tr').hide(); However, I'm unsure if there is a way to achieve the same result using only CSS. Can anyone provide adv ...

Animate the Bootstrap carousel from top to bottom instead of the traditional left to right movement

Is there an option available in the bootstrap carousel to animate it from top to bottom and bottom to top, rather than from right to left and left to right? jsFiddle link <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval=" ...

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

Tips on obtaining the element selector when a div is being dynamically loaded during an AJAX call

When running two ajax calls, I encounter an issue where the second call loads some HTML onto the page that is needed for processing a specific div in the first call. However, since the div is not present until after the second call is completed, I receiv ...

How to make Vuetify grid columns wrap and fill the full height

I am facing an issue where the component created using v-card in a grid system does not fill the full height. I tried using d-flex but it did not work as expected. The middle column with a white v-card should occupy the entire column height but it is gett ...

What is the best way to align the elements to the beginning and place the flexbox container in the center

I posted this plunker instead of the previous one. My goal is to align the flex container horizontally while keeping its items aligned at the start. I want to use align-content: flex-start along with justify-content: center. Currently, if the last row h ...

The Bootstrap data-target and aria-controls attributes are failing to activate the designated id element

I have implemented various elements to toggle the display of information on my HTML website. While I've successfully created buttons, nav-tabs, and modals, clicking on the trigger element doesn't reveal the associated content. I've even doub ...

Obtain the chosen option from an HTML select element by utilizing JavaScript

This is my HTML snippet: <div id="detail"> <div class="d_left"> Page <strong>1</strong> of 107 </div> <div class="d_center"> <table> <tr> <td><a href="#">Previous&l ...

Adjust the appearance of an element based on user selection from a dropdown menu under certain circumstances

I am working on creating a dropdown menu using a JavaScript array. My goal is to display a specific span element when certain options are selected. For instance, I want the span to be shown only when options "a" and "c" are selected, but not when option " ...

Switch up div content - advertisements at the top or bottom

An issue has arisen where the ads on a website are currently being displayed at the bottom of the source code, but they should actually be visible at the top. Here is the ad placeholder code: <div id="300_250_placeholder"></div> And here is ...

Capture microphone and audio in a SIP call with sip.js

Greetings Stack Overflow community! I am in need of assistance with a project involving sip.js and VoIP for making real phone calls. The Objective I aim to enable users to record audio from both parties during a call and save the data on a server (either ...

Using jQuery to append a new item to a JSON file

I have a straightforward JSON file containing a few pieces of data. Here is an example: { "id": 1, "name": "Porsche", "type": "911", "price": "135000" } My task is to create an HTML form with inputs for name, type, and price. When the user s ...

Place a fresh banner on top of the Ionicon icon

I recently started using Ionicons from and I am not too familiar with css. My question is, can a banner that says 'new' be overlaid on the top right corner of the Icon? Is there a simple or standard method to achieve this? (whether it's an ...

CSS - owl carousel automatically stretches images to full width

Here is the code snippet that I am working with: $(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, items:4, autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true }); }); #owl-demo ...

Adding the active class in Bootstrap can be easily achieved in CodeIgniter by using the

I am seeking guidance on how to add an active class in CodeIgniter when dividing the view into three separate files. These files include: header.php page1.php ... page10.php footer.php According to this thread, there seems to be no clear solution prov ...

Please refer to the appropriate manual for your MySQL server version to find the correct syntax for the following statement: `'' , , '', '', '', '', '', '', NOW())' at line 2`

I encountered an error and since I am new to programming, I would appreciate any corrections. Thank you! <? $customername = $_REQUEST["customername"]; //$customername = strtoupper($customername); //$customername = trim($customername); $address1=$_RE ...

What is the correct method for formatting text spacing?

A few months ago, I dabbled in web design and created a basic website. Now, I'm revisiting it to clean up the layout and make it more visually appealing. I initially used non-breaking spaces to separate paragraphs, but I know that's not optimal. ...

Despite having a hover animation, the CSS animation remains stuck

I'm looking to create a hover animation where one picture disappears upon hovering and is replaced by another picture, but I'm having trouble getting the back picture to disappear My attempt involved changing opacity from 1 to 0 with a transitio ...

Enhancing image clips using jQuery techniques

Could someone help me figure out why the image clip value isn't changing when I move the range slider in the code below? $('#myRange').on('input', function() { var nn = $(this).val(); $("img").css({ 'clip': ...

Adding content to an empty element will not produce the desired result

I'm trying to show each character of a string, which is stored in an array, one at a time. However, when I use threadsleep(a) with the code found here: http://jsfiddle.net/thefiddler99/re3qpuoo/, all the characters are displayed at once. There seems t ...