Grid Layout in Bootstrap 3 course illustration.

Development

Grid Layout in Bootstrap 3

Gym Short

Intermediate

This course has been retired. Due to outdated content, we don’t offer a badge for this course, but you can still view the lessons. We recommend watching the tutorial Prototyping in the Browser with CSS Grid Layout instead.

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.

Grid Layout in Bootstrap 3

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. 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.

Prerequisites

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

Requirements

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