FIrst part of lecture on bootstrap material

Bootstrap so far

Go to http://getbootstrap.com and download the dist folder.

Navigate to the dist/css/bootstrap.min.css file.
Copy and paste it into your app folder under /public/stylesheets/bootstrap.min.css.

Let's create our own responsive grid example. Go to the index

.container: The container will ensure even centering across the page with even margins. It will help manage the width of the div on the page and thus help the managment of internal elements.

.row: The row defines a horizontal grid space, i.e. the 12 column grid

.col-xs-, .col-sm-, ...: the different pre-defined column spaces for each respective level of design.

public/stylesheets/style.css

.left 
{
	height: 50px;
	background-color: LightSalmon;
}

.right 
{
	height: 50px;
	background-color: green;
}

The layout

views/layout.erb

<!DOCTYPE html>

<html>
	<head>
		<!-- Include BOOTSTRAP -->
		<link rel="stylesheet" type="text/css"  href="/stylesheets/bootstrap.min.css">
		<!-- Include our styling defined above-->
		<link rel="stylesheet" type="text/css"  href="/stylesheets/style.css">
	</head>

	<body>
		<%= yield %>
	</body>

</html>

First example with xs, sm, md, and lg and the grid

views/index.erb

<!-- Container manages the width and pading-->
 <div class="container">
 	<!-- Row defines a 12 column grid -->
    <div class="row">
    
    	<!-- A div occupying 6 columns at the Large
    			screen size-->
       <div class="col-lg-6 left">
         left
      </div>
      <div class="col-lg-6 right">
         right
      </div>
    </div>
  </div>
  
  <div class="container">
    <div class="row">
      <div class="col-md-6 left">
         left
      </div>
       <div class="col-md-6 right">
         right
      </div>
    </div>
  </div>
  
  
  <div class="container">
    <div class="row">
      <div class="col-sm-6 left">
         left
      </div>
      <div class="col-sm-6 right">
         right
      </div>
    </div>
  </div>
  
  
  <div class="container">
    <div class="row">
      <div class="col-xs-6 left">
         left
      </div>
      <div class="col-xs-6 right">
         right
      </div>
    </div>
  </div>

the mix and match example

<!-- INDEX.erb -->

<div class="container">
	<div class="row">
		<div class="col-lg-6  left">
			Left 
		</div>
		<div class="col-lg-6 right">
			Right
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-md-6  left">
			Left 
		</div>
		<div class="col-md-6 right">
			Right
		</div>
	</div>
</div>


<div class="container">
	<div class="row">
		<div class="col-sm-6  left">
			Left 
		</div>
		<div class="col-sm-6 right">
			Right
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-xs-6 col-sm-3 col-md-9 left">
			Left 
		</div>
		<div class="col-xs-6 col-sm-9 col-md-3 right">
			Right
		</div>
	</div>
</div>

OfTheDelmer/boostrap_so_far.md

Bootstrap so far