Troubleshooting Bootstrap problem: Card row not adjusting size properly with added margins

Can anyone offer some assistance?

I've configured my bootstrap cards to display 3 in a row on larger screens and resize for smaller devices. The issue I'm facing is that the cards are displayed in a grid format, but I would like to add a small margin to the right of each card to make them look separate rather than table-like.

Whenever I try to add a margin-right property, it causes the cards to go out of alignment and move onto the next row. How can I add the margin-right while keeping the cards on the same row?

This is what my code looks like so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Account Dashboard</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src=&...
htmlcssbootstrap-4

Answer №1

For this particular scenario, the key is to wrap columns within a div and apply a slight padding. I utilized the p-2 utility class in solving this issue.

Sample Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Account Dashboard</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <style>
      .card-container {
        border: 1px solid rgba(191, 191, 191, 1);
        border-radius: 0px;
        padding-right: 0px;
        padding-left: 0px;
        /*margin: 10px;*/
      }

      .row {
        margin-bottom: 10px;
      }

      .card-body {
        padding: 10px;
      }

      .ul-align {
        text-align: left;
        padding-left: 105px;
        margin-bottom: 0px !important;
        font-size: 12px;
        font-weight: normal;
        color: #787878;
      }

      .account-icon {
        margin-right: 10px;
        float: left;
        display: flex;
      }

      @media (max-width: 980px) and (min-width: 640px) {
        .ul-align {
          text-align: left;
          padding-left: 20px;
          margin-bottom: 0px !important;
        }

        .account-icon {
          display: none;
        }
      }

      .account-title {
        font-size: 24px;
        font-weight: 400px;
        color: #787878;
        padding-bottom: 20px;
      }

      .caret-title {
        font-size: 16px;
        font-weight: 400px;
        color: #787878;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="account-title">My Account</h1>

      <div class="row">
        <div class="col-3 col-md-4 col-12 col-6 p-2">
          <article class="card-container bg-light">
            <div class="card-body">
              <img
                class="account-icon"
                src="https://via.placeholder.com/70"
                alt="Card image cap"
              />
              <h4 class="card-title">Card Title</h4>
              <ul class="ul-align">
                <li>Descriptive text</li>
                <li>Descriptive text</li>
              </ul>
            </div>
          </article>
        </div>

        <div class="col-3 col-md-4 col-12 col-6 p-2">
          <article class="card-container bg-light">
            <div class="card-body">
              <img
                class="account-icon"
                src="https://via.placeholder.com/70"
                alt="Card image cap"
              />
              <h4 class="card-title">Card Title</h4>
              <ul class="ul-align">
                <li>Descriptive text</li>
                <li>Descriptive text</li>
              </ul>
            </div>
          </article>
        </div>

        <div class="col-3 col-md-4 col-12 col-6 p-2">
          <article class="card-container bg-light">
            <div class="card-body">
              <img
                class="account-icon"
                src="https://via.placeholder.com/70"
                alt="Card image cap"
              />
              <h4 class="card-title">Card Title</h4>
              <ul class="ul-align">
                <li>Descriptive text</li>
                <li>Descriptive text</li>
              </ul>
            </div>
          </article>
        </div>
      </div>
      <div class="row">
        <div class="col-3 col-md-4 col-12 col-6 p-2">
          <article class="card-container bg-light">
            <div class="card-body">
              <img
                class="account-icon"
                src="https://via.placeholder.com/70"
                alt="Card image cap"
              />
              <h4 class="card-title">Card Title</h4>
              <ul class="ul-align">
                <li>Descriptive text</li>
                <li>Descriptive text</li>
              </ul>
            </div>
          </article>
        </div>

        <div class="col-3 col-md-4 col-12 col-6 p-2">
          <article class="card-container bg-light">
            <div class="card-body">
              <img
                class="account-icon"
                src="https://via.placeholder.com/70"
                alt="Card image cap"
              />
              <h4 class="card-title">Card Title</h4>
              <ul class="ul-align">
                <li>Descriptive text</li>
                <li>Descriptive text</li>
              </ul>
            </div>
          </article>
        </div>

        <div class="col-3 col-md-4 col-12 col-6 p-2">
          <article class="card-container bg-light">
            <div class="card-body">
              <img
                class="account-icon"
                src="https://via.placeholder.com/70"
                alt="Card image cap"
              />
              <h4 class="card-title">Card Title</h4>
              <ul class="ul-align">
                <li>Descriptive text</li>
                <li>Descriptive text</li>
              </ul>
            </div>
          </article>
        </div>
      </div>
    </div>
  </body>
</html>

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

Align your content in the center of any browser

My CSS code is currently only centering on a certain type of screen, but I want it to be centered on any screen. Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); html{ font-family: "HelveticaNeue-Light" ...

htmlcss

Guide to displaying highcharts using external json data for numerous series

Having an issue with using angularjs and highcharts with multiple series where the data is coming from an external JSON file. When trying to access the data with a for loop using data.data[i].data, it's not working properly. Can anyone offer assistanc ...

jqueryhtmlangularjsajaxhighcharts

Creating a custom function in a Node.js application and rendering its output in the front-end interface

I've been trying to scrape data from a website and display it using innerHTML, but I'm running into some issues. The code snippet I'm using is: document.getElementById('results').innerHTML = searchJobs(''); However, I ke ...

javascripthtmlnode.jsexpress

The ideal location for the style.css file in a WordPress website

I'm currently working on creating my own WordPress theme and utilizing SASS to write the CSS. I want the final compiled CSS to be minified, so I have a question: If I set SASS to compile the CSS in my style.css file (located in the main theme folder) ...

htmlwordpresscss

The HTML Bootstrap collapse feature is not functioning correctly upon the initial button press

Could you assist me with implementing a bootstrap and javascript collapse feature? I have two collapsible cards. The first card should be visible initially, but then switch to the second card when clicked on a link. However, upon the first click, both card ...

javascripthtmltwitter-bootstrap

Submitting a form in React/Javascript: A step-by-step guide

I have a website on Wordpress where I am using the Wp-Polls plugin to vote. How can I submit a post request by accessing a form URL in a React project? Specifically, how can I vote for the "Bad" option with a value of 2? The HTML structure of the WordPre ...

javascripthtmlreactjs

Creating a Bootstrap layout with a cool typing effect to position my P element in the center of a div

I've been attempting to center my text with a typing effect in the middle of this div, but I'm having trouble getting it to work. Below is the code I tried using, but it's not achieving the desired result. The text continues to display on th ...

htmlcssbootstrap-4center

Is it necessary for background images to be loaded on mobile devices within media queries in CSS3?

Assuming the following CSS: div {background: #000} @media (min-width: 1000px) { div {background: url(myimage.jpg)} } Would a smartphone with a width of 320px download the background image? Thank you! ...

cssmobileloadingmedia-queries

How to reference global Sass variables in a Sass module

My preferred method involves utilizing a global .scss file that houses all the foundational styles, such as primary color selections. Following this, I create separate modules for each React Component to maintain organization and reduce the need for import ...

csssassnext.js

Adding a clear field icon to an input field: Step-by-step guide

When using AngularJS 1.3, a standard input field with type="date" comes with a convenient "Clear field" icon as shown here. Is there a method to incorporate this same "Clear field" icon into an input field with type="text"? ...

javascripthtmlangularjsangularjs-directive

Reveal or conceal the footer section as you reach the end of the webpage

My webpage layout consists of a fixed nav-bar at the top, a drop down sidebar, a <div> element with an id of content, some content inside the <div>, and a bottom <div> with a fixed position. I am trying to hide the bottom <div> whe ...

javascripthtmljquerycssscroll

Is there a way to retrieve the value of a select element that has more than one option selected?

On my website, there is a select element that enables users to choose multiple options. My goal is to gather an array containing the values of all currently selected options. I attempted to utilize the selectedOptions property of the select element in ord ...

javascripthtmlarraysselect

Is it possible to dynamically load JavaScript?

I'm currently working on a project that requires me to dynamically add JavaScript. I have a global.js file that contains all the global variables I need to add dynamically. However, I'm facing an issue where global.js is not being added before ut ...

javascripthtml

What could be causing ReactNative Dimensions component to display lower resolutions?

Currently, I am developing an application using React Native v0.45.1 and testing it on my S6 device. Despite setting a background image that matches the resolution of my phone, it appears excessively large on the screen, cutting off most of the content. T ...

androidcssreactjsreact-nativebackground

The jQuery .accordion() feature is not functioning properly due to the failure to load jQuery into the HTML document

I have exhaustively researched online and visited numerous resources, including Stack Overflow. Despite making countless adjustments to my code, it still refuses to function properly. The frustration is mounting as I struggle with jQuery - a technology tha ...

javascriptjqueryhtml

Retrieving PHP information in an ionic 3 user interface

We are experiencing a problem with displaying data in Ionic 3, as the data is being sourced from PHP REST. Here is my Angular code for retrieving the data: this.auth.displayinformation(this.customer_info.cid).subscribe(takecusinfo => { if(takecusi ...

phphtmlangulartypescriptionic3

Adjust the top value of a tooltip in Foundation 4

How can I adjust the tool tip text top value to avoid it hovering over icons? To get a clearer view of the issue, check out the screenshots provided. If you notice any other formatting issues with my HTML text, please don't hesitate to inform me. (Jus ...

csshtmltooltipzurb-foundation

Adding an image to the right side of a jumbotron component in Bootstrap

Hey there! I'm trying to add an image to the jumbotron component in Bootstrap. I'd like to position it on the right side of the jumbotron. Here's the code I have so far: <section class="jumbotron text-center"> <div class="conta ...

twitter-bootstraptwitter-bootstrap-3bootstrap-4

The flex-basis property seems to be malfunctioning as the image suddenly vanishes when

While my question may seem similar to others, the issue at hand is actually quite different. Here's how it appears in Chrome https://i.sstatic.net/tngvr.jpg Safari https://i.sstatic.net/eE74k.png In Safari, you'll notice that the map disappear ...

htmlcsssafariflexbox

When you hover over the page, the content shifts to reveal a hidden div

Trying to figure out how to show additional content when a photo is hovered over without shifting the rest of the page's content placement? Looking for alternative solutions rather than using margin-top: -22%. Here's a link to the website in que ...

javascriptjqueryhtmlcss