Bootstrap Introduction Video Tutorial


The YouTube video tutorial called Bootstrap Tutorial by Derek Banas is very good. There is some of the code he wrote shown below. This code covers only the beginning of the video. The code however can be used as a base for your website. Here is is just setting us up to get started with a few button examples. Also, have a look at Part Two of this series of posts.

<!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 zoom 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">
 
<style>
.jumbotron{
    background-color:#2E2D88;
    color:white;
}
/* Adds borders for tabs */
.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}
.nav-tabs {
    margin-bottom: 0;
}
</style>
</head>

<body>

<div class="container">

<div class="page-header">
<h2>Bootstrap Tutorial by Derek Banas</h2>
</div>

<div class="jumbotron">

<p>This code is from a YouTube video called Bootstrap Tutorial. It is by Mr. Derek Banas.
</p>
<!-- BUTTONS -->
<a href="#" class = "btn btn-default btn-lg" role="button">More info</a>
<button type="submit" class = "btn btn-danger" role = "button">Button</button>
<input type="button" value="Info" class = "btn btn-info">
<button type="submit" class = "btn-primary btn-sm">Primary</button>
<button type="submit" class = "btn btn-success btn-xs">Success</button>
<button type="submit" class = "btn btn-warning btn-lg">Warning</button>
<button type="submit" class = "btn btn-link btn-lg">Link</button>

</div>
</div>

<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>

Here is what the result looks like, after the browser has been resized somewhat, along with the times of each of the topics discussed in the video.

bootstraptutorial
00:53 Setup
02:59 Container
03:37 Page Header
04:09 Jumbotron
05:31 Button Styling
09:40 Grid Layouts / Responsive Layouts
17:02 Responsively Hiding Elements
18:54 Offset
20:04 Table Styling
21:17 CSS Styling with Bootstrap
24:34 Carousel / Slide Shows
28:32 Icons
31:33 Well
32:16 Image Styling
33:27 Contextual Colors
34:28 Dropdown Menus
38:07 Input Groups
42:51 Horizontal Menus
44:56 Vertical Menus
47:00 Tabbed Panels
51:05 Responsive Navigation Bar
54:38 Pagination
56:16 Responsive Blog Layout
58:02 Progress Bars
59:30 Responsive Blog Layout 2
1:01:30 List Groups

Leave a comment

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