Yelp Facebook LinkedIn YouTube Twitter Instagram

Flexbox, Grid, & Bootstrap

CSS Layout & Bootstrap Classes in NYC

Create Responsive Webpage Layouts Easier Than Ever Before

CSS Flexbox and CSS Grid are two powerful ways to layout content in a webpage. Flexbox and grid are newer CSS layout technologies aimed at making it easier to create responsive layouts that are optimized for any size screen.

In this class you’ll learn how to use flexbox and grid to layout, align, and reorder webpage content, as well as make it adapt to different size screens. You’ll learn how both techniques are useful, and when to use each. You’ll also learn how to use Bootstrap (which uses Flexbox) to rapidly code up pages without having to write as much CSS.

If you’ve been coding CSS but don’t know flexbox and grid yet, it’s time to learn them! They enable you to create layouts that were either impossible to build previously, or they empower you to build layouts more faster and more easily than before.

Prerequisite: HTML & CSS coding experience equivalent to our Web Development Level 2 class.

Read more
  • Small Classes
  • Computer Provided
  • Book included
  • Free Retake

Register for a Class
  • $650
  • 12 Hours
  • Mac or PC
  • 185 Madison Ave, NYC or live online

Corporate training available

Email
Show all dates

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

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.
  • Use Bootstrap (which is made with flexbox) to build out layouts quickly.
  • Learn how flexbox and grid change the way you approach webpage layout.
  • Size, position, align, and reorder content using flexbox and grid.
View full syllabus

Flexbox, Grid, & Bootstrap Class Syllabus

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

GSS Grid makes creating webpage layouts easier

Create Masonry style layouts using CSS Grid

Vertically center content easily with Flexbox or Grid

Align & Reorder Content using Flexbox & Grid

Quickly build webpages with Bootstrap's pre-made grid-system & components without having to code as much CSS

Learn Flexbox, Grid, & Bootstrap at a Top NYC School

These newer CSS techniques are essential for any modern web developer, and after taking this class you’ll be able to start using flexbox, grid, and Bootstrap right away. Noble Desktop has been teaching web design for decades, so we know how to quickly cover a lot of material, in a way that makes the concepts as easy as possible to understand.

Students learning web design
circle-arrow-solid circle-arrow-solid

Hands-on Teaching Style

“I really enjoyed the format of this class...Watching the instructor go through the lesson first and give extra tips to help solidify the information outside of what is written in the workbook is immeasurably helpful... The course helped to show the "why" behind the process. The instructors have been very knowledgeable...The hands on approach is just what is needed in this type of course.”
Sarah Lightman, Senior Marketing Specialist

Custom Flexbox, Grid, & Bootstrap Workbook Included

Our Flexbox, Grid, & Bootstrap class comes with a custom written step-by-step training workbook. Recreate the class projects and refresh the material anytime after the class.

Part of a Certificate Program

This class is included in our web development certificate programs. Take the other courses to earn a certificate!

Highly Reviewed by Our Alumni

From our hands-on training style to world-class instructors and proprietary curriculum, we deliver a learning experience our alumni can be proud of.

I could not have asked for a better presentation of material and style of learning. The teacher was excellent and had an excellent understanding of the subject matter. Best web classes going!

Ray Hill

Learning about Flex, Grid, and Bootstrap has changed my understanding of web design. I'm so glad I took this course!

Jake Thomas

Over the years, the good people at Noble Desktop have solved the magical mysteries of web design and web coding! Cheers!

Adam Bohannon

Flexbox, Grid + Bootstrap was another perspective on how to create structure and simplify certain aspects of web design. David is a thoughtful and thorough instructor. It is always challenging learning new things and taking classes at Noble Desktop makes it a fun experience! Highly recommend!

Victoria Greiss

Noble Desktop training classes are good. Especially the instructor is really good within two days he made us to clearly understand the concepts of Flexbox, Bootstrap and CSS Grid.

Sai

circle-arrow-solid circle-arrow-solid

Frequently Asked Questions

  • Are there prerequisites? Do I need to come in with any prior coding knowledge?

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

  • Do I need to bring anything to the class?

    No. We provide computers (Mac or PC) with a coding editor installed. Choose your operating system at checkout.

  • Do you offer discounts or a payment plan for this course?

    Discounts

    Shorter courses such as this are already affordably priced and are not eligible for discounts.

    Payment Plan

    This course is not eligible for a payment plan, which is only available for programs priced at $2,495 and above. Read our Payment Plan FAQ for more details.

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

  • Can I take this course online (remote learning)?

    You may attend this training virtually (online) at the scheduled time the course is offered (New York, Eastern Time).

    How does attending “live online” work?
    • Students can attend this training remotely through screen sharing software (we use Zoom).
    • Participants can hear the instruction, ask questions, and even share their screen with the instructor.
    • For audio you can use your computer’s microphone/speakers or call a phone number that we’ll provide.
    • Classes are activity-based and taught by a live instructor, so we strongly encourage students who are local to the area to attend in person!

