0

I'm really confused by the columns system in Bootstrap. Here is what I have:

<div class="container-fluid">

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
  <h1 class="h3 mb-0 text-gray-800">Cards</h1>
</div>

<div class="row">

  <!-- Earnings (Monthly) Card Example -->
  <div class="col-xl-2 col-md-2 mb-2">
    <div class="card border-left-primary shadow h-100 py-2">
      <div class="card-body">
        <div class="row no-gutters align-items-center">
          <div class="col mr-2">
            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Stop</div>
            <div class="h5 mb-0 font-weight-bold text-gray-800">8</div>
          </div>
          <div class="col-auto">
            <span class="material-icons">
              pan_tool
              </span>
             
          </div>
        </div>
      </div>
    </div>
  </div>

I have 8 cards total and 2 of them fall in the second line, because of spacing. How can I achieve a professional view with my cards? I need to show 12 different status of machines we have, start, stop, and run.

Here is the link of jsFiddle: https://jsfiddle.net/rbk27ote/1/

Andrew
  • 307
  • 7
  • 13
moris62
  • 983
  • 1
  • 14
  • 41
  • Does this answer your question? [8 Columns in Twitter Bootstrap](https://stackoverflow.com/questions/20287867/8-columns-in-twitter-bootstrap) – Roberto Zvjerković Sep 18 '20 at 09:48
  • 1
    Please clarify, the title "8 items in a single row..." doesn't seem to match the code and description of the question. Where are the 12 cards in your code? – Carol Skelly Sep 18 '20 at 12:32
  • *"[...] i have 8 cards 2 of them fall in the second line "* - Look at it mathematically; each row can hold 12 columns. Since each of your Cards takes up 2 columns (`col-2`), you have a total of 16 columns. 6 cards will fit in a row (6 cards * 2 columns is 12 columns), so the remaining 4 columns (2 cards * 2 columns) are pushed to the second row. Your solution is going to have to be `col-1` instead of `col-2`, or not using a `col-*` class for each of your cards and using a different approach (flexbox for example) – Tim Lewis Sep 18 '20 at 14:31

1 Answers1

0

You just need put class 'col' for all your div element those you want to make equal.just like as below:-
<div class="col"></div>

testing hunt
  • 11
  • 1