Is there a way to adjust the spacing between cards in Bootstrap?

I am attempting to replicate the layout shown in the attached picture. How can I adjust this property?

Expected output:

I would like the elements to be closer together and centered on the page, but I am struggling to achieve this. I have tried adjusting the column-gap, but it has not been effective. This is my first time doing this, so any assistance would be greatly appreciated.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6aab6aa">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="row">
  <div class="col">
    <div class="card" style="width: 16.5rem">
      <img src="https://via.placeholder.com/300x100" class="card-img-top" alt="..." />
      <div class="card-body">
        <center>
          <h5 class="card-title">Card title</h5>
          <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </center>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card" style="width: 16.5rem">
      <div class="card-body">
        <center>
          <h5 class="card-title">Card title</h5>
          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
        </center>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card" style="width: 16.5rem">
      <div class="card-body">
        <center>
          <h5 class="card-title">Card title</h5>
          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
        </center>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card" style="width: 16.5rem">
      <div class="card-body">
        <center>
          <h5 class="card-title">Card title</h5>
          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
        </center>
      </div>
    </div>
  </div>
</div>
htmlcssbootstrap-5

Answer №1

  1. Utilize the grid system for sizing instead of specifying sizes on cards.
  2. Enclose rows in containers to maintain structure.
  3. Avoid using inline styles; opt for Bootstrap features or custom classes for styling.
  4. Avoid deprecated elements like center; use Bootstrap's text alignment and flex layout utilities instead.

.col.mw-16_5 {
  max-width: 16.5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6e75697569">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center">
    <div class="col mw-16_5">
      <div class="card">
        <img src="https://via.placeholder.com/300x100" class="card-img-top" alt="..." />
        <div class="card-body text-center">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="col mw-16_5">
      <div class="card">
        <div class="card-body text-center">
          <h5 class="card-title">Card title</h5>
          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
        </div>
      </div>
    </div>

    <div class="col mw-16_5">
      <div class="card">
        <div class="card-body text-center">
          <h5 class="card-title">Card title</h5>
          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p class="card-text">
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
        </div>
      </div>
    </div>

    ...

All that said, consider using basic flexbox layout and Bootstrap's margin classes for spacing rather than relying solely on rows and columns.</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.card.minw-10 {
  min-width: 10rem;
}

.card.maxw-16_5 {
  max-width: 16.5rem;
}
...

Answer №2

<div class="panel" style="width: 18rem; margin-left: 25px;>

Personally, I prefer using pixels for measurements but you have the option to use rem, cm, or other units as well.

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

Rotate the mat-select arrow when the dropdown opens (moving in both upward and downward directions)

Currently, I have a mat-select dropdown icon arrow that toggles facing up or down based on user clicks. However, after selecting an option and closing the dropdown, the arrow remains in the upward position unless further clicked and held. I have attempted ...

javascriptcssangularsassangular8

What is the best way to reduce the size of an image using a URL?

As I work on creating a website in React for a company, my main focus is on developing a drive repository where users can upload files. One issue that has arisen is the performance of the "photos" folder, as it contains numerous high-resolution images th ...

htmlcssreactjsbrowser

Interactive JavaScript Linkage

Recently, I came across some code that I inherited (definitely not mine!) which uses a session variable in the HTML header to link to a specific javascript file. For example: <SCRIPT language="javascript" src="../JavaScript/<%=Session("jsFileName") ...

javascriptasp.nethtmlvb.netvisual-studio-2003

Is it required for IDs in CSS to always correspond to a single element? How should IDs be handled if the same element is repeated multiple times on

Is it possible to have a menu that is visible at both the top and bottom of an extensive HTML page using the following code: <div id="menu"><ul><li>Home</li><li>About</li></ul></div> Would it be appropriate ...

htmlcss

I'm encountering an issue with VS Code where it is unable to identify ejs tags within my project

I'm running into an issue with Vs code where it's not recognizing ejs output tags when they're inside an html tag, like in the input tag below : <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form. ...

javascripthtmlnode.jsexpressejs

How can user input be converted into a JavaScript variable?

