Bootstrap: seven equal-sized columns in two rows
Any idea on how to keep the same size for each column, but center the second row ...
(In other words, create column 1.5)
<div class="container""
<div class="row">
<div class="col-sm-3">
1
</div> <!-- close .col -->
<div class="col-sm-3">
2
</div> <!-- close .col -->
<div class="col-sm-3">
3
</div> <!-- close .col -->
<div class="col-sm-3">
4
</div> <!-- close .col -->
</div><!-- close .row-->
<div class="row">
<div class="col-sm-3 col-sm-offset-1">
5
</div> <!-- close .col -->
<div class="col-sm-3">
6
</div> <!-- close .col -->
<div class="col-sm-3">
7
</div> <!-- close .col -->
</div><!-- close .row-->
</div><!-- close container -->
+3
source to share
2 answers
Since you are essentially offsetting the 1.5, you can create your own offset class like this:
.col-sm-offset-1point5 {
margin-left: 12.5%;
}
Note that 12.5% is one eighth of the row width, which is your 1.5x column offset. Now apply it to the first column in the second row (replace col-sm-offset-1
with col-sm-offset-1point5
)
An example here: http://www.bootply.com/1rBTZPGsYu
+7
source to share
Another way:
Bootply : http://www.bootply.com/NWkWutLI8M
CSS
.centered{
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
float: none;
}
Html
<div class="container">
<div class="row">
<div class="col-sm-3">
1
</div>
<div class="col-sm-3">
2
</div>
<div class="col-sm-3">
3
</div> <!-- close .col -->
<div class="col-sm-3">
4
</div>
</div>
<div class="row">
<div class="col-xs-9 centered">
<div class="row">
<div class="col-sm-4">
5
</div>
<div class="col-sm-4">
6
</div>
<div class="col-sm-4">
7
</div>
</div>
</div>
</div>
</div>
+3
source to share