Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Introduction to Bootstrap 3 to your Wishlist.

Add to Wishlist

Introduction to Bootstrap 3

An introduction to the basic features of Twitter Bootstrap 3 including the grid system, responsive utilities and mixins.
3.7 (78 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
5,794 students enrolled
Created by Amin Meyghani
Last updated 5/2016
$10 $20 50% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

This course is an introduction to Bootstrap 3 new features and how it is different from the Bootstrap 2. The videos covering components are short and to the topic including examples and sample code. All the sample projects are hosted on github and available to you any time. I hope that you can enjoy the great features that Bootstrap 3 has to offer just like I did when I started working with this amazing framework almost a year ago.

Who is the target audience?
  • Beginner or Intermediate web developers and web designers
Students Who Viewed This Course Also Viewed
What Will I Learn?
Become familiar with the basic features of Bootstrap 3
Get to know the different components of version 3
Explore some of the differences between V2.x and V3.x
Harness the power of Bootstrap using LESS source files
See how you can use Bootstrap with Rails 4
Learn how to define a simple color scheme using the 1pxdeep tool
View Curriculum
  • Basic understanding of css, html and javascript
Curriculum For This Course
Expand All 29 Lectures Collapse All 29 Lectures 02:34:26
Setting up the tools
5 Lectures 15:22

This video introduces the tools that I will be using throughout the course. I am using MAMP for my local server, you can use XAMP if you are windows. I am also using Sublime Text 2 as my text editor, obviously you can use any other editor that you are comfortable with. I have also have Node installed to be able to use some of the nice available utilities for my development workflow like Grunt and Yeoman.

Preview 01:39

Installing local server: MAC

Installing local server: Windows

This video explains installing the Emmet plugin for writing html/css faster on Sublime Text 2.

The Emmet Plugin

This video shows you how you can combine sublime snippets with emmet to create flexible snippets. At the end of the video we will go though installing the bootstrap 3 snippets.

Sublime Snippet and Emmet
Installing Bootstrap
2 Lectures 09:46

This video explains how to install bootstrap quickly. It also shows a quick demo of the grid system as a way to test if the framework is installed successfully.

Downloading Bootstrap

The Less Folder
CSS - Responsive Grid
8 Lectures 01:15:43

Updated: Nov 28, 2013: Takes the extra installation process out
This video demonstrates the very basics of the grid system in Bootstrap 3. This is a very short introduction so that you can get a feel of the grid system before getting too deep into the details.

Preview 03:18

Updated Nov 28, 2013: Takes the extra unnecessary stuff out
This video demonstrates how you can nest grids inside each other.

Nested Grids - Updated

Reordering Columns in a Grid

Updated Nov 28, 2013: Takes the unnecessary stuff out
This video demonstrates how you can use mixins to achieve semantic html markup. This example is about using mixins while working with the grid system.

Update Dec 10, 2013: Adds the project files

Semantic Layout Markup with Mixins - updated

In this video I will go over the different bootstrap variables available for writing media queries to target different window sizes for responsive designs. I will go through the three possible options for using the media queries: specific range queries, min-width queries and max-width queries. You can use each of these options separately or combined with each other to make more responsive designs. Below are the list of the sites that were used in the video:

Bootstrap Docs:

Resizer Bookmarklet

Media Queries

This video demonstrates how you can use the responsive utilities to hide or show elements for different size screens.

Update Dec 10, 2013: Adds the project files

The Responsive Utilities

This video demonstrates how you can convert a wireframe layout to html. In the next videos we will convert this layout to an actual fake company website.

Preview 05:41

This is a longer video that shows you a practical way of using the Chrome Dev tools to develop. In addition to that, you will learn how to use grids and icons in action. Even though there are no actual psds involved, the process of translating a psd to html/css is similar. The key is translating the layout into grids and knowing the fundamentals of CSS and using Dev Tools. At least that's what I think if you wanna set up something quickly which Bootstrap is made for.

I hope you will find the video helpful. Please leave comments or send me feedback. I do appreciate them and take them into consideration very seriously.


PSD to HTML Part 2
The Components
3 Lectures 16:33

Updated Nov.28, 2013. Took out extra duplicated stuff.
This video demonstrates how you can use icons for your components using font / glyph icons.

Update Dec 10, 2013: Adds the project files

Glyphicons - updated

This video demonstrates how you can use Bootstrap buttons.

Update Dec 10, 2013: Adds the project files.


In this video we are going to be looking at media objects and media lists and how to use them to float media contents next to other contents.

Media Objects and Media Lists
The jQuery Plugins
2 Lectures 10:22
The Tooltip

The Dropdown
Compiling LESS
5 Lectures 11:45

This video will show you how to compile LESS with the fee gui application called Koala (

Compiling LESS with Koala

Installing Node

This video will show you how to install Node on Linux.

Installing Node on Linux (Ubuntu 12.04)

This video will show you to compile less using the command line less compiler.

Compiling LESS with lessc

This video will show you how to use Grunt to compile LESS as you work on your project.

Compiling LESS real-time with Grunt
Bonus Materials
3 Lectures 13:14

learn how to use 1pxdeep to create custom color schemes for your Bootstrap 3 components. Using 1pxdeep you can create monochromatic, complimentary color schemes and more

Custom Color Scheme

This video demonstrates how you can use Twitter Bootstrap 3 with Rails 4. The video starts with updating Rails 3 to Rails 4 and then download Bootstrap 3 SASS project and then linking Bootstrap to a new Rails 4 project.

Preview 05:39

Get My 2 Other Courses At A Steep Discount
1 Lecture 01:45
What next...
About the Instructor
3.4 Average rating
164 Reviews
8,826 Students
3 Courses
JavaScript Engineer

My name is Amin and I'm a JavaScript Engineer. I have worked on a variety of projects ranging from implementing user interfaces, to making productivity tools for engineers and designers. I am also very passionate about education and enjoy sharing what I learn with the world.

I am also the co-author of the Less Web Development Cookbook published by Packt Publishing. The book is about working with LESS on the client to make apps more maintainable.

I have been a self-taught learner as long as I can remember and I really enjoy sharing my findings and learnings with the world through any medium that I can. If you have any questions regarding any of my courses, you can reach me at

Report Abuse