bootstrap mobile first grid inline full screen - twitter-bootstrap-3

Question

I am trying to build a mobile first web page and so I am testing Bootstrap grid system as this seemed the easy way forward, but I am having trouble getting the grid to go full length on a mobile iphone 6s (same with all screen sizes within this range).
I have a test script with 6 columns to be displayed inline across the screen.
If I use the following col-xs the grid lines up inline but there is a large amount of white space to the right. Code and screen shot shown below.
<div class="container">
<div class="row">
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
</div>
</div>
If I change the code to col-sm I get the grid stacked up as shown below screen shot
What is the best approach to get these boxes lined up side by side across the whole screen. Should I use padding or width % CSS on each box or is there a better approach to this than Bootstrap

Answer 1

Since you are new to bootstrap i recomend you start with boostrap v4 which has solved this problem.
just take a look at https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works
here is an example. every column automatically become 33.33% of entire screen width
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Update
If you insist on using bootstrap v3, use can do something like this:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container ">
<div class="row row-eq-height">
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
<div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
</div>
</div>