How to give spacing between elements inside a row

user_10021379 0
Viewed 797

I have an angular 10 project, where I have to align 3 cards in a row, so far they align horizontally in a row, but I have to give them some spacing which did not work that much till now.

I tried to do it with offset variable of bootstrap and manually giving them margin and padding but still no luck. In mobile phone it works perfectly fine with spacing just not in desktop. Here is my code could someone look at it and point me my mistake out?

What I tried so far:

  1. setting margin and padding manually -> did not work no effect at all.
  2. using offset variable of bootstrap -> no changes.
  3. using flex parameter -> also no changes

card component.html

<section>

  <div class="row ">

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

      <mdb-card cascade="true" class="cascading-admin-card">

        <div class="admin-up">
          <mdb-icon fas icon="money-bill-alt" class="primary-color"></mdb-icon>
          <div class="data">
            <p>SALES</p>
            <h4><strong>$2000</strong></h4>
          </div>
        </div>

        <mdb-card-body [cascade]="true">
          <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>
        </mdb-card-body>

      </mdb-card>

    </div>
 
  </div>


</section>

my scss for this component:

.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);
}

And the main dashboard where I use this element:

<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 class="col mb-4">
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
      <div class="col mb-4">
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
      <div class="col mb-4">
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
    </div>


  </div>
</div>
bootstrap-4 twitter-bootstrap angular css html
2 Answers

Your question needs improvements.
As long as your question concerns a CSS or HTML issue, try to provide the compiled expected result as HTML, without your angular formatting.

I do not know how your angular component is acting. So I maybe made some errors in my interpretation below. However, I suggest you to learn how bootstrap cards are built.
Here is an example with header, body and footer within 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>

Then in your row component, you have 3 col elements, where you bind your cards. You may consider moving the mb-4 class to the row wrapper, and removing it from your cols.

Then in your card component, I think you have too much rules, and may consider clarifying it. Have a look on my interpretation below. I made the first card a little bit different than the two others to let you see how a bootstrap card could be implemented.

See your code with the built-in 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>

user_126686920

Here is the images of what I get when I give my code flex:

This is on desktop and this is mobile:mobile view

I want to achieve two things first in desktop I want the cards to start next with a bit of space to the sidebar. And be responsive

My code looks like this:

<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>
user_100213790
Related