Flexbox, Grid, & Bootstrap

Hands-on Training from Experts NYC or Live Online

Learn how to use CSS flexbox and grid to layout and align webpage content and make it adapt to different size screens. See how both of these newer CSS techniques are useful and when to use each. You’ll also learn how to use Bootstrap (which uses Flexbox) to build out layouts quickly.

This course includes

  • 12 hours of live, project-based training from experts
  • Proprietary workbook included
  • Retake for free within 1 year
  • Access to class recordings (30 days)
  • Verified digital certificate of completion
  • Small class sizes

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.

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.

Read more

This course has a prerequisite

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

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

Schedule & Enrollment: Flexbox, Grid, & Bootstrap

  • 12 Hours
  • $650
  • NYC or Live Online
  • Free retake
  • Expert instructors
  • Small classes

Show more

Related Courses: Compare to Flexbox, Grid, & Bootstrap

These related courses share skills and topics with Flexbox, Grid, & Bootstrap. Select up to two and tap Compare selected courses to view a side-by-side comparison.

  • Front-End Web Development Certificate
    108 hours $3,495

    Learn front-end web development with HTML & CSS, and JavaScript, and gain skills in building responsive websites for any screen size. Additionally, learn how to use WordPress, the world's leading content management system, to create customizable websites and edit content without coding experience.

  • Web Design Certificate
    162 hours $4,995

    In this certificate program, you will become a well-rounded Web Designer and learn to design webpages, code them with HTML & CSS, and JavaScript, and build websites with WordPress, allowing you to create a diverse portfolio to showcase your skills to potential employers or clients.

  • Full-Stack Web Development Certificate
    420 hours $7,995

    Gain the skills and knowledge to become a Full Stack Developer and meet the growing demand for professionals who can develop and maintain web applications. This project-oriented course teaches you how to code websites from scratch, and you'll build a portfolio of working web applications to showcase to potential employers.

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.

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 is based on Flexbox so understanding how flexbox works helps you to fully understand and utilize Bootstrap.

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, Figma, and more. 

Read more
Yelp Facebook LinkedIn YouTube Twitter Instagram