Responsive Web Design with Bootstrap Hands-On

What You'll Learn

Leverage the power of Bootstrap to rapidly develop sleek responsive websites that are mobile friendly and adapt to all screen sizes and devices! The popular Bootstrap framework makes it easy to assemble the common elements you see on nearly every web page - navigation, buttons, forms, and even includes a grid system that makes creating column based layouts a breeze. Using a front-end framework, like Bootstrap, takes the guesswork and headaches out of creating consistent and professional responsive websites.

For the purpose of this class we code in a basic free text editor. We will show you how to get a good text editor installed and preview things directly from your computer. Bootstrap is a front-end framework and doesn't require a server environment for you to see the site we create on your local host.


  • 9:00am - 9:05am: Introductions and review of class syllabus
  • 9:05am - 9:20am: Introduction to Bootstrap, what responsive design is, and why it's important
  • 9:20am - 9:40am: Understand the instructor supplied basic foundation site. This site will act as your code base to install bootstrap into. The instructor will break down the code and help you understand how your sites main container works and how you can adjust it to behave differently at different screen sizes.
  • 9:40am - 10:00am: Download Bootstrap. unzip bootstrap and examine bootstraps files.
  • 10:00am - 10:30am: Integrate bootstrap in to a HTML/CSS website (this is the instructor supplied site referenced above). You will not need any additional software because your browser can render HTML/CSS and as well the javascript aspects found inside bootstrap. At this time we will also include jQuery which is a very popular library for JavaScript. We do this because it unlocks additional functionality within bootstrap and helps future proof your site to do other interesting things as your knowledge grows.
  • 10:30am - 11:15am: Overview of the Bootstrap grid system. This is the most powerful feature of Bootstrap and what makes all developers fall in love with the framework. This is also a sneak peak at most of the features of Bootstrap.​
  • 11:15am - 12:00pm: Hands on guided practice time with grid system. Instructor will help troubleshoot your code, find road blocks you may be having, and help you do interesting things that you might need specific help with. Once you get into the grid you start seeing lots of possibilities that you could imaging doing but not quite sure how to get there. Usually the answer is simpler than you think. This is a great time to ask questions.
  • 12:00pm - 1:00pm: Lunch break
  • 1:00pm - 1:20pm: Instructor will basically try and "catch" everyone up to each other. Because everyone is at varying degrees coding this time is set aside to go over just about anything that needs to be covered. It will be a combination of Q& A, lectures, HTML, CSS, and even possibly additional information on programming languages such as JavaScript. It also could be guided practice time. Keep in mind that we had very little time with the grid before lunch so the grid may be discussed a lot in this hour.
  • 2:00pm - 2:15pm: Column offsets (bootstrap grid)
  • 2:15pm - 2:30pm: Using nested columns (part of grid)
  • 2:30pm - 2:45pm: Column ordering (part of grid)
  • 3:45pm - 4:30pm: Last but not least playing with aspects of bootstraps "Kitchen Sink". This includes styled buttons, font embedded icons (gyphicons), tooltips, and many other fun and useful parts of bootstrap.
  • 4:30pm - 5:00pm: Hands-on, instructor-guided practice applying what you've learned to keep building out your responsive Bootstrap website.

Computer Requirement

This is a hands-on class where you'll "learn by doing". Therefore you'll need a computer. If you need any particular software installed, that will be detailed below. Not all programs require special software so if there isn't any detailed listed below you will only need a computer with a up-to-date web browser. We always recommend that if you have one, that you bring your own computer if at all possible. However, if you need one, we have several Apple iMac workstations with all the necessary software that are available by reservation for only $20 per day. You can reserve a computer rental using this form but you must complete your registration first. In most cases, the class will be taught with the Macintosh version of the software but generally the only difference between the Mac and Windows version is the keyboard shortcuts, using the Command key on Mac and the Control key on Windows.

You will need Sublime Text Editor (it's free). You can use a preferred text editor but this is the one the instructor will use and highly recommends.

Who Should Take This

Students should have some basic understanding and experience with HTML and CSS prior to taking this class. However, even with just basic knowledge of HTML, Bootstrap makes it easy to  build responsive websites that include responsive  navigation, buttons, links and other common user interface elements.  The class is designed as an introduction to Bootstrap so students do not need any prior knowledge or experience with Bootstrap.

If you need to some basic HTML and CSS please have a look at our Intro to HTML and Understanding CSS workshops.

Presented By Brian Shaffer

Brian Shaffer

Brian Shaffer is a seasoned web developer and Internet marketer. Over the past eight years, Brian has designed, developed, and marketed over 70 sites that are growing and thriving today. As an HTML, CSS, Javascript, and PHP expert, Brian builds on all major open source platforms, including WordPress and BigCommerce, to provide companies with sites that they can maintain without knowing how to program. Over the past few years, Brian has taken a liking to Twilio, and has built many phone and text message applications for clients using their platform. Take a look at some of the demos at Brian Shaffer's blog.

BDA Members


BDA Members: $249.00

Non-Members: $279.00

Available Dates

November 23, 2019 / 9am - 5pm

In Boulder Location


If you see a register button above there is currently still space available.

Can't make this time? Click here to follow this class to be notified via email next time we schedule additional dates.

Customer Comments

Absolutely valuable!Gina
Read All Comments

Related To: Responsive Web Design with Bootstrap Hands-On

UI/UX Design Certificate Program

UI/UX Design Certificate Program

Fees: $1299 for members / $1399 for non-members

Introduction to HTML

Comments For: Responsive Web Design with Bootstrap Hands-On

This was a great class. With so much to cover, I wish it was more than one day.James on 4/9/2018
I will use this on every website I create! Excellent instructor!Rachel on 1/24/2015
Absolutely valuable!Gina on 1/24/2015


We've been empowering Colorado's creatives, tech and marketing professionals with affordable and practical-skills focused training for 15 years! We invite you to join our community today.