Trying to figure out the best way to create a 5 column layout in Bootstrap with borders and spacing.
https://i.sstatic.net/CG5MX.jpg
A custom class has been created to accommodate the 5 column grid setup:
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
}
.col-xs-15 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
<div class="item col-md-15">
<div class="item-wrap">
.....
</div>
</div>
The goal is to have a 10px margin on the right of each column (except for the last one) and apply a 1px border to each column or item-wrap.
Despite multiple attempts, the margins are not showing up as intended.
.item {
border: 1px solid #efefef;
padding:10px;
}
.item.last {
margin-right: 0;
}
Check out the fiddle