How to align elements equally in a line in CSS/Bootstrap?

Question

The current codes can be found here:

http://www.bootply.com/11CfWtCAbX#

And What I want looks like this:

The main problem is I don't know how to align the circles equally to fill the row.. Though Bootstrap has a Grid System, it only accept integer such as col-lg-2 but not col-lg-1.5 . In my case, there are 8 circles, so I have no idea how to align them easily.

Does anyone have ideas about this?

Answer 1

You can define your own cols. See: http://www.bootply.com/AnCCbwcwEA

<div class="row">
   <div class="myCol">
      <div class="circle"></div>
   </div>
   <!-- Seven more circles here -->
</div>

CSS: .myCol has a width of 12.5% , because 100/8 = 12.5%. .circle has margin: 0 auto for centering the circle within .myCol

.circle {
  background: #A9A9A9;
    height:30px;
    width: 30px;
    border-radius:50%;
    margin: 0 auto;
  }
.myCol
{
  width: 12.5%;
  position: relative;
  float: left;

}

Answer 2

This may solve your issue. You can use an offset of col-lg-offset-2 in the beginning. Tus if there are 8 circles and the div is divided into 12 parts. The first two parts will be empty and the next 8 will have circles and the last two will empty.

This is the simplest way to do it.

Answer 3

You can use inline-block elements and justified text as suggested here to achieve that

HTML

<div class＝"container">
<h1>Test</h1>
<div class="row">
    <div class="col-lg-4 col-lg-offset-4" id="box">
      <div class="text-center">Data Quality</div>
      <div class="row inline-row">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>

  </div>
</div>

CSS

.circle {
    background: #A9A9A9;
    height:30px;
    width: 30px;
    border-radius:50%
}

.inline-row {
     text-align: justify;
}

.inline-row div {
    display: inline-block; 
}

.inline-row:after {
      width: 100%;
      content: " ";
      display: inline-block;
 }

bootply: http://www.bootply.com/MtJN37CkS5