Tips for organizing multiple parameters on a single card

I Need Help with aligning 8 cards in a single row. Each card should display Average, Range, Min, and Max data.

What I've Tried So Far I have tried the following code:

<div class="row">
  <div class="col">

    <!-- Card 1 -->
  
  </div>

  <div class="col">

    <!-- Card 2 -->
  
  </div>

  <div class="col">

    <!-- Card 3 -->

  </div>

  <div class="col">:

    <!-- Repeat for Cards 4-8 -->

  </div>

</div>

However, this code is resulting in distorted display, as shown in the image below. I am facing issues with extra padding between/within each card, causing some elements to go out of the card boundaries when trying to remove the padding.

Please assist me in achieving proper alignment of the cards in the same row. https://i.sstatic.net/NfPci.png

The expected output design of the card is visible in the image linked below

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

Updated Code Following Suggestions by Nisharg Shah

<div class="row">
  <div class="col px-1">

    <!-- Updated Card Layout Here -->

  </div>

  <div class="col px-1">

    <!-- Repeat Updated Card Layout for remaining cards -->

  </div>

</div>

This code displays the cards properly aligned, as shown in the image https://i.sstatic.net/ubFeX.png

I would like to resize the top icon and remove the extra space above the footer as indicated by the green arrows in the image. Your guidance on this matter would be greatly appreciated.

Answer №1

To reduce the gap between cards, you can include the px-1 class in all col classes.

px-1 equals .5rem or 8px. If you wish to further reduce the gap, consider adding custom CSS to your col classes.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
  <div class="col px-1">
    <div class="card card-stats">
      <div class="card-body">
        <div class="row">
          <div class="col-5">
            <div class="info-icon text-center icon-primary">
              <i class="icons icon-shape-star"> </i>
            </div>
          </div>
          <div class="col-7">
            <div class="numbers">
              <p class="card-category">Followers</p>
              <h6 class="card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-5">
            <!-- <div class="numbers"> -->
              <p class="card-category">Average</p>
              <h6 class="card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class="col-7">
            <div class="numbers">
              <p class="card-category">Followers</p>
              <h6 class="card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <hr />

        <div class="stats">
          <i class="icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

...other similar code blocks...

</div>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4849b84849186da9e87b4c5dac5c2dac4">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

Styling with ngStyle and changing the background image

Having an issue with a component that has an @Input string value linking to an image. In my HTML file, I originally had: <div class="parallax" [ngStyle]="{'background-image': 'url({{parallaxImage}})'}"></div> This was not ...

The arrow in the dropdown menu is missing

I recently came across this code snippet in a Boostrap 4 website: <div class="btn-group mb-2 mr-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" cl ...

Tips for overlaying an image on a div regardless of its height

(!) Although this question may seem repetitive, I have not been able to find a suitable solution in any of the previous 10 topics. I apologize for the inconvenience and am actively seeking a resolution to this unique situation; Allow me to outline the iss ...

Displaying jQuery content tabs with excessive whitespace visible

My project utilizes a jQuery content tab plugin featuring 6 tabs with different content sections (Company, The founders, Team, Accolades, Careers, Philosophy). I am encountering an issue in Chrome where clicking on the Company tab after any other tab res ...

The Handsontable popup autocomplete editor is unfortunately truncated by the horizontal scrollbar

I have implemented an autocomplete feature on all columns in my project. However, I am facing an issue where the autocomplete editor gets cut off by the horizontal scrollbar. You can see the problem demonstrated in this jsfiddle link. Here is some code re ...

Retrieving data from a dynamic form using jQuery

Can someone assist me with the following issue: I have a dynamic module (generated by a PHP application) that includes input fields like this: <input type="text" class="attr" name="Input_0"/> <input type="text" class="attr" name="Input_1"/> ...

I need help converting the "this week" button to a dropdown menu. Can someone assist me in troubleshooting what I am missing?

Seeking assistance with customizing the "this week" button on the free admin dashboard template provided by Bootstrap 4. Looking to turn it into a dropdown feature but unable to achieve success after two days of research and watching tutorials. See code sn ...

"Creating Rounded Corners in HTML: A Step-by-Step Guide

Is there a way to round the corners of this image? Below is an excerpt from my body... <body> <h1 style="float:left; width:37%;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h1> <div style= ...

Attempting to center the text directly above the input field

Is there a way to align text on top of an input box without manual adjustment? Any suggestions on how to achieve this? <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...

Designing a webpage with CSS to include an offset

I've been struggling to adjust this HTML by 300 pixels vertically and horizontally, without any luck. If you have any resources or tips on how to achieve this, I would greatly appreciate it. I already have three frames in place, and I'm attemptin ...

Centering text both vertically and horizontally over an image using CSS

I've been attempting to center the div banner_title both vertically and horizontally within another div in this way... .box { text-align: center; } .banner_title { font-size: 32px; position: absolute; top: 50%; width: 100%; } .banner_titl ...

Child div height (with embedded iframe) - issue with responsiveness

I have been working on a simple code for a day now, trying to solve a problem with no progress :( My goal is to display an iframe with a background image. However, the snippet code I have is not showing the background image as intended. You can view the li ...

Hover shows no response

I'm having trouble with my hover effect. I want an element to only be visible when hovered over, but it's not working as expected. I've considered replacing the i tag with an a, and have also tried using both display: none and display: bloc ...

Embarking on the journey of using SASS, SCSS, and Bootstrap within an Angular project

Just dipping my toes into the world of Bootstrap and SASS, so any guidance on setting it up properly would be greatly appreciated. I've recently started an Angular project in Visual Studio 2019. Bootstrap is specified in package.json like this: " ...

Switch between different stylesheets effortlessly with just one button click

I'm interested in creating a button that can switch between two stylesheets with a single click. Here is the current code I am using: <link id="style1" rel="stylesheet" type="text/css" href="style.css" /> <link id="style2" rel="stylesheet" t ...

tips for creating curved text using CSS

While working on a webpage design from a PSD file, I noticed some text that is slightly curved. https://i.sstatic.net/ns3tx.jpg https://i.sstatic.net/5AlIa.jpg https://i.sstatic.net/s380a.jpg If you look at the three images above, you'll see that ...

Tips for effectively highlighting search text within HTML content without causing any issues

I am in search of a solution that can assist me in searching for specific terms within an HTML string while also highlighting them. I have the ability to remove the HTML content from the string, but this poses the problem of losing the context of the origi ...

The checkValidity function fails to identify incorrect "tel" input

In my form, I am using the checkValidity function to validate inputs. However, I have encountered an issue where the validation only works when an input with the required attribute is missing a value. It doesn't work if there is a value type mismatch, ...

What is the best way to add HTML formatted text into Outlook?

In my Emacs, I've generated this syntax-highlighted code snippet and now want to paste it into an Outlook email with rendered HTML (without the actual HTML code). <pre> <span style="color: #a020f0; background-color: gtk_selection_bg_color;"& ...

Are there drawbacks to utilizing large integer values as array indexes?

Simply put. We are discussing javascript here. I am wondering about the potential performance drawbacks, memory issues, and so on when using high value integers as array indexes instead of low value ones. Some programming languages allocate enough memory ...