Columns in bootstrap don't fit even though of columns is 12

Question

I am building a small dashboard, with bootstrap 4. The structure is two columns (5 - 7), inside of which we have different rows and columns.

I have two rows that won't fit the columns inside of them even though the sum is 12.

I tried to wrap all columns inside a row div but it didn't change anything. I tried removing every padding through the developper console and I still get the same issue.

<div class="col-12 leg_planches">
   <div class="col-2"> 
      <h5 data-toggle="tooltip" data-placement="top" title="Référence" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A1</span></h5>
      <h5 title="Zone géographique"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span></span></h5>
   </div>
   <div class="col-2"> 
      <h5 data-toggle="tooltip" data-placement="top" title="Irrigation" > <i class="fa fa-tint" aria-hidden="true"></i> <span></span></h5>
      <h5 title="Amendements"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span></span></h5>
   </div>
   <div class="col-2">
      <h5 title="Entretient"> <i class="fa fa-broom" aria-hidden="true" ></i> <span></span></h5> 
      <h5 title="Amendements"> <i class="fa fa-gem" aria-hidden="true" ></i> <span></span></h5>
   </div>
   <div class="col-2">
      <h5 title="Estimation poids sur planche"> <i class="fa fa-hand-holding-usd" aria-hidden="true" ></i> <span></span></h5>
      <h5 title="Exporté"> <i class="fa fa-fighter-jet" aria-hidden="true" ></i> <span></span></h5>
   </div>
   <div class="col-2">
      <h5 title="Dépenses"> <i class="fa fa-credit-card" aria-hidden="true" ></i> <span></span></h5>
      <h5 title="Temps de travail"> <i class="fa fa-clock" aria-hidden="true" ></i> <span></span></h5>
   </div>
   <div class="col-2">
      <h5 title="Semé le"> <i class="fa fa-baby" aria-hidden="true" ></i> <span></span></h5>
      <h5 title="Planté le"> <i class="fa fa-baby-carriage" aria-hidden="true" ></i> <span></span></h5>
   </div>
</div>

I'd like for all the columns to fit on a single row as they are supposed to.

don't nest columns like that. You need a `.row`, you are doubling the column padding which is why they don't fit. Read the [docs here](https://getbootstrap.com/docs/4.3/layout/grid/#how-it-works) — zgood, Mar 28 '19 at 16:49

score 2 · Answer 1 · answered Mar 28 '19 at 16:48

2

Instead of col-12, try with row. Like this <div class="row leg_planches">

answered Mar 28 '19 at 16:48

J-S

85
1
10

score 1 · Answer 2 · answered Mar 28 '19 at 16:50

Just replace col-12 with row will resolve your issue. Thanks

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row leg_planches">
   <div class="col-2"> 
      <h5 data-toggle="tooltip" data-placement="top" title="Référence" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A1</span></h5>
      <h5 title="Zone géographique"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span>B1</span></h5>
   </div>
   <div class="col-2"> 
      <h5 data-toggle="tooltip" data-placement="top" title="Irrigation" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A2</span></h5>
      <h5 title="Amendements"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span>B2</span></h5>
   </div>
   <div class="col-2">
      <h5 title="Entretient"> <i class="fa fa-broom" aria-hidden="true" ></i> <span>A3</span></h5> 
      <h5 title="Amendements"> <i class="fa fa-gem" aria-hidden="true" ></i> <span>B3</span></h5>
   </div>
   <div class="col-2">
      <h5 title="Estimation poids sur planche"> <i class="fa fa-hand-holding-usd" aria-hidden="true" ></i> <span>A4</span></h5>
      <h5 title="Exporté"> <i class="fa fa-fighter-jet" aria-hidden="true" ></i> <span>B4</span></h5>
   </div>
   <div class="col-2">
      <h5 title="Dépenses"> <i class="fa fa-credit-card" aria-hidden="true" ></i> <span>A5</span></h5>
      <h5 title="Temps de travail"> <i class="fa fa-clock" aria-hidden="true" ></i> <span>B5</span></h5>
   </div>
   <div class="col-2">
      <h5 title="Semé le"> <i class="fa fa-baby" aria-hidden="true" ></i> <span>A6</span></h5>
      <h5 title="Planté le"> <i class="fa fa-baby-carriage" aria-hidden="true" ></i> <span>B6</span></h5>
   </div>
</div>

Columns in bootstrap don't fit even though of columns is 12

2 Answers2