Ways to create distance between elements within a row

Trying to align 3 cards in a row within an angular 10 project has been challenging. While the cards line up horizontally on mobile devices, I'm struggling to create proper spacing between them on desktop. I've attempted adjusting margins and padding manually, utilizing Bootstrap's offset variable, and experimenting with flex parameters, but none have provided the desired result.

If someone could take a look at my code and help point out where I'm going wrong, it would be greatly appreciated.

My attempts so far include:

  1. Manually setting margins and padding - no effect seen
  2. Using Bootstrap's offset variable - no changes observed
  3. Experimenting with flex parameter - also no impact

Card Component HTML

<section>

  <div class="row">

    <div class="col-xl-4 col-md-4 my-4">

      ...

    </div>
 
  </div>


</section>

SCSS for this component:

.cascading-admin-card {
  margin-top: 20px;
  float: left;
  width:18rem;

}
...

.cascading-admin-card .admin-up .fa {
  -webkit-box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
}

Main dashboard implementation:

<div class="main-content justify-content-center" style="padding-top: 50px; align-content: center">
  <div class="container">
    <div class="row row-cols-12 row-cols-md-3">
      ...

    </div>


  </div>
</div>
htmlcssangulartwitter-bootstrapbootstrap-4

Answer №1

When I run my code with flex, I see the images below:

https://i.sstatic.net/Tbqto.png, this is for desktop and https://i.sstatic.net/hqnJ9.png, this is for mobile.

I have two goals: First, on desktop, I want the cards to align next to each other with some spacing from the sidebar. Second, the design needs to be responsive.

Here's a snippet of my code:

<div class="main-content " style="padding-top: 50px; align-content: center">
  <div class="container">

    <div class="d-inline-flex">
      <section class="col-4">
      <div >
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
      </section>
      <section class="col-4">
        <div >
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
      </section>
      <section class="col-4">
        <div >
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
      </section>
       </div>
  </div>

</div>

Answer №2

Your inquiry could use some enhancements.
If your question pertains to a CSS or HTML problem, make sure to share the expected output in HTML format without any Angular formatting.

I may not have full knowledge of how your Angular component functions, so there might be inaccuracies in my analysis below. I recommend familiarizing yourself with the construction of Bootstrap cards. Here is an illustration featuring a header, body, and footer within a card:

<div class="card text-center">
  <div class="card-header">
    My header
  </div>
  <div class="card-body">
    <h5 class="card-title">A title in the body</h5>
    <p class="card-text">A card text</p>
  </div>
  <div class="card-footer text-muted">
    A text in footer which is muted
  </div>
</div>

Next, for your `row` component, ensure you have 3 `col` elements where you can bind your cards. Consider moving the `mb-4` class to the `row` wrapper and eliminating it from your columns.

Regarding your card component, it appears that there are excessive rules in place. You should contemplate simplifying them. Below is my interpretation, with slight variations among the cards to demonstrate Bootstrap card implementation:

Visualize your code using the integrated stackoverflow js/html/css snippet

.cascading-admin-card {
  margin-top: 20px;
  float: left;
  width:18rem;

}
.cascading-admin-card .admin-up {
  margin-left: 4%;
  margin-right: 4%;
  margin-top: -20px;
  padding-top: 5px;
}
.cascading-admin-card .admin-up mdb-icon {
  padding: 1.7rem;
  font-size: 2rem;
  color: #fff;
  text-align: left;
  margin-right: 1rem;
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0,0,0,.2),0 2px 13px 0 rgba(0,0,0,.19); }
.cascading-admin-card .admin-up .data {
  float: right;
  margin-top: 2rem;
  text-align: right; }
.cascading-admin-card .admin-up .data p {
  color: #999999;
  font-size: 12px; }

.classic-admin-card .card-body {
  color: #fff;
  margin-bottom: 0;
  padding: 0.9rem; }
.classic-admin-card .card-body p {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 0; }
.classic-admin-card .card-body h4 {
  margin-top: 10px; }
.classic-admin-card .card-body .float-right .fa {
  font-size: 3rem;
  opacity: 0.5; }

.classic-admin-card .progress {
  margin: 0;
  opacity: 0.7; }


.cascading-admin-card .admin-up .fa {
  -webkit-box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
}
<html>
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="main-content justify-content-center" style="padding-top: 15px; align-content: center">
  <div class="container">
    <div class="row">
      <div class="col">
              
          <div class="card cascading-admin-card">
            <div class="card-header">
              <i class="fas fa-money-bill-alt primary-color"></i>
              SALES
            </div>
            <div class="card-body">
              <h5 class="card-title">$2000</h5>
              <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25"
                     aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="card-footer text-muted">
              Better than last week (25%)
            </div>
          </div>
        
      </div>
      <div class="col">
        <div class="card cascading-admin-card">
            <div class="admin-up">
              <i class="fas fa-money-bill-alt primary-color"></i>
              <div class="data">
                <p>SALES</p>
                <h4><strong>$2000</strong></h4>
              </div>
            </div>
            <div class="card-body">
              <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25"
                     aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p class="card-text">Better than last week (25%)</p>
            </div>
          </div>
      </div>
      <div class="col">
        <div class="card cascading-admin-card">
            <div class="admin-up">
              <i class="fas fa-money-bill-alt primary-color"></i>
              <div class="data">
                <p>SALES</p>
                <h4><strong>$2000</strong></h4>
              </div>
            </div>
            <div class="card-body">
              <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25"
                     aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p class="card-text">Better than last week (25%)</p>
            </div>
          </div>
      </div>
    </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

MaterialUI Box reigns supreme in the realm of background images

