Learning Bootstrap 3

Video description

Learning Bootstrap 3

Video description

In this Bootstrap 3 training course, expert author Mark Shufflebottom shows you how to use this front end framework to design a website. Bootstrap is easy to use and allows a designer to specify exactly how the site will look and behave on a number of different displays, including mobile, desktop, and tablet. To get the most out of this tutorial you should already have a fundamental understanding of HTML, CSS, and JavaScript.
You will start the course by learning about the grid system, including how to use containers, nested columns, and column offsets. You will move into learning about the site structure, following along with Mark as he teaches you how to build a NavBar, build the intro section, info panel, and more. This video tutorial will also teach you how to set up the home page, blog page, client page, and contact page. Finally, Mark will show you how to customize the Bootstrap download and customize colours.
Once you have completed this computer based training course, you will have a solid understanding of how to design a website with Bootstrap 3, and be able to apply this knowledge to your own web development projects. Working files are included, allowing you to follow along with the author throughout the lessons.

Publisher resources

Download Example Code

Introduction

Introduction To Bootstrap 00:01:58

What To Expect 00:01:14

The Site Build Plan 00:02:29

Setting Up Bootstrap

Examining The Framework Files 00:05:58

Documentation Overview 00:02:48

The Grid System

Using Containers 00:03:36

Coding Rows And Columns In HTML 00:01:20

The Grid 00:02:53

Controlling The Grid Across Devices 00:06:29

Column Offsets 00:03:14

Using Nested Columns 00:04:04

Column Ordering 00:02:27

Responsive Helpers

Responsive Images 00:02:42

Responsive Utility Classes 00:02:58

Media Queries and Breakpoints 00:02:00

Site Structure

Building A NavBar 00:08:19

Fixing The NavBar To The Top Of The Browser 00:02:34

NavBar Dropdowns 00:03:13

Building the Intro Section 00:07:13

Building The Marketing Panel 00:04:39

Button Options 00:02:57

Building The Info Panel 00:03:30

Block Quote 00:02:03

Togglable Tabs 00:06:05

Glyphicons 00:02:05

Building The Footer 00:03:26

Using Custom Typography 00:02:42

The Home Page

Image Carousel 00:06:58

Carousel Navigation 00:04:23

Four Column Grid 00:05:48

The Blog Page

Setting up the grid structure 00:02:42

Adding the blog entries 00:04:54

Pagination Component 00:01:52

Search Box Inline Form 00:03:15

Using List Groups 00:02:31

Media Component 00:02:56

The Clients Page

Setting The Grid - Chapter 8 00:01:58

Thumbnails 00:03:05

Tooltips 00:01:42

Collapse Panels 00:03:52

The Contact Page

Setting The Grid - Chapter 9 00:02:08

Adding a Google Map 00:01:55

Horizontal Forms 00:04:28

Modals 00:03:12

Building The Sidebar 00:02:34

Customizing Bootstrap

Customizing The Download 00:03:01

Customizing Colours 00:02:58

Starter Templates 00:02:04

About The Author

About The Author 00:00:57

Start your Free Trial

Self paced

Go to the Course
We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.