Looking for help with my webpage - I want users to input their name and age. After hitting submit, I'd like the first input to be stored in a variable called 'name', and the second input in a variable called 'age'. Is this doable? ...

javascripthtmlforms

Incorporate New Material into DIV Using a Specific Class Identifier

I need to customize the default output of Wordpress menu using <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>. My goal is to change the appearance of pages with submenus. Currently, pages with a submenu are fo ...

phpjqueryhtmlcsswordpress

Unlocking the power of python with web2py by tapping into html form values

I'm working on a project using web2py and need to incorporate ajax/javascript with a form. Currently, when a user selects an option in the departure box, the arrival box appears. However, I'm unsure of how to filter the list of arrival options ba ...

javascriptpythonhtmlajax

Implementing Pagination or Infinite Scroll to Instagram Feed

Currently, I am working on creating an Instagram feed for a fashion campaign where users can hashtag their photos with a specific tag. Using the Instagram API, the script will pull all recent posts with this common tag to display on the webpage. Instagram ...

javascripthtmlajaxpaginationinstagram

Why won't Firefox display images on my website?

Currently facing an issue with a website I am designing using HTML/CSS (design only). When I open it in Firefox from my hard drive, no images are displayed - instead, there is a small icon indicating that the picture could not be loaded. However, if I righ ...

htmlcssfirefox

the submit button seems to be malfunctioning

Hi there! I recently created a contact page using Dreamweaver for my website. However, after uploading my blog, the submit button on the contact form doesn't seem to be working. The technical support team at WordPress suggested that I need to edit som ...

phphtmlwordpressbuttonsubmit

The Bootstrap modal fails to open

I am currently working on implementing a Navbar button that triggers a Bootstrap modal containing a form. While looking for resources, I stumbled upon a useful script at https://gist.github.com/havvg/3226804. I'm in the process of customizing it to su ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Exploring the contrast between window and document within jQuery

I'm curious about the distinction between document and window in jQuery. These two are commonly utilized, but I haven't quite grasped their differences. ...

javascriptjqueryhtmlcss

Leverage PHP to retrieve information from a JSON file and integrate it into a dropdown menu on an HTML

I've been given a task to develop a PHP routine that will extract the ISO code and name from a geojson file for use in a dropdown list of countries on a website. This is completely new to me and I'm finding it difficult to understand the documen ...

phphtmlleafletgeojson

What is the process for editing or importing CSS within a React project?

I'm a beginner in React and I am encountering an issue with CSS not loading properly. I followed the tutorial for importing it, but it seems like there might be a better way to do it now as the tutorial is outdated. Below is my code, I would appreciat ...

cssreactjs

What is the best way to embed a webpage into another webpage using frames?

I need help embedding an iframe on my website, , to display the items I am selling on eBay. This is my first time attempting to create an iframe. ...

htmliframe

jQuery plugin modifies keypress events

I have integrated the Jquery ImgAreaSelector plugin into my website. Within my site, I have implemented several keypress triggers using jquery. For example: $(document).bind('keypress', 'S', function(){ alert("You have pressed S key ...

javascriptjqueryhtml

overlaying an image with a CSS box and then dynamically removing it using JavaScript

I am new to JavaScript, so please bear with me if this question seems quite simple. I am facing an issue with my current task. There is an image on a web page. My goal is to place a black box on top of the image (using CSS) to cover it up. Then, with th ...

javascriptjqueryhtmlcss

Internet Explorer 8 is causing alignment problems with sidebars on certain websites within a Wordpress multisite setup

I am managing a Wordpress multisite setup with the following websites: The main portal: which connects to The issue arises on all pages of gprgebouw.nl and gpradvies.nl but not on the other domains. Attached is a screenshot of the homepage of gprgebouw. ...

csswordpressinternet-explorer-8alignment

Ways to maintain uniform size in displaying images even when they are of different dimensions

Within my web application, administrators have the ability to upload various images that will be displayed on the site. The challenge arises from the fact that these images come in different sizes and dimensions. However, it is important that all users w ...

angularjsimagecss