Bootstrap Introduction Video Tutorial Part Two


For part two of this post series we are going to show some boilerplate code and layout code. In the first part we showed the code for some buttons. Now we will discuss some code for layouts.

Below is the boilerplate code that Derek uses in the YouTube video Bootstrap Tutorial. Boilerplate code or boilerplate refers to sections of code that have to be included in many places with little or no alteration.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- If IE use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Set the page to the width of the device and set the zoon level -->
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Bootstrap Tutorial</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap uses a grid system that creates a responsive site that scales as the view size changes. Bootstrap uses a 12 point system. We need to section them off into versions of 12. We work with different size screens as follows:

  • Large screens 1200 pixels wide and above
  • Medium 992 pixels to 1200 pixels wide
  • Small screens992 to 768
  • Extra small screens (mobile devices) less than 768 pixels wide

Here is some code below that you will be putting inside the code shown above, just after the body tag and before the two script tags. Notice that we are using the same set of sizes for each of the div sections: 3, 3, 6 and 12.

<div class="container">
<div class="row">

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu varius sapien, sed laoreet arcu. Donec in lacus eget sem placerat rutrum. Nullam id lectus mauris. Nulla lobortis, leo et sollicitudin congue, neque nunc scelerisque sapien, non convallis nulla lorem sed odio. Etiam sed purus massa. Quisque auctor ipsum leo, et posuere ante euismod et. Nulla ornare pulvinar consectetur.
</p>
</div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu varius sapien, sed laoreet arcu. Donec in lacus eget sem placerat rutrum. Nullam id lectus mauris. Nulla lobortis, leo et sollicitudin congue, neque nunc scelerisque sapien, non convallis nulla lorem sed odio. Etiam sed purus massa. 
</p>
</div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu varius sapien, sed laoreet arcu. Donec in lacus eget sem placerat rutrum. Nullam id lectus mauris. Nulla lobortis, leo et sollicitudin congue, neque nunc scelerisque sapien, non convallis nulla lorem sed odio. Etiam sed purus massa. Quisque auctor ipsum leo, et posuere ante euismod et. Nulla ornare pulvinar consectetur.
</p>
</div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h3>Column 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu varius sapien, sed laoreet arcu. Donec in lacus eget sem placerat rutrum. Nullam id lectus mauris. Nulla lobortis, leo et sollicitudin congue, neque nunc scelerisque sapien, non convallis nulla lorem sed odio. Etiam sed purus massa. Quisque auctor ipsum leo, et posuere ante euismod et. Nulla ornare pulvinar consectetur.
</p>
</div>

</div>
</div>

Clearfix

Notice that the columns mis-align. This is because there is less text in column 2. To fix this we need to simple insert another div into our page that is right before the column that mis-aligns. In our case, insert the following div. We have alignment problems only in the small setting. Therefore, use visible-sm.

<div class="clearfix visible-sm"></div>

At this point, I will not finish with his discussion on layouts. Please have a look at the video for the continuation of this topic.

Leave a comment

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