Strategies for reducing the amount of space between cards in Bootstrap 4

After creating 4 cards using Bootstrap version 4.5, I noticed that the spacing is not right. I'm struggling to reduce the spacing between the cards. Have a look at the image below if you're still confused:

https://i.sstatic.net/RrJLL.jpg

.card {
width : 55%;
min-height: 100;
margin:  2%; 
}
.card-img-top {
height: 150px;
object-fit: cover;
}
.card-body{
box-shadow: 0 0 20px 7px rgba(0,0,0,0.1);
}
<div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="Nike.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Shoes</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="chevrolet.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Car</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="asuslap.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Laptop</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="card text-md-center">
            <img src="asusphone.jpg" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">Phone</h5>
              <p class="card-text">Some quick example text</p>
              <a href="#">Buy</a>
            </div>
          </div>
        </div>
      </div>

I've tried looking for solutions on Google but couldn't find anything helpful. Can anyone assist me in reducing the spacing of the cards?

htmlcssbootstrap-4

Answer №1

To eliminate the width card issue, consider removing width : 55%; from your CSS. This adjustment can result in a better layout.

Alternatively,

You have the option to modify the values within each col-md class. The spacing of every card is directly impacted by these parameters.

Answer №2

By incorporating a flex-display into the .row class and aligning everything at the center, I have enhanced the overall look of the spacing.

.card {
width: 55%;
min-height: 100;
margin:  2%; 
}
.card-img-top {
height: 150px;
object-fit: cover;
}
.card-body{
box-shadow: 0 0 20px 7px rgba(0,0,0,0.1);
}

.row {
display: flex;
justify-content: center;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card text-md-center">
<img src="Nike.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Shoes</h5>
<p class="card-text">Some quick example text</p>
<a href="#">Buy</a>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card text-md-center">
<img src="chevrolet.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Car</h5>
<p class="card-text">Some quick example text</p>
<a href="#">Buy</a>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card text-md-center">
<img src="asuslap.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Laptop</h5>
<p class="card-text">Some quick example text</p>
<a href="#">Buy</a>
</div>
</div>
</div>

Answer №3

One effective way to achieve this is by utilizing Bootstrap's ability to dynamically adjust column width based on the browser/screen width, rather than setting it manually. Leveraging media query breakpoints can help with this process.

HTML

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3">
      <div class="card text-md-center">
        <img src="http://placehold.jp/320x180.png" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Shoes</h5>
          <p class="card-text">Some quick example text</p>
          <a href="#">Buy</a>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3">
      <div class="card text-md-center">
        <img src="http://placehold.jp/320x180.png" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Car</h5>
          <p class="card-text">Some quick example text</p>
          <a href="#">Buy</a>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3">
      <div class="card text-md-center">
        <img src="http://placehold.jp/320x180.png" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Laptop</h5>
          <p class="card-text">Some quick example text</p>
          <a href="#">Buy</a>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3">
      <div class="card text-md-center">
        <img src="http://placehold.jp/320x180.png" class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">Phone</h5>
          <p class="card-text">Some quick example text</p>
          <a href="#">Buy</a>
        </div>
      </div>
    </div>
  </div>

CSS

.card {
  /* width: 55%; */
  min-height: 100;
  margin: 2%;
}

.card-img-top {
  height: 150px;
  object-fit: cover;
}

.card-body {
  box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.1);
}

View JSFiddle demo for more details

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

What are the most effective techniques for setting up headers in a table for optimal organization?

I have a dataset in a table format and I am looking to adjust the spacing to avoid overcrowding. At the same time, I want the title row of the table to not follow the same spacing rules as the rest of the cells. Is there a way to achieve this without crea ...

htmlheaderhtml-tablespacing

Steps to halt webkit animation within a div located inside a circle:

I have a series of nested circle divs, and I want to give them a pulse animation. The issue is that the text container is within one of these circles, causing the animation to apply to the text as well. I am unable to move the text container due to potenti ...

javascriptjqueryhtmlcss

The cdkDropList in Angular's drag and drop feature does not support the application of element styles

Just wanted to share my experience in case it helps someone else out there! I've been working on an Angular project where I needed to create a Trello-like application. To enable dragging elements from one list to another, I installed the Angular cdk ...

javascriptcssangularangular-cdkangular-cdk-drag-drop

Obtaining the element ID with Selenium WebDriver in cases of dynamic IDs

