Bootstrap Tutorial v3 (Part 2)

Note: the following instructions are for Bootstrap Version 3.

Make a Responsive Website (quick + easy)

Download the images for this demonstration: http://www.everythingaboutweb.com/classes/downloads/bootstrap3_bigg_images.zip

1. The Bootstrap Grid

Bootstrap’s Grid is a 12 column Grid System

http://getbootstrap.com/css/#grid

Grid Options

Behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Width None (auto) 750px 970px 1170px
Class .col-xs- .col-sm- .col-md- .col-lg-

“The xs classes target mobile devices, sm targets tablets, md targets laptops and smaller desktop screens, and lg targets large desktop screens.

The best way to think about the new grid classes is that they work from mobile up, rather than from desktop down. This means by default your grid will stack from mobile up until the grid class breakpoint you’ve used is reached.

For example, using .col-lg means your grid will stay stacked on mobile, tablet, and small desktop screens. Only until the large desktop breakpoint is reached will the grid go horizontal.”  More info here: http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

 2. Create a page

bigg_grid_12_col
Add div for wrapper called container.

<div class="container">
</div>

3. Inside of container div, add the first row for the logo and navigation.

<div class="row">
 
 <div class="col-sm-1"></div> 
 <!-- logo-->
 
 <div class="col-sm-4"></div> 
 <!-- nav-->
 
 <div class="col-sm-7"></div> 
 <!-- right nav-->
 
</div> <!-- end row-->

4. Add second row

<div class="row">
 
 <div class="col-sm-7"></div>
 <div class="col-sm-5"></div>
 
</div> <!-- end row 2-->

 5. Add third row

<div class="row">
 
 <div class="col-sm-4"></div>
 <div class="col-sm-4"></div>
 <div class="col-sm-4"></div>
 
</div> <!-- end row 3-->

6. Add navigation, images and text. Add the class to make the images responsive.

http://getbootstrap.com/components/#nav
http://getbootstrap.com/css/#images

<div class="container">
 
 <div class="row header">
 
 <div class="col-sm-1"> <img src="images/logo.gif" alt=""/></div> 
 <!-- logo-->
 
 <div class="col-sm-4">
 
 <ul class="nav nav-pills">
 <li><a href="#">Featured Posts</a></li>
 <li><a href="#">Popular & Upcoming </a></li>
 </ul>
 
 </div> <!-- nav-->
 
 
 <div class="col-sm-7">
 
 <ul class="nav nav-pills">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Sample Page</a></li>
 </ul>
 
 </div> <!-- right nav-->
 
 </div> <!-- end row-->
 

 <div class="row">
 
 <div class="col-sm-7"><img src="images/hero.png" class="img-responsive" alt=""/></div>
 
 <div class="col-sm-5">
 <h1>Welcome to Bigg</h1>
 <p>This is the introduction text.</p>
 </div>
 
 </div> <!-- end row 2-->
 
 
 <div class="row">
 
 <div class="col-sm-4"><img src="images/beach-1.png" class="img-responsive" alt=""/>
 <h4>Heading 4</h4></div>
 
 <div class="col-sm-4"><img src="images/flowers-2.png" class="img-responsive" alt=""/>
 <h4>Heading 4</h4></div>
 
 <div class="col-sm-4"><img src="images/car-3.png" class="img-responsive" alt=""/>
 <h4>Heading 4</h4></div>
 
 </div> <!-- end row 3-->
 
 </div>

7. Add CSS

.container {
	width: 90%;
	}
	
.header{
	border-bottom: 1px solid #999999;	
	}

View the page here:

http://www.everythingaboutweb.com/classes/examples/bootstrap3_bigg/

Leave a Reply

Your email address will not be published. Required fields are marked *