Bootstrap Responsive Design
4.3 (11 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.
107 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bootstrap Responsive Design to your Wishlist.

Add to Wishlist

Bootstrap Responsive Design

Design for mobile, tablet and desktop screens with ease!
4.3 (11 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.
107 students enrolled
Last updated 3/2017
Current price: $12 Original price: $100 Discount: 88% off
3 days left at this price!
30-Day Money-Back Guarantee
  • 3 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • How to include Bootstrap libraries
  • How to use the Bootstrap starter template
  • Understand how to apply Bootstrap themes
  • Use Basic Bootstrap grids
  • Understand CSS Media Queries and how they relate to Bootstrap
  • Understand the transition from stacked to horizontal grids
  • Be able to create grids for mobile, tablet and desktop using Bootstrap
  • Use Boostrap to render headings, body and lead body copy
  • Use Bootstrap to render underline, small text, bold and italics
  • Adjust alignment using Bootstrap
  • Render lists, and description lists using Bootstrap
  • Create a basic table
  • Add striped rows to a table using Bootstrap
  • Create a bordered table using Bootstrap
  • Create an interactive hover table
  • Understand how the concept of responsive design applies to tables
  • Render form controls using Bootstrap
  • Create optimized text inputs using Bootstrap
  • Understand form groups
  • Work with forms on a Bootstrap grid
  • Understand and use the Boostrap Image Classes
  • Use responsive images
  • Use the Collapse Plugins
  • Create Accordions to manage content
  • Create standard and inverted navigation bars
  • Create dropdowns
  • Add buttons and form fields to nav bars
  • Create a basic carousel
View Curriculum
  • A understanding of fundamental HTML will help make you successful

It's a mobile phone world.

And a tablet world.  And a laptop world.  The fact is, it's a multi-screen world and your web sites and applications have to live in it.  

Perhaps, you're looking for an easy way to implement the principals of responsive design in your own work. Perhaps, you want an easy mobile-first framework to wrap around your own work. Or, maybe, you just want to learn the right way to do things in a multi-screen world.

From the screen in your users' pockets to the giant 4K desktop screen, your apps and web sites have to look good everywhere-- but how does someone create for such varied screen sizes and resolutions-- 

The answer is Bootstrap.

Bootstrap is a visual, client-side framework that lets you build gorgeous mobile apps and build those into full screen-compliant applications.  And, if you're going to learn Bootstrap, there is no better way then from our course Bootstrap Responsive Design. 

In this course expert developer and master instructor Mark Lassoff will take you from the very fundamentals of development with Bootstrap to applying techniques like Grids and Navigation bars.

If you're serious about responsive design, then you need Bootstrap.  And, if you're serious about learning Bootstrap you need Bootstrap Responsive Design from Over 500,000 online students can't be wrong

Who is the target audience?
  • Web Designers or Developers who want an easy responsive framework
  • Programmers who need an easy way to make apps responsive
Compare to Other Bootstrap Courses
Curriculum For This Course
41 Lectures
Getting Started
6 Lectures 39:37

Get started quickly and make your first Bootstrap app.

Preview 14:55

Including the Bootstrap libraries allows you to access all Bootstrap features.  You'll learn how in this video lecture.

Preview 06:01

A good starter template will make it easy to use Bootstrap for every project you start. Mark explains in this video.

Preview 03:57

Bootstrap themes can be used to skin you Bootstrap apps and give them a unique look.  You'll learn more about themes in this video.

Preview 06:54

Central to Bootstrap is the concept of the container.  You'll learn about containers and fluid containers in this video lecture.

Preview 04:02

There is a world of custom components for Bootstrap.  Mark will introduce you to them and show you how one works in this video.

Custom Components Intro: Footer
Containers and Grids
5 Lectures 27:32
Section Introduction: Containers and Grids

Much of the 'magic' of Bootstrap involves the grid.  The Bootstrap grid allows you to design once and display accurately across a variety of screen sizes and resolutions.

Basic Grids and Media Queries

Understanding how grids transition from stacked (mobile) to horizontal is critical to understanding how Bootstrap works.

Stacked to Horizontal Grids

You'll learn how to create grids that work on both mobile and tablet devices as Mark codes an example.

Mobile and Tablet Grids

You'll learn to create a grid that works not only on mobile and tablet, but also on desktop devices.

Mobile, Tablet and Desktop Grids
6 Lectures 23:03
Section Introduction: Typography

Bootstrap manages typography well.  You'll learn some basic typography tags in this video.

Headings, Body and Lead Body Copy

Mark will demonstrate more typographical tags in this video.

Underline, Small, Bold, Italics

You'll learn how to align text, use text transformations and utilize abbreviations in this video lecture.

Alignment, Transformation and Abbreviation

Bootstrap does some neat things with HTML lists.  You'll see a demonstration in this video lecture.

Lists and Description Lists

You'll learn about some unique typographical formats you can use with Bootstrap in this video lecture.

Codes, Keyboards and Variables
6 Lectures 21:11
Section Introduction: Tables

Mark creates a basic table styled by Bootstrap.

Basic Table

You'll learn to create a basic table with striped rows in this video lecture.

Adding Striped Rows

You'll create a neat, clean table with visible borders in this section of the course.

Creating a Bordered Table

A hover table interacts with the user as they mouseover various segments of the table. Mark demonstrates in this video.

Hover Table

Bootstrap tables can be made to be responsive.  You'll learn how in this video lecture.

Responsiveness and Tables
5 Lectures 26:11
Section Introduction: Forms

Bootstrap styles your form controls so they are usable across a multitude of screen sizes and resolutions.

Form Controls

Bootstrap can also be used to style various types of text inputs and make them usable.

Text Inputs

Form groups can make your forms look more interesting and be more usable at the same time.  

Form Groups

Your forms can work with your Bootstrap grid to be usable across many different sized screens.

Forms and the Grid
Images with Bootstrap
3 Lectures 05:57
Section Introduction: Images with Bootstrap

Bootstrap has classes that can be used to style images.  You'll learn how in this section of the course.

Bootstrap Image Classes

Responsive images adjust for screen size.  They are an important facet of responsive design.

Responsive Images
3 Lectures 09:26
Section Introduction: Collapsables

When you have a lot of content and a small screen size, collapsibles can be great to hide content until it's needed by the user. 

The Collapse Plugin

An accordion is stack of collapsibles that allow you to hide and categorize content.  It's a great way to display lots of information on mobile devices.

Navigation Bars
4 Lectures 14:41
Section Introduction: Navigation Bars

Bootstrap makes good looking navigation bars easily.  You'll examine the code with Mark in this video.

Standard and Inverted Nav Bars

Easily add dropdowns to your navigation bars in this video lecture.


Navigational bars can contain both buttons and forms in Bootstrap.  You'll learn how to implement in this video.

Buttons and Forms in Navbars
Bootstrap Carousel
3 Lectures 06:39
Section Introduction: Bootstrap Carousel

An image carousel is a common way to display a number of images in Bootstrap.  Easy to code, Mark demonstrates in this video.

Creating a Basic Carousel

Easily add captions to your image carousels.

Adding Captions
About the Instructor
LearnToProgram, Inc.
4.2 Average rating
4,574 Reviews
143,744 Students
46 Courses
Learn Web, Mobile and Game Development

LearnToProgram Media is a leading publisher of web, mobile, and game development courses that are used by over 500,000 people in 65 countries. LearnToProgram's valuable network of technical resources includes content on YouTube, iTunes, and Roku, as well as books, free tutorials, and online courses.

With a mission of “teaching the world to code" LearnToProgram instructors are teachers first and technical experts second. Their primary skill is relating complex technical information to nontechnical people learning web, mobile and game development. The entirely online, self-paced sales model allows students to learn at their own pace.

With over 40 courses on the market, LearnToProgram offers students flexible programs in web development, mobile application development and game development. Currently the company's most popular online courses include Become a Certified Web Developer and 10 Apps in 10 Weeks.

The company is based outside of Hartford, Connecticut.