# Flexbox, Grid, & Bootstrap Canonical URL: ## Overview ### Create Responsive Webpage Layouts Easier Than Ever Before CSS Flexbox and CSS Grid are two powerful ways to lay out content in a webpage. Flexbox and grid are modern 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 faster and more easily than before. Prerequisite: HTML & CSS coding experience equivalent to our [Web Development Level 2](/classes/web-development-level2) class. ## 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. ## Prerequisites Students should feel comfortable coding HTML and CSS equivalent to our [Web Development Level 2](/classes/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 Started 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 - Jan 14, 2027 – Jan 15, 2027 — NYC - May 20, 2027 – May 21, 2027 — NYC - Sep 16, 2027 – Sep 17, 2027 — NYC ## FAQ ### Is this course open to beginners? Students should feel comfortable coding HTML and CSS equivalent to our Web Development Level 2 class. ### Do you offer payment plans or student financing for this course? This course does not qualify for payment plans or student financing. See our Payment Plan FAQ to find related programs that qualify. ### Can I take this course online (remote learning)? No upcoming live online dates are currently available. Please contact us about future availability. ### What happens if I need to miss a session? You have some options: You can watch a recording of the session. We will provide any course materials. Contact us to confirm whether remote attendance is available for your session. You can use your free retake to make up any missed class time. ### 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 Access to industry-standard software during your training Comprehensive learning materials including proprietary workbook developed by industry experts 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 30-day access to class recordings to review material at your own pace 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. ### Do you offer any discounts for this course? Take this course as part of a certificate program and save: Software Engineering Immersive Price: $10,995 | Hours: 510 Hours Front End Development Certificate Price: $3,495 | Hours: 108 Hours Full-Stack Web Development Certificate Price: $7,995 | Hours: 420 Hours ## Pricing **Tuition:** $650