Lecture Six

More About CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Super Simple Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">
<style>
.columnYellow {
background-color:#ffffcc;
min-height:200px;
}
.columnGray {
background-color: #ccc;
  min-height:200px;

}

</style>
</head>
<body>

<div class="container-fluid">
  <h1>Uses Media Queries</h1>
  <p>Resize the width of the browser window to see the media query work.</p>     

<h2>This row is stacked at mobile, and goes to three columns for all of the bigger screen widths.</h2>
<div class="row">
    <div class="col-sm-4 columnYellow">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="col-sm-4 columnGray">
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
    <div class="col-sm-4 columnYellow">
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
  <h2>This row is stacked at mobile, then goes to two columns, finally to four columns on really wide screens</h2>
  <div class="row">
    <div class="col-sm-6 col-lg-3 columnYellow">
        First item
    </div>
    <div class="col-sm-6 col-lg-3 columnGray">
        Second item
    </div>
    <div class="col-sm-6 col-lg-3 columnYellow">
        Third item
    </div>   
    <div class="col-sm-6 col-lg-3 columnGray">
       Fourth item
    </div>   
</div>

</div>

</body>
</html>