The Joy of Bootstrap-- Build awesome web pages the easy way

Learn to code awesome, responsive, mobile-friendly web pages, even if you've never programmed with Bootstrap before.
3.9 (14 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.
• 2,614 students enrolled
Instructed by Alan Forbes IT & Software / Other
Take This Course
  • Lectures 24
  • Length 1.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2014 English

Course Description

Learn to build awesome browser applications that automatically adjust to mobile devices, even if you've never heard of Bootstrap before

Do you want to build browser applications that make people say "wow!" when they see it? Of course you do! I do too. How about apps that look great on a mobile device and size automatically for different screens? Yep, I want that too. :)

Based on the (included) Amazon Best-Seller 'The Joy of Bootstrap' this course steps you from knowing nothing about Bootstrap to understanding its full potential. The course includes the full text of the book plus each chapter gets its own presentation and sample code.

The goal of this course is to launch you into the subject as quickly as possible and to empower you with the basics right away.

Experiment with the code on the Companion Web Site

The course comes has tons of Bootstrap example source code which you can tweak and play with. It's all available at the companion website where you can even edit the code without downloading it. (Go ahead, try it now!) The course will walk you through all the hard code and explain how it works.

Even better, Udemy offers a 30 day guarantee, so you have nothing to lose by signing up right now.

This is the Bootstrap course for you....

The modules are grouped into easy, logical concepts that work together but still stand on their own. Presenting the book as a Udemy course makes Bootstrap even easier to understand and faster to learn. Every lecture was obsessively edited for clarity.

I write in a fun, conversational style that makes technical topics approachable for beginners. When it makes sense I build on early concepts to take you into progressively more advanced (cool) topics and exercises.

We'll also continue to use the successful metaphor of "Sam's Used Cars", a fictional web site that gives you a context in which to learn along. You'll take a plain and boring HTML website and bring it to life with Bootstrap.

Wondering what Bootstrap is?

Bootstrap is a framework that makes front-end web development faster and easier. A couple of guys at Twitter invented it and later made it open source. Other people have joined in and it is now in it's third major release. Bootstrap 3 is good for people of all skill levels, devices of all shapes, and projects of all sizes.

What are the requirements?

  • You must know basic HTML before starting this course or you'll be frustrated

What am I going to get from this course?

  • Code awesome web pages with ease, using Bootstrap
  • Build 'responsive' web pages that automatically resize for the device they are displayed on
  • Impress your friends and colleagues with great looking web pages that sizzle
  • Enable your web pages to look great even on mobile devices

Who is the target audience?

  • This is a beginner's course. If you already know some Bootstrap this course isn't for you.
  • If you are already making web pages and are ready to go to the next level this course is for you.
  • If you don't yet understand basic HTML, you should not take this course
  • If you don't know any Bootstrap, you should take this course

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

A quick introduction to Bootstrap

Getting Started with Bootstrap

This unit discusses where to get the source code that accompanies the course and how to use the online code editor.

Section 2: Core Bootstrap

The Bootstrap Grid System is the key to creating pages that resize automatically for different sized devices.


Glyphicons are icons you can use to make your page look more interesting. Glyphicons are built into Bootstrap and very easy to use.


Bootstrap offers several classes that can make your tables look awesome.


Bootstrap enhances typography automatically and also offers many other cool tricks for formatting quotes, adding contextual cues and much more.


In this module we cover how to hide or show elements based on the size of the screen.


This module explains what a drop-down menu is and how the native Bootstrap nav bars work. Several additional examples were added after the video was filmed.


Bootstrap offers several variations of buttons and button groups. In this module we explore how to use buttons in your application.


Bootstrap allows you to group multiple elements into a single 'input group'. The best real-life example I've seen of this is the search bar on Amazon where (in a single control) you can select the department to search (.i.e, books), enter a search term, and click the search button. In this module you'll learn exactly how to build such a control on your own site.


Bootstrap offers several easy controls you can use to indicate that a page or article spans multiple pages.


Badges are those little numeric indicators you see next to hot links. You'll know what I mean when you see one.


Jumbotrons are like billboards for your website, and Carousels are like animated billboards. In this module I show you how to make both using Bootstrap.


Page Headers are a very simple control used to organize content on a page.


Bootstrap makes it extremely easy to make images responsive to different device sizes. It also lets you create thumbnails and even crop images into circles, squares, and ovals.


Progress bars let you communicate how far along a user is in a process, how a procedure is progressing, or any other situation where you want to communicate a percentage.

(One student noted that the sr-only class means that the text within the span will only be read by a screen reader). In the lecture I admit I don't know what sr-only means.


A media object in Bootstrap is not a video or audio file. Rather, the Bootstrap media object is a way of grouping images and text together.


List Groups are an element with a box around it, or a group of elements, with each element in a box.


To help make certain content stand out on a page you can put it inside a panel or a well. A panel is a box with lines and padding that can also have a header or a footer. A well is a box with lines designed to make it look as if it is inset into the page.

Section 3: Bootstrap and jQuery Together

Any Bootstrap component that involves any kind of motion or animation requires a reference to the bootstrap.js file and typically involves some jQuery scripting too.


Tabs allow you to put a lot of information on the screen without overwhelming the user.


Tooltips and Popovers allow you to provide 'extra' content when users need it and keep it out of the way when they do not.

1 page

Thank you for completing this course! If you liked it, I would appreciate a rating.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Alan Forbes, Best selling author of 'The Joy of' books on Amazon

Hi, I'm Alan Forbes and I'm the best-selling author of The Joy of PHP, The Joy of jQuery, and The Joy of Bootstrap. I grew up in a family of teachers and got my undergrad from Bryant University and an MBA from Babson College, where I won the Douglass Prize in Entrepreneurship. In my day job I manage a large team of distributed developers. My technical specialties include Internet application development using JIRA, SVN, Microsoft .NET, and the popular LAMP Stack of PHP, mySQL, and Apache.

I have written several articles for a variety of technical magazine and spoken at numerous conferences and user groups, including the UK Lotus User Group, the BENELUX Notes User Group, and the New Hampshire PHP Group.

I'm the inventor and Product Manager of VitalSigns™, an IBM Domino/Sametime, Microsoft Exchange/SharePoint/Lync monitoring tool written in ASP.NET, VB.NET and C# which is marketed by RPR Wyatt of Phoenix AZ.

Not just another geek, I also play guitar in the winter and surf in the summer. I loves to write and teach and always launch my projects on Kickstarter to make sure there is an audience first.

Ready to start learning?
Take This Course