bootstrap containers side by side code example

Example 1: row class in bootstrap

/*
In Bootstrap, the "row" class is used mainly to hold columns in it.
Bootstrap divides each row into a grid of 12 virtual columns. 
In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. 
The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.
*/

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-4"></div>
    <div class="col-md-2"></div>
</div>

Example 2: 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>

Tags:

Css Example