Learn more about Flexbox, Grid, and Bootstrap & our classes

What are Flexbox & Grid? Flexbox and grid are new CSS layout techniques. Flexbox and grid are different approaches to laying out content and can be used together. While grid is newer, it does not replace flexbox. There are scenarios in which you could use both, so both are useful to know.

On the CSS Tricks article What’s the Difference Between Flexbox and Grid? Beverly @aszenitha commented “Use grid when you already have the layout structure in mind, and flex when you just want everything to fit. Layout first vs content first.”

Flexbox, Grid, & Bootstrap Explained

Let’s look at what each of these three things is, when to use them, and how they relate to each other.

What is CSS Flexbox?

CSS flexbox is primarily used when laying out webpage content in one direction (row or column). We say primarily because flexbox content can wrap, which would create multiple rows and columns. Its focus is not on creating a full grid though, as CSS grid does.

We use flexbox to size, align, and distribute content in a direction (row or column). In a world of various sized devices, the flexibility of flexbox enables us to size content for different size screens, to change from a column direction on mobile to a row direction on desktop, and to even reorder content differently on multiple screen sizes.

What is CSS Grid?

Grid is the first CSS technique that lets you define a grid of columns and rows onto which you place the content of your webpage. You can place the content into an area of the grid regardless of the HTML source order, and the grid can be completely different on various screens sizes! This enables you to build responsive webpages that adapt to screen size in a much better (and easier) way than we could previously. Reordering content according to screen size is much easier with grid.

If you’re new to coding you may not appreciate just how revolutionary grid is and why web developers are so excited about it. Compared to the ways we previously coded webpage layouts, grid changes everything. It works very differently than CSS floats, display as inline, and tables (from the early days of the web), etc. It gives us the ability to create more interesting and attractive layouts, with less code that’s more intuitive to work with.

What is Bootstrap?

Bootstrap is a popular front-end component library. It’s a collection of HTML, CSS, and JavaScript that lets you layout out webpages (using their grid of rows and columns) and add components (navbars, carousels, buttons, and more) using only HTML. You can add your own CSS to customize the appearance, or you can use Bootstrap’s stock appearance.

Flexbox and grid are CSS, which is understood natively by web browsers. Bootstrap is a collection of HTML, CSS, and JavaScript code that is stored in files which your webpage must load. This does add extra download time, so if you can write your own code instead of using Bootstrap, it will result in a smaller, faster loading webpage. So why do people use Bootstrap? Depending on what you’re doing, it may be faster to develop with Bootstrap because the code’s already been written. As with anything, there are tradeoffs in developer time and performance. Bootstrap can be faster and easy to work with because you don't have to know CSS as well. Even if you're a CSS expert, it may be faster to build something with Bootstrap.

Behind the scenes, Bootstrap 4 is based on Flexbox. If you’re used Bootstrap 3, version 4 made some fairly major changes to the way it works. It’s not a drop-in replacement and you will need to understand how flexbox works to fully understand and utilize Bootstrap 4.

CSS flexbox and grid are making it easier for developers to create layouts quickly. That means some developer will use flexbox and grid instead of Bootstrap. Other developers (especially back-end) are not as good with CSS and will, therefore, continue to choose Bootstrap because it’s quick and easy to use. You will likely encounter sites built with Bootstrap (especially many WordPress themes), so Bootstrap is a useful thing to know and include on your resume.

About This Class

If you already know some HTML and CSS, but have not learned Flexbox and Grid yet, this class is perfect to get you up and running quickly.

If you’re just getting started coding webpages, this class is part of the core web curriculum of our web development certificates. That means you’ll learn these concepts in each of these certificate programs:

Check out all our web design & web development classes, including courses in HTML, CSS, JavaScript, Ruby on Rails, Sketch, and Adobe XD. 

Related Classes & Certificates

Front-End Web Development Certificate

72 Hours

$2995

More details

Full-Stack Web Development Certificate

132 Hours

$5490

More details

Git Going: An Intro to Git

3 Hours

$195

More details
See all Web Development classes