# Flexbox, Grid, & Bootstrap

Canonical URL: <https://www.careercenters.com/courses/flexbox-grid-css-layout-techniques>

## Overview

CSS Flexbox and CSS Grid are two powerful ways to layout content in a webpage. Flexbox and Grid are newer CSS layout technologies that make it easier to create responsive layouts, which adapt to any screen size.

### Design Responsive Webpages

Optimize your websites for mobile, tablet, and desktop using CSS Flexbox and Grid.

In this class you’ll learn how to use Flexbox and Grid to lay out and align webpage content, making it adapt to different screen sizes. Learn when to use one technique over the other, and how to get the most out of each one.

This [front-end web development class](https://www.nobledesktop.com/classes/flexbox-grid-css-layout-techniques) is held at our [web design school](https://www.nobledesktop.com/web-design) located at 185 Madison Avenue in Midtown.

## What you'll learn

- CSS Flexbox for laying out and aligning webpage content.
- CSS Grid for an entirely new way to think about laying out entire webpages.
- Learn how to use and skin Bootstrap (which uses Flexbox) to build out layouts quickly.

## Prerequisites

Students should feel comfortable coding HTML and CSS equivalent to our [Web Development Level 2](/courses/web-development-level2) class.

## Curriculum

### Section 1

#### Intro to Flexbox

- Display Flex
- Alignment & Distribution on Main Axis & Cross Axis
- Flex Direction (Row & Column)
- How Auto Margins Are Useful

#### Flexbox: Sizing & Alignment

- Controlling Size with Flex-Grow, Flex-Shrink, & Flex-Basis
- Aligning All vs. Specific Flex Items
- Nesting Flexbox
- Flex Shorthand

#### Flexbox: Vertical Centering on a Full Screen Background

- Creating a Full Screen Background
- Using Viewport Sizing Units vh & vw
- Vertically Aligning Content With Flexbox
- Darkening the Background Image Via CSS

#### Flexbox Wrapping

- Flex-Wrap
- Sizing Flex Items (Flex-Grow & Flex-Basis)

### Section 2

#### Flexbox: Reordering Content

- Changing the Order of Flex Items
- Positive vs. Negative Order Values

#### Flexbox: Creating a Responsive Pricing Grid

- Nesting Flexbox
- Application of Flexbox Concepts to a Pricing Grid Layout

#### Bootstrap: Getting Started

- Using Bootstrap’s Grid System (Containers, Rows, & Columns)
- Creating Columns & Adding Content
- Adjusting Column Sizes Across Screen Sizes
- Using Some of Bootstrap’s Components & Pre-Made Styles

#### Bootstrap: More About Grids & Components

- Nesting Grids
- Adding a Navbar & Other Components
- Showing & Hiding Elements at Specific Sizes

### Section 3

#### Bootstrap: Spacing & Adapting Layout Across Screen Sizes

- Adding an Email Signup Form
- Adjusting Spacing
- Changing the Layout Across Screen Sizes

#### Intro to Grid

- Getting Start With Grid (Columns, Rows, & Gaps)
- The Explicit vs. Implicit Grid
- Firefox DevTools for Grid

#### Grid: Sizing & Placing Items Within the Grid

- Spanning Columns & Rows
- Placing & Sizing Using Numbered Grid Lines
- Naming Grid Lines

#### Grid: Minmax, Auto-Fit, & Auto-Fill

- Sizing with Minmax
- Auto-Fit vs. Auto-Fill
- Max-Content & Min-Content

### Section 4

#### Grid: Template Areas

- Setting Up Grid Template Areas
- Creating Empty Grid Areas
- Using Automatically Created Named Lines
- Multiple Elements Occupying the Same Grid Area
- Viewing Grid Template Area Names In Firefox’s DevTools

#### Grid: Alignment, Centering, & Reordering Content

- Aligning Grid Items
- Aligning Within the Grid Container
- Aligning Individual Grid Items
- Ordering Grid Items

#### Grid: Laying out an Article

- Using Grid to Lay Out an Article
- Making Elements Go Full-Width
- Adding Elements into the Side Columns

#### Grid: A Responsive Image Gallery (Masonry Layout)

- Creating the Grid Layout
- Enlarging Some Photos to Create a Masonry Layout

## Schedule
- Jul 9, 2026 – Jul 10, 2026 — NYC
- Sep 17, 2026 – Sep 18, 2026 — NYC

## Pricing

**Tuition:** $650