Skip to main content

Grid Layout in Bootstrap 3

Gym Short

Grid Layout in Bootstrap 3 will teach you how to get up to speed with Twitter Bootstrap's grid layout system and learn how to build a responsive layout that looks great on multiple screen sizes and devices.

About This Course

In this course you will learn how to get up and running with Bootstrap 3 in a matter of minutes and build a responsive layout that looks great on multiple screen sizes and devices. We will focus specifically on grid layout in Bootstrap with an emphasis on prototyping. By the end of the course you will be able to use Bootstrap for virtually any layout you can imagine and have a strategy for moving it quickly into production.

Course Outline

  • Chapter 1: Lesson Intro

    In this video, you will learn some of the pros and cons of working with Bootstrap as well as the new features introduced in Boostrap 3-in particular the responsive layout capabilities.

  • Chapter 2: Working With Lesson Files In Codepen

    You will recieve a brief introduction to Codepen and walk through the simple steps to begin working with the lesson files used throughout this course.

  • Chapter 3: Working with Rows and Columns in Bootstrap

    Learn the basics of Bootstrap's 12 grid system and how to create rows and columns in particular.

  • Chapter 4: Using All Four Breakpoints for Layout

    You will begin to experiment and understand the 4 primary breakpoints that are part of Bootstrap 3's responsive layout system.

  • Chapter 5: Starting Your Mobile Layout

    You will begin adding content and working within Bootstrap's "mobile-first" single-column grid layout.

  • Chapter 6: A Two-Column Mobile Layout

    Just because a layout is "mobile" doesn't mean everything has to be a single column. Learn how to divide the mobile layout you created in the previous chapter into two columns.

  • Chapter 7: Using Offsets In A Desktop Layout

    In this chapter you'll begin to address how to adapt your layout for wider screens; in particular, you will focus on layout for "desktop" screens. In order to accomplish this, you will look at the powerful "offset" styles in Bootstrap.

  • Chapter 8: Creating Advanced Layouts with Nested Rows

    Typically, the more room you have to work with on a screen, the more complex your layout can be. In order to achieve advanced layouts with multiple columns you'll need to learn how to use Bootstrap's nesting capabilities.

  • Chapter 8: Icing On The Cake

    This lesson focuses on the grid layout features in Bootstrap, but there are a number of other convincing reasons to use Bootstrap for quick and easy layout design. In this chapter, you'll take a look at some of those reasons, including the ability to add your custom CSS and button styling, as well as an introduction to Helper Classes and Responsive Utilities.


  • A basic knowledge of HTML and CSS is recommended
  • Familiarity with responsive design principles, specifically the use of CSS media queries is recommended

Software Requirements

  • Mac or Windows desktop or laptop
  • Google Chrome web browser recommended

This Course is For

  • Web Designers
  • Front-End Developers
  • UX Designers

Meet the Instructor

Jeremy Osborn: Designer, Writer, Educator

Jeremy Osborn

Jeremy Osborn is Academic Director for Aquent Gymnasium and has been active as a designer, educator, and writer in the creative technology industry for more than 20 years.

From building websites for Boston-area startups to developing the Graphic and Web Design certificate program at Boston University’s Center for Digital Imaging Arts and teaching in Fortune 500 corporations, Jeremy’s knowledge and experience ensure that students acquire real-world skills in each featured subject. His latest book, HTML5 Digital Classroom, is currently available on