0

I want to create a row which has 5 responsive columns which have equal padding from top to bottom and from the sides, but can't find the best solution how to achieve it with bootstrap.

Current html:

  <div class="row five-col-row">
    <div class="col col-md-2 mx-2">
      <h6>Sources</h6>
      <span>{{ allStats.sources }}</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Installs</h6>
      <span>{{ allStats.installs }}</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Conversions</h6>
      <span>{{ allStats.conversions }}</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Amount</h6>
      <span>{{ allStats.conversion_amount }}$</span>
    </div>
    <div class="col col-md-2 mx-2">
      <h6>Churn rate</h6>
      <span>{{ allStats.churn_rate }}%</span>
    </div>
  </div>

Is there a way to create a responsive five column grid with Bootstrap?

The result I want to achieve is:

enter image description here

Any help will be appreciated.

ViktorasssIT
  • 377
  • 7
  • 23
  • `col-md-2` with 5 columns will give extra spacing for 2 col at the end. Is there an reason for not using `col` for every break points? – kiranvj Aug 06 '20 at 07:26
  • I don't need extra space at the end. Want to achieve the result which is provided in the image. – ViktorasssIT Aug 06 '20 at 07:29

1 Answers1

0

Do not use margin-x on .col-* elements.

  1. Set your custom padding-x on .col-*

  2. Set padding-y on row. It should be two times padding-x of .col-*. For instance, if you set a 10px padding-x on columns, the padding-y of row should be 20px becuase there is 20px space between the columns.

  3. Wrap the content of the .col-* elements in a div and apply all the style to this element instead of the column.

div.col div {
  border: 1px solid #000; 
  height: 200px;  
}

.py-1rem {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row py-1rem">
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
    <div class="col col-md-2 px-2">
      <div></div>
    </div>
  </div>
</div>
mahan
  • 12,366
  • 5
  • 48
  • 83
  • Thank you for your time and effort, but you're provided solution is not what am I looking for. Have you looked at the image i provided for the result i want to achieve? With your solution is all kinds of problems. – ViktorasssIT Aug 06 '20 at 07:56
  • @ViktorasssIT I have done so. Could you explain what the problem is? – mahan Aug 06 '20 at 08:14