Bootstrap span elements in row full width

Question

I want items inside row to take full width and to be evenly distributed. First item should at be at leftmost and right item should be at rightmost. Elements in the middle should be evenly apart from each other. I want them to be aligned with labels on x axis (see image below). There can be n labels (and therefore n items inside row) so solution must be flexible. I am using Bootstrap v3.3.7 .

Here is the HTML code:

 .wrapper { position: relative; } .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .loading { align-self: center; } 

 <div class="container"> <div class="wrapper hidden"> <canvas id="testsRegression"></canvas> <div class="overlay"> <p>Loading...</p> </div> <div class="row"> <a href="#">87664</a> <a href="#">87735</a> <a href="#">87816</a> <a href="#">87947</a> <a href="#">88038</a> </div> </div> </div> 

Answer 1

used flex-box to achieve it.

 .wrapper { position: relative; } .overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .loading { align-self: center; } .row{ display: flex; justify-content: space-between; } body{ margin: 0} 

 <div class="container"> <div class="wrapper hidden"> <canvas id="testsRegression"></canvas> <div class="overlay"> <p>Loading...</p> </div> <div class="row"> <a href="#">87664</a> <a href="#">87735</a> <a href="#">87816</a> <a href="#">87947</a> <a href="#">88038</a> </div> </div> </div>