Spacing between cards using Bootstrap

I have a collection of cards styled with Bootstrap and I am looking to add a left margin. I want the cards to be evenly spaced across the width. Right now, there is excess red on the right side that I want to remove...

.azer {
  background: red;
}

.card-annuaire {
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b1aab4aab6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf">
        <div class="azer">
          <div class="col-md-12">
            <div class="row g-0">
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Check it out here: https://codepen.io/zazzou/pen/abYdZQL

EDIT Here's an example of what I want to achieve: (no margin on the left and right sides of the first and last card) https://i.sstatic.net/dKPjZ.jpg

htmlcssbootstrap-5

Answer №1

Make sure to delete the margin-right: 1rem; property within the .card-annuaire class. Also, update the g-0 in your row class to gx-3 to add spacing between your cards.

Note: For more details on gutters in Bootstrap, refer to this resource: Bootstrap Gutters

Answer №2

  • Adjust the column gutter widths
  • Expand the cards to full width
  • Apply the red background directly on the row instead of using a separate element

.azer {
  background: red;
}

.card-annuaire {
  width: 100%;
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9d90908b8c8b8d9e8fbfcad1cfd1cd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf">
        <div class="col-md-12">
          <div class="row azer">
            <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-3 grid-item-annuaire letter">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
              <div class="card card-annuaire mb-4">
                <div class="card-body">
                  <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №3

To eliminate the margin on the right side of .card-annuaire, make the following change:

.card-annuaire {
      background:green;
            border:0;
            border-radius: 0;
            .card-body {
                text-align: center;
            }

Modification

If you want to have margins on both sides, use this code instead:

.card-annuaire {
      background:green;
            border:0;
            border-radius: 0;
            margin:0 1rem;
            .card-body {
                text-align: center;
            }


.azer {
  background: red;
}

.card-annuaire {
  background:green;
        border:0;
        border-radius: 0;
        margin:0 1rem;
        .card-body {
            text-align: center;
        }
    }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f948a9488">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf" >
        <div class="azer">
          <div class="col-md-12">
            <div class="row g-0">
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </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

Grid X Transformation 3: Dynamically alter grid cell background based on value (no need for CSS classes)

While working with GXT2, it was possible to dynamically change a cell's background color using the GridCellRenderer's render method. However, in GXT3, this feature no longer exists. The suggested approach is to utilize a GridViewConfig and overri ...

cssgxt

Create an alert box that covers the content

I have been struggling to get the alert boxes to overlap on my content without pushing it down. I have tried changing the position to absolute, relative, and fixed, but nothing seems to work. There was one time when it worked, but as soon as I saved, it ...

csssassbootstrap-5

The use of jQuery addClass does not produce any changes

I am trying to modify a single attribute in my class using a JavaScript function. .msg_archivedropdown:before { content:""; display: block; position:absolute; width:0; height:0; left:-7px; top:0px; border-top: 10px solid tr ...

javascriptjquerycss

Present two logos on either side of a navigation bar with Bootstrap in between

I am facing an issue with the display of my two logos. One logo is supposed to be in the right corner and the other in the left, but the right logo is not appearing correctly. <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="ban ...

twitter-bootstrapcsstwitter-bootstrap-3

Unable to transfer a value from a CGI script back to an HTML form

When working with an HTML form that has a date field named cdt, I encountered the need to retain the date value when submitting data to an Oracle table through a CGI script. To achieve this, instead of using Javascript code like history.go(-1), I aimed to ...

javascripthtml

navbar item arranged in a row using Bootstrap 5

I am looking to create a fixed top navbar with just one row, instead of two rows. Here is the code I currently have: <div class="col-md-3"> <ul class="navbar-nav mb-2 mb-lg-0"> <li class="nav-item"&g ...

htmlbootstrap-5

Contact form in Bootstrap 5 lacks responsiveness

I am currently exploring Bootstrap 5 for my website design project, and one of the features I have implemented is a contact form. While the white arrow that separates the two sections blends in seamlessly on desktop and laptop screens, it doesn't quit ...

htmlcssresponsive-designfrontendbootstrap-5

What is the best way to update a canvas chart when the side menu is hidden?

I am facing an issue with the layout of my webpage, which includes a left side menu and a canvas chart. The left side menu occupies the first 155 pixels of the width, leaving the rest for the canvas chart set to a width of 100%. However, when I close the ...

javascripthtmlcanvas

Limiting jQuery searches to a specific region: Tips and tricks

If I have the code snippet below: <div class="foo"> <div> some text <div class="bar"> </div> </div> </div> <div class="foo"> <div> some text <div class="bar"> some text </div> </div> </ ...

javascriptjqueryhtmlparsingtags

Tips for preserving scroll location on Angular components (not the window) when navigating

My current layout setup is like this: https://i.sstatic.net/hOTbe.png In essence <navbar/> <router-outlet/> The issue I'm facing is that the router-outlet has overflow: scroll, making it scrollable (just the outlet section, not the ent ...

javascripthtmlcssnode.jsangular

Is there a way to determine whether a mouse-down event took place on the scroll-bar or elsewhere within the element?

Looking for a solution with my HTML div acting as a canvas containing various objects. The issue lies in the fact that when attempting to draw a selection rectangle by dragging with the mouse, if scroll bars appear due to the large size of the canvas, scr ...

javascripthtml

What steps should I take to change the orientation of these items from vertical to horizontal display?

I'm struggling to get these items to appear horizontally (side by side) instead of vertically on my webpage. They are linked to a database, hence the PHP code included here. If you need more information, please feel free to ask. body { font: no ...

htmlcssdatabaseinlinedisplay

Creating an HTML hyperlink to a file

I've been attempting to connect a blog post I saved previously to my new website, but so far I have not been successful in getting them to display. It keeps showing up as file not found. Is there something I am missing? My past blog posts are stored i ...

htmlhyperlink

Issue with the navbar toggler not displaying the list items

When the screen is minimized, the toggle button appears. However, clicking it does not reveal the contents of the navbar on a small screen. I have tried loading jQuery before the bootstrap JS file as suggested by many, but it still doesn't work. Can s ...

javascriptjqueryhtmlcsstwitter-bootstrap

I'm having trouble changing the background color on my HTML Bootstrap website. Is there a way to easily add social network buttons as well?

I'm encountering a problem here. One of my friends assisted me with Bootstrap elements for my website, but after switching my site to Bootstrap, I am unable to change the background color on my website. Can someone lend a hand? Much appreciated! Also, ...

csshtmltwitter-bootstrap

html scroll to the flickering page

Why is it that when a user clicks on a link in the list, the browser flickers? This issue becomes especially noticeable if a user clicks on the same 'link' twice. Is there a solution to prevent this from occurring? The problem also seems to aris ...

javascriptjqueryhtmlcss

RTL mode causing issues with Bootstrap breadcrumb functionality

I'm currently working on integrating a Bootstrap breadcrumb into my next.js application. Everything seems to be functioning correctly when in LTR mode, following the sample code provided in Bootstrap's documentation. However, when attempting to s ...

reactjstwitter-bootstrapnext.jsbootstrap-5

Tips for incorporating a background image using bootstrap

I am facing an issue with a large background image of size 1600 X 3700. When I try to add bootstrap to my project, the background image disappears and only the first 100px are visible. Can anyone provide guidance on the correct way to use bootstrap with ...

htmltwitter-bootstrapcssresponsive-design

Tips for incorporating transition animations into route changes in next.js

On the homepage, there are 2 links that I want to have distinct transition animations for. For example, if I click the link on the left, the animation should start from the left and move towards the right when changing routes. ...

cssreactjsanimationnext.js

Tick the checkbox to indicate that I want to insert an image in the adjacent column for the same row

Every time I click on the checkbox, an image should appear in the adjacent column for that specific row. Despite using the addClass() method and targeting the td, the image is appearing in all rows instead of just the selected one. Could somebody help me ...

javascriptjqueryhtmlcssangularjs