Jess McKenzie Jess McKenzie - 7 months ago 23
HTML Question

Bootstrap: splitting a box in to 3's

Currently I have a block of HTML thats like this:

<div class="info-box-content">
<span class="info-box-text">CPU Traffic</span>
<span class="info-box-number">{!! $cpuUseage !!}<small>%</small></span>
</div>


The above box currently displays like this - as seen here:

enter image description here

How could I split the box into 3 seperate boxes so I can display some more knowledgeable stats within the one box?

GG. GG.
Answer

Use Bootstrap grid system.

<div class="info-box-content row">
  <div class="col-md-4">
     <span class="info-box-text">CPU Traffic</span>
     <span class="info-box-number">10<small>%</small></span>
  </div>
  <div class="col-md-4">
     <span class="info-box-text">RAM Traffic</span>
     <span class="info-box-number">50<small>%</small></span>
  </div>
  <div class="col-md-4">
     <span class="info-box-text">HDD Traffic</span>
     <span class="info-box-number">90<small>%</small></span>
  </div>
</div>
Comments