bootstrap reduce grid column width code example

Example 1: bootstrap fixed column width grid

<nav>...</nav>
<div class="container-fluid">
<div class="row">
  <!-- Use div instead of a column for sidebar -->
<div class="sidebar">
<ul class="nav nav-sidebar">
    <li class="active"><a href="#">Overview</a></li>
    <li><a href="#">Reports</a></li>
    <li><a href="#">Analytics</a></li>
    <li><a href="#">Export</a></li>
</ul>
</div>
<div class="col-sm-12 main">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
</div>

Example 2: bootstrap change column width

.col-sm-3half, .col-sm-8half {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-3half, .col-sm-8half {
        float: left;
    }
    .col-sm-3half {
        width: 29.16666667%;
    }
    .col-sm-8half {
        width: 70.83333333%;
    }
}

Tags:

Css Example