Steps to create spaces between the bootstrap cards

Just diving into Bootstrap and attempting to incorporate images as cards, I encountered a challenge where the cards were piling up one after another without any spaces between them. Below is the code snippet utilizing Bootstrap4:

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
            <a href="#" class="">
                Beautiful
                <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
            </a>
        </div>

        (Other card elements go here)

    </div>
</div>

Upon implementing this code, the cards are displayed in a stacked manner without any spacing in between.

https://i.sstatic.net/HCaSq.png

I experimented with adding mr-1, but it caused the fourth card to wrap onto a new row.

https://i.sstatic.net/Ce1H1.png

Is there a way to insert equal spaces between the cards, both above and below them?

csstwitter-bootstrapbootstrap-4

Answer №1

The reason for this issue is due to the simultaneous use of .col-* and .card classes on the same element. It is recommended to always nest your content elements within your layout grid elements.

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#" class="">
          Beautiful
          <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#" class="">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#" class="">
          Beautiful
          <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
        </a>
      </div>
    </div>
  </div>
</div>

Answer №2

I tackled this issue by leveraging Bootstrap 4's Emdeds Utilities

https://getbootstrap.com/docs/4.3/utilities/embed

To implement this solution, simply insert your image into a div.embbed-responsive as shown below:

<div class="card"><div class="embed-responsive embed-responsive-16by9"> <img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" /></div><div class="card-block"><h4 class="card-title">Butter Pecan</h4><p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p></div></div>

or .card-img-top {width: 100%;}

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 is the best way to integrate a PHP page with its own CSS and JavaScript into a Wordpress page?

I'm facing a challenge with integrating a dynamic PHP table into my WordPress page. Despite working perfectly when opened locally, the CSS and JavaScript used to create the table are not functioning properly when included in a WordPress page via short ...

javascriptphpcsswordpress

"Taking cues from Instagram's web/desktop design, we have created

When you view someone's instagram page on a desktop or pc, the search bar is designed to float left when clicked, allowing text to be entered for searching. If no text is entered in the search field, the search icon and placeholder return to their ori ...

jqueryhtmlcss

How to Align Bootstrap Icons in the Center Horizontally

I'm struggling to center Bootstrap Icons within my buttons. The icon appears to be off-center horizontally, and I've tried various methods like text-align and flexbox with justify-content. It seems like the "letter" itself is causing some extra s ...

htmlcssbootstrap-4icons

Safari: Fixed-positioned DIVs staying put after DOM updates

Hey there! I've been experimenting with animating absolutely positioned DIVs on my webpage using some JavaScript to update the top and left CSS properties. It's been working smoothly in Chrome, Firefox, and even Internet Explorer 8. However, I e ...

javascriptjquerycssdomsafari

Stylized widget for showcasing a list of cities for meetups

After extensive searching, I have yet to find a solution to stylize the "City List" widget for Meetup. The specific widget I am focusing on is the first one listed here. () Despite exploring various options such as the widget foundry and conducting onlin ...

csspluginswidgetmeetup

Customize a theme component only when it is a child of another component

I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog. https://i.stack.imgur.com/13doLm.png In regular CSS, you could achieve this with: .MuiDialog-root .MuiButton-root { border: 5px solid blue; } However, I am strug ...

cssreactjsmaterial-ui

The flex item does not appear as intended when styled with justify-content: space-between

I'm trying to create a menu bar with sub-menus in CSS using Flexbox. I want to have an "Account" or "Profile" link on the right side of the menu bar on the same line, but for some reason, it's displaying under the main menu. I believe there' ...

htmlcssflexbox

Disabling $routeprovider while implementing bootstrap

I am encountering an issue with my normal routeprovider code. In a specific section of my HTML, I have some Twitter Bootstrap expand/collapse sections which inadvertently trigger the routeprovider when clicked. Is there a way to prevent this from happening ...

javascriptangularjstwitter-bootstrap

Issue with Bootstrap columns being misaligned on mobile devices

On my website, I've implemented a Bootstrap Grid design with three columns under the container-fluid BS attribute, along with .row .no-gutters. While the boxes are perfectly aligned in the desktop view, they stack vertically on mobile and tablet devi ...

htmlcssbootstrap-4

What is the best way to position one of my links at the end of a bootstrap navbar?

insert image description here I'm currently working on implementing a Bootstrap navbar and I am trying to align one of the links, specifically the last one, to the right side. Although I have searched through the documentation, I have not been able t ...

htmlbootstrap-4

Exporting CSS file from css-loader in Webpack: A step-by-step guide

My application structure is set up like this: /src /app.js /styles.css /images /img.png The content of the app.js file is as follows: const styles = require('./styles.css'); console.log(styles) // => I want a URL to t ...

javascriptcsswebpack

JavaScript - Reveal a div when a grid item is clicked

I have created a grid with a 5x7 layout using divs. I am trying to achieve a feature similar to the Netflix interface where, upon clicking on a div, a larger div will appear beneath it. This larger div should expand to 100% width of the parent container, p ...

javascripthtmlcsslaravel

Image optimization using media queries

In the scenario where the maximum width is 1220px, I want to change the main display to column. This is what I have implemented: @media (max-width: 1220px) { .main { flex-direction: column; } However, when the width reaches 1220px, the image disap ...

htmlcssimagemedia-queries

The scrollbar style mixin in Sass is successfully applied to textareas, but fails to work in other types

I found an example on css-tricks.com that demonstrates a convenient mixin for custom scrollbars: @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) { // For Google Chrome &::-webkit-scrollbar { w ...

htmlcsssass

Troubleshooting problem with JQuery window printing capability

After creating a paper with dimensions of 21.0 cm width and 29.7cm height, I encountered an issue where the printer output three papers instead of just two. I am not sure where I went wrong in my setup. You can find the source code here. window.print(); ...

jquerycssgoogle-chromeprintingwindow

Navigating through a PHP table, tracking your progress with a

I have encountered a problem that I need help with. I have been searching the internet for information on how to add a progress bar to my PHP code. Most solutions I found use the style method to display the progress percentage. In the image below, you can ...

phphtmlcss

Customize the <td> column based on values and rows. Modify the current jQuery code

This code snippet contains an HTML table that dynamically populates based on the dropdown selection. The script included in the code highlights the best and worst values in the table by changing their background color to green and red, respectively. & ...

javascriptjqueryhtmlbootstrap-4

How can I stack images on top of each other within a div

Currently, I am in the process of creating a blackjack game and encountering an issue with overlapping cards. Despite implementing the code below, all I see is a column of cards displayed. I have looked at similar questions for guidance, but I'm unab ...

htmlcssbootstrap-5

Using jQuery to modify the collapse behavior in Bootstrap accordion from the "+" sign to the "-" sign

Currently, I am attempting to display the 'minus (hyphen)' sign when a user clicks the button. Despite trying various codes, none seem to be working as expected. Can anyone identify where the mistakes may be? <a role="button" data-toggle="col ...

jqueryhtmltwitter-bootstrap

What is the best way to eliminate the gap between these two div elements?

There's a gap between two divs in my HTML that I can't seem to remove. Here are the relevant CSS styles: #tab-2-content { display: grid; grid-template-rows: 1fr 2fr; width: 70%; margin: 0 auto; grid-gap: 0; } ... (CSS code continues) ...

htmlcsscss-grid