Grid Layout in Bootstrap 3

Aquent Gymnasium
Online

Free

Important information

  • Course
  • Online
  • When:
    Flexible
Description

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.

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.

Important information
Venues

Where and when

Starts Location
Flexible
Online

What you'll learn on the course

Layout
Social Media
Bootstrap
Twitter
Devices
Bootstrap 3
Multiple screen
Multiple devices
Codepen
Mobile Layout

Course programme

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