I am encountering an issue with the drop-down image element. I have attempted various methods to select the element, but none of them seem to be working. This may be due to the fact that both elements are identical and their IDs are dynamic. I did manage ...

javahtmlseleniumselenium-webdriver

What is the best method for adjusting the width of a LengthMenu in dataTables?

Is there a way to increase the width of this drop-down menu? It seems too small, especially when selecting 10. https://i.sstatic.net/ObqBA.png ...

datatabledatatablesbootstrap-4

Steps to add a label below a text input field

Within a form, I have two text boxes and I would like to add labels underneath each of them for better clarification. To illustrate my idea, here is a simple diagram: (input1)<--space-->(input2) <label1><--space--><label2> Is ther ...

htmlcss

Having trouble with my WordPress theme not recognizing my CSS file

My file path is displayed below: D:\web server\blog.dev.cc\wp-content\themes\ablog\css for java script file path D:\web server\blog.dev.cc\wp-content\themes\ablog\assets\js Despite checking ...

csswordpressfunctionbootstrap-4stylesheet

Bootstrap3 and jQuery are attempting to achieve vertical alignment

I am trying to vertically align Bootstrap col-md* columns. I have two blocks, one with text and one with an image, and I want them to be equal in height with the text block vertically centered. My current solution is not working correctly. Can someone plea ...

jqueryhtmlcsstwitter-bootstrap

Ways to display or conceal text using Vanilla JavaScript

I am struggling to toggle text visibility using Vanilla JS. Currently, I can only hide the text but cannot figure out how to show it again. <button id="button">my button</button> <div> <p id="text">Hello</p& ...

javascripthtmlcssecmascript-6sass

How can I show or hide all child elements of a DOM node using JavaScript?

Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...

javascripthtmlcss

``Troubleshooting: Problem with Rails checkboxes and error-ridden fields

Hello there! I've encountered an interesting problem that I've traced back to using a custom bootstrap checkbox. Everything works fine, except for when I try to submit the form without checking the checkbox and receive an error message. After thi ...

htmlruby-on-railsbootstrap-4

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

javascriptcssreactjshtml-tablematerial-ui

The current page I'm working on is scrolling sideways, but I prefer a stationary layout without any scrolling

I am currently facing an issue with my webpage scrolling to the right. This behavior is not acceptable as web pages are not supposed to scroll to the right, correct? Could someone assist me in eliminating this unwanted scroll from my page? I have only u ...

htmlcss

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Objective: Ensure that the radio buttons are mandatory. Challenge: The element mat-error and its content are being displayed immediately, even before the form is submitted. It should only show up when the user tries to submit the form. I attempted to use ...

htmlangulartypescriptangular-materialangular-reactive-forms

Turn off a feature on older buttons

For my project, I am looking to dynamically add specific elements like buttons. However, every time a new button is added, the function call for the old button gets duplicated. var btnElem ='<button type="button"class="doSomething">Button< ...

javascriptjqueryhtml

Using the onclick attribute as a unique identifier for a button

I am currently facing a challenge with a form that does not have an ID Here is the code snippet in question: <button class="btn btn-primary" onclick="showModal()" type="button">Browse Data</button> Unfortunately, I don't have any contro ...

javascriptjqueryhtml

How to set up a Carousel as the background within a div using Bootstrap 5

I'm attempting to create a visually appealing layout by showcasing a Carousel component behind some text. The idea is to have scrolling and fading images with a prominent header overlaid on top of them. I want the carousel images to be contained withi ...

htmlcssbootstrap-5

[Vue alert]: "Maximum" property or method is not declared in the instance but is being referenced during the rendering process

Here is my custom Vue component: Vue.component("product-list", { props: ["products", "maximum-price"], template: ` <div> <div class="row d-flex mb-3 align-items-center p-3 rounded-3 animate__animate ...

javascripthtmlvue.jsfrontendcomponents

What's the best way to toggle the visibility of an input-group in Bootstrap?

Is there a way to properly hide and show a Bootstrap 5 input-group? You can see an example here: https://jsfiddle.net/o08r3p9u I'm facing an issue where once the input group is hidden, it doesn't show correctly when displayed again. How can I e ...

javascripthtmlcssbootstrap-5

Detect click outside in JavaScript for closing

While this topic has been discussed before, each issue presents its own unique challenges. Despite trying various solutions and examples for making the submenu close when clicking outside of it, I have not had any success. Is there a way to make the uslug ...

javascriptjqueryhtml