student student - 5 months ago 13
CSS Question

Expanding more cols to fit width of less cols in Bootstrap

In the output of this fiddle:



.row div {
border: 1px solid;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-3">
<h1>col-sm-3</h1>
</div>
<div class="col-sm-3">
<h1>col-sm-3</h1>
</div>
<div class="col-sm-3">
<h1>col-sm-3</h1>
</div>
<div class="col-sm-3">
<h1>col-sm-3</h1>
</div>
</div>

<div class="row">
<div class="col-sm-2">
<h1>col-sm-2</h1>
</div>
<div class="col-sm-2">
<h1>col-sm-2</h1>
</div>
<div class="col-sm-2">
<h1>col-sm-2</h1>
</div>
<div class="col-sm-2">
<h1>col-sm-2</h1>
</div>
<div class="col-sm-2">
<h1>col-sm-2</h1>
</div>
</div>





I'm using Bootstrap and for some reason, I needed to expand 5
.col-sm-2
columns to fit width of 4
.col-sm-3
columns
.

I know that each
.row
can accommodate maximum 12
.cols-sm-*
(i.e the sum of * is 12).




What is the most safest way to achieve this without horizontal scroll?

Answer

overwrite style as below by adding a class to it so that it doesn't overwrite the general behavior at other palces

.col-sm-2 {
width: 20%;
}