In my React component, I have a form that is structured like this: <Box display="flex" justifyContent="center" alignItems="center" style={{ minHeight: "100vh", backgroundColor: "gray", opacity: "0.8" }} > ... </Box> ...

cssreactjsmaterial-ui

The abbreviation 'ng' is not identified as a command that can be run internally or externally, nor is it an operative program or batch file - Angular

The error message 'ng' is not recognized as an internal or external command, operable program or batch file, appears when attempting to run ng serve. Despite running npm audit fix --force, the error persists. Running ng serve results in the abov ...

angularangular-cli

Picture transports during change

Is there a way to increase the size of images in a List without causing other images to move when hovered? Currently, when an image is hovered, it increases in size but causes the surrounding images to shift to a new line and I would like to avoid this beh ...

htmlcss

Issues with the display of Checkboxes and Radio Buttons in Angular 6/PrimeNg 6 are causing rendering problems

Recent issue after updating After upgrading from Angular 5.2.6 to 6.0.4 and primeng from 5.2.4 to 6.0.0-beta.1, the checkboxes and radio buttons appear as expected but do not display the check mark within the box when selected, nor the dot within the radio ...

angularuser-interfaceprimengangular6

Tips for altering the color of an activated Bootstrap dropdown toggle

When the Dropdown menu is open, I would like to customize its default colors. Specifically, I want to change the border color and background using CSS. https://i.sstatic.net/vKwLE.png Below is the HTML code snippet: <div class="row menu"> <ul ...

htmlcsstwitter-bootstrap

Exploring the Contents of an ASP ListView

I am attempting to align the odd-numbered items to the left using float:left, and the even-numbered items to the right using float:right. However, it seems like every item is being considered as odd AND element 1 regardless of the actual order in the list. ...

c#htmlasp.netcss

What steps can be taken to enhance the responsiveness of this Bootstrap 4 code?

I've been trying to make this code more responsive, but I haven't found a suitable solution yet. When the browser window shrinks to mobile sizes, the list becomes too narrow and the picture/video items on the right end up small and aesthetically ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Tips for monitoring server response in Angular 2

I received a reply in postman from my PHP code that looks like this: { "error_code": 0, "message": "Inserted Successfully.", "msg": "Inserted successfully." } Here is my Angular code: onSubmit(form:any){ var headers = new Headers(); ...

angularangular2-forms

What is the best method for extracting and displaying BLOB data (specifically images stored as BLOB) in Angular 2?

I need to retrieve BLOB data from a service that contains image data. How can I extract and display the image in my user interface? ...

angular

Prevent scrollbar from appearing while splash page loads

Looking for help with a script to create a splash/intro page loader. $(function(){ setTimeout(function() { $('#splash').fadeOut(500); }, 6000); }); The current script hides the intro page after 6 seconds, ...

javascriptjqueryhtmlcss

How can I modify the header text display in an Angular material table?

I'm currently working on implementing the Angular material table framework found on the following link: https://material.angular.io/components/table/overview My approach involves using ngFor to dynamically display all available columns based on the ...

angularangular-material

Obtain references to templates in component classes

<div> <input #ipt type="text"/> </div> Can the template access variable be retrieved from the component class? For example, is it possible to retrieve it as shown below: class XComponent{ somefunction(){ //Is it possible t ...

angulartypescriptangular2-template

Displaying an array in an Ionic HTML template without using the *ng

Is there a way to retrieve data from an Array in Ionic 3 without relying on ngFor? Here's an example that currently works: <ion-item-sliding *ngFor="let user of users"> <ion-item> <ion-grid> <ion-row> < ...

angularionic3ngfor

Angular - Slow rendering of views causing performance degradation

I am currently developing a cutting-edge Ionic Angular App. One of the pages in my app displays a spinner while waiting for data to be fetched from an API REST service. However, I'm facing an issue where even after the spinner disappears, it takes ar ...

cssangularperformanceionic-framework

What is the correct way to accurately determine the width of a block being displayed with the flex-direction:column property?

For instance: HTML console.log($('.container').width()); // 600px as we defined in css. console.log($('.list').width()); // 600px console.log($('.box').eq('-1').position().left + $('.box').outerWidth( ...

javascriptcssflexbox

Guide to making a dynamic clip mask with flowing trails on a digital canvas

I have successfully coded a dynamic path with trails similar to the one shown on However, when I try to replace ctx.fill() with ctx.clip(), nothing appears on the canvas. Here is the JavaScript code snippet I'm using – for the full code, visit http ...

javascripthtmlhtml5-canvas

Adjusting the size of background images using media queries to scale down accordingly with the size of the browser window while

Currently, I am working on a website project where I am using a background image with Bootstrap 4. However, I am facing an issue where the image does not center properly as it resizes at different breakpoints. I am contemplating whether to use resized im ...

csstwitter-bootstrapimagebackgroundbootstrap-4

Styling for Print Media: Adjusting the horizontal spacing between inline elements

I have been developing a custom AngularJS point-of-sale (POS) system that requires printing receipts upon completing a sale. To achieve this, I am using ng-print to print out a sales summary displayed within a specific div element after hiding all other un ...

cssangularjsprintingmedia

Arrange your HTML pages using the Bootstrap 4 Navigation Bar

Inquiry: What is the standard or best practice for organizing multiple HTML sites or files with a navigation bar that should be visible on all pages? Background: As a beginner in website creation, I am working on a project to run on an ESP using Bootstrap ...

htmlbootstrap-4navbar

The functionality to open the menu by clicking is experiencing issues

I'm attempting to replicate the Apple website layout. HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte ...

javascripthtmlcss