DLMousey/Basic Bootstrap Index.html

## Basic Bootstrap Index.html
<!DOCTYPE html>
<head>
<!-- Grab the Bootstrap CSS Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Grab the Bootstrap Javascript Library (not actually required here) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<!-- End the clever bit -->

<!-- Start the strong bit -->
<body>
  <!-- Define one big container div that holds everything on the page -->
  <div class='container'>

  <!-- Define the header of the page-->
  <header>
    <!-- Define a big ol' jumbotron, because they're awesome -->
    <div class='jumbotron'>
      <!-- Big H1 heading -->
      <h1>Holy Crap</h1>
      <!-- Paragraph -->
      <p>It's a jumbotron</p>
    </div>
  </header>


  <!-- Bootstrap uses a 12 column layout, splitting the page up into 12 equal columns, we make sections of the page accomodate these columns like this;

  <div class='col-sm-12 col-md-12'>
  </div>

  Let's take a look at the actual class name here;
  col = tells bootstrap we want to occupy a column
  sm = tells bootstrap this is the width for people on mobile
  12 = tells bootstrap we want to make something 12 columns wide

  col-md-12 = tells bootstrap we want something 12 columns wide for people using tablets and above

-->

<!-- 12 wide column for mobile and tablet + -->
<div class='col-sm-12 col-md-12'>

  <!-- YOU CRAZY BRO!! Another div, inside a div, WITH A COL CLASS?!?
  Fuck yeah! This allows us to "nest" columns, in this instance, our col-sm-10/col-md-10
  will take up 10 column's worth of space, from the col-sm-12/col-md-12 it's sitting inside of. -->

  <!-- 10 wide column for mobile and tablet + -->
  <div class='col-sm-10 col-md-10' id='content_panel'>
    <!-- Paragraph -->
    <p>This is where we'd stick our page content</p>
  </div>

  <!-- 2 wide column for mobile and tablet + -->
  <div class='col-sm-2 col-md-2' id='sidebar'>
    <p>Woah, a sidebar!</p>
  </div>

</div>
<!-- End of our 12 wide column -->

</div>
<!-- End of our container -->
	<!DOCTYPE html>
	<head>
	<!-- Grab the Bootstrap CSS Library -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<!-- Grab the Bootstrap Javascript Library (not actually required here) -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	</head>
	<!-- End the clever bit -->

	<!-- Start the strong bit -->
	<body>
	<!-- Define one big container div that holds everything on the page -->
	<div class='container'>

	<!-- Define the header of the page-->
	<header>
	<!-- Define a big ol' jumbotron, because they're awesome -->
	<div class='jumbotron'>
	<!-- Big H1 heading -->
	<h1>Holy Crap</h1>
	<!-- Paragraph -->
	<p>It's a jumbotron</p>
	</div>
	</header>


	<!-- Bootstrap uses a 12 column layout, splitting the page up into 12 equal columns, we make sections of the page accomodate these columns like this;

	<div class='col-sm-12 col-md-12'>
	</div>

	Let's take a look at the actual class name here;
	col = tells bootstrap we want to occupy a column
	sm = tells bootstrap this is the width for people on mobile
	12 = tells bootstrap we want to make something 12 columns wide

	col-md-12 = tells bootstrap we want something 12 columns wide for people using tablets and above

	-->

	<!-- 12 wide column for mobile and tablet + -->
	<div class='col-sm-12 col-md-12'>

	<!-- YOU CRAZY BRO!! Another div, inside a div, WITH A COL CLASS?!?
	Fuck yeah! This allows us to "nest" columns, in this instance, our col-sm-10/col-md-10
	will take up 10 column's worth of space, from the col-sm-12/col-md-12 it's sitting inside of. -->

	<!-- 10 wide column for mobile and tablet + -->
	<div class='col-sm-10 col-md-10' id='content_panel'>
	<!-- Paragraph -->
	<p>This is where we'd stick our page content</p>
	</div>

	<!-- 2 wide column for mobile and tablet + -->
	<div class='col-sm-2 col-md-2' id='sidebar'>
	<p>Woah, a sidebar!</p>
	</div>

	</div>
	<!-- End of our 12 wide column -->

	</div>
	<!-- End of our container -->