Flexbox, Grid, & Bootstrap Course in NYC: Classroom & On-site Training

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 is held at our web design school located at 185 Madison Avenue in Midtown.

This course has a prerequisite

Students should feel comfortable coding HTML and CSS equivalent to our Web Development Level 2 class.

Schedule & Enrollment: Flexbox, Grid, & Bootstrap

12 Hours
$650

NYC or Live Online
Free retake
Expert instructors
Small classes

This course is offered by our affiliate school, Noble Desktop.
View upcoming course dates and register at nobledesktop.com.

Tuition

As one of our smaller courses, tuition for this course is due in full before the start date. The best way to save on this course is to take it as part of a certificate program.

Full Tuition

$650
Due before the class starts

What’s Included

12 hours of hands-on instruction
Live, project-based training from experts
Retake for free within 1 year
Verified digital certificate of completion

What’s included with my tuition?

A hands-on learning experience working on projects and exercises, which is proven to boost comprehension, retention, and engagement
Expert instructors who are industry professionals and experienced educators that are driven to help you succeed
Top-notch curricula that have been tried and tested over many cohorts and are consistently improved for an optimal learning experience
Supplemental materials to assist both during and after the course - please refer to specific course pages to see what supplemental materials are offered
A 1-year free retake policy which allows students to retake any part of the course or program for free to refresh the materials and gain additional practice
A certificate of completion to verify your accomplishment

Are there any additional fees or expenses?

There are no extra fees or taxes for our courses. The price you see on this page is the maximum you’ll pay us.

However, if you plan to take the course live online, you may need to obtain required software. We’ll help you get set up with a free trial of paid software prior to the class. Most of our coding classes utilize freely-available open-source software. For most of our design and motion graphics courses, we will help you get set up with a free trial of Adobe Creative Cloud. If you attend the course in-person, we will have a computer already set up for you with all of the required software for no additional cost.

Do you offer any discounts for this course?

We don’t currently offer discounts as we do our best to affordably prices our courses.

Take this course as part of a certificate program and save:

Front-End Web Development Certificate

Price: $3,495 | Hours: 108 Hours
Web Design with WordPress & PHP Certificate

Price: $5,000 | Hours: 0 hours
Full-Stack Web Development Certificate

Price: $7,995 | Hours: 420 Hours
Software Engineering Certificate

Price: $10,995 | Hours: 510 Hours
Web Design Certificate

Price: $4,995 | Hours: 162 Hours

Learn the Skills Guarantee™

Learn the concepts and skills covered in this course or your tuition is on us. See details and terms & conditions.

Hands-on, personalized training

Learn with real-world projects

Several students, sitting at computers, looking at the front of the classroom

Cutting edge curriculum

Step-by-step instruction to boost retention

The Career Centers instructors are highly skilled communicators who really know their craft. They are wonderful about explaining and re-explaining when necessary and I never felt rushed or foolish for asking a question.
—Diane Speros

Learn from industry experts

Gain industry knowledge from professionals

Free retake

Retake the course for free within one year

Interactive Training

Learn in Real-Time with Small Class Sizes

Attend this course in-person in NYC or Live Online via Zoom. Engage with expert instructors, ask questions, and get feedback on your exercises and projects.

Unlike other providers, these are not mass open-enrollment classes. At NYC Career Centers, you’ll learn in small groups (typically 8-15 students) and receive personalized attention.

On Campus in NYC 185 Madison Avenue, NYC

Get face-to-face interaction with an instructor and other students when you learn at our NYC campus. Courses are hands-on with a computer and software provided.

Live, interactive class
Experienced instructor in the room with you
Computer and software provided

More about our campus

Live Online Remote, from anywhere

Get the same interactivity and access to the instructor as in-person students. There are no extra fees and we’ll work with you to ensure your remote setup is perfect.

Live, interactive class
Experienced instructor teaching over Zoom
Remote setup assistance provided

More about live online training

photo of instructor leading a class in person

student taking a class live online, seated on their living room floor, leaning against a couch

Earn a Certificate of Completion

Upon completion of this course, you’ll receive an official certificate testifying to your mastery of the curriculum. We’ll send you a link where you can download your certificate, share it online with your friends, post it to your professional network on LinkedIn, and view all your earned certificates. Congratulations on your achievement!

Shareable on

Sample credential for completion of Flexbox, Grid, & Bootstrap

Free Retake & Class Recordings

Missed a session or need a refresher? We have you covered!

Free Retake

We offer a single free retake of the class within a year.

Class Recordings

You can also access recordings of each session in your student portal within one business day of the session’s end. Recordings are available for one month after the session.

See terms and conditions.

Flexbox, Grid, & Bootstrap Curriculum

What You’ll Learn at a Glance

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.

Course Syllabus

Download Syllabus PDF

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

Frequently Asked Questions

Does this course require any prior knowledge or experience?