Flexbox, Grid, & Bootstrap
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
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
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.
Students should feel comfortable coding HTML and CSS equivalent to our Web Development Level 2 class.
From our hands-on training style to world-class instructors and custom-crafted curriculum, we deliver results our alumni are proud of.
Flexbox, Grid, & Bootstrap is rated 4.8 stars by 119 students
in the past 24 months
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's classes are good. Especially the instructor is really good - within two days he made us clearly understand the concepts of Flexbox, Bootstrap and CSS Grid.
Sai
This class is a MUST! Dan makes the content easy to understand and applicable to real life work scenarios. So happy I took this class at Noble Desktop.
Hannah
I would recommend to anyone who wants to make their coding lives easier and more accessible.
Alwin Jacob
Expert instruction that is completely accessible. A vast amount of material presented in a comprehensive way that is methodical and builds from basic to more involved.
Lauren Press
Law and Order SVU
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.
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.
We don’t currently offer discounts as we do our best to affordably prices our courses.
Learn the concepts and skills covered in this course or your tuition is on us. See details and terms & conditions.
Work on projects proven to boost retention
Refined over many cohorts for an optimal learning experience
The teaching method at Noble Desktop is perfect and the classes provide you with infinite knowledge that makes you eager to take everything they offer. I love Noble!
—Ivonne Ackerman
Experienced educators who are driven to help you succeed
Refresh the materials for free within one year
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. Switch between live-online and in-person as needed, even after the course has started.
Unlike other providers, these are not mass open-enrollment classes. At Noble Desktop, you’ll learn in small groups (typically 8-15 students) and receive personalized attention.
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.
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.
Our instructors are verterans of their field and experienced educators, driven to help you succeed.
School Director, Instructor, & Senior Course Developer
Program Director & Senior Instructor
Entrepreneur & Founder of Noble Desktop
Senior Instructor
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
This course includes a detailed workbook, available in print or ebook at no additional cost.
Our proprietary workbooks are designed by a team of industry experts and instructional designers, and are updated regularly for the latest features and trends. Learn by completing a variety of real-world projects, and apply your newly-learned skills right away.
We offer a single free retake of the the class within a year.
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.
Learn practical skills by working on real projects with instructor guidance and lectures to strengthen and improve your skill.
Quickly build webpages with Bootstrap's pre-made grid-system & components without having to code as much CSS
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
No. We provide computers (Mac or PC) with a coding editor installed. Choose your operating system at checkout.
Students should feel comfortable coding HTML and CSS equivalent to our Web Development Level 2 class.
This course does not qualify for payments plans or student financing. See our Payment Plan FAQ to find related programs that qualify.
You may attend this training virtually (online) at the scheduled time the course is offered (New York, Eastern Time).
You have some options:
Select up to two courses and tap Compare selected courses to view a side-by-side comparison of Flexbox, Grid, & Bootstrap with your selected courses.
Learn to create the front end of websites by coding HTML, CSS, and JavaScript. Build websites using WordPress, code emails with HTML & CSS, and use Git to track changes and collaborate with other developers.
Become a well-rounded Web Designer and start creating your portfolio. Learn to design webpages and emails, code them with HTML, CSS, and JavaScript, as well as build websites with WordPress.
Become a Full Stack Developer and work on all parts of a web application, from its front end appearance to its back end data management. Companies need full stack developers for their diversity of talents.
Purchase group class vouchers at a discount for our regularly-scheduled group classes in NYC, or create a custom training program at your offices.
We’ve trained thousands of companies!
Let us create the perfect program for your team.
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.”
Let’s look at what each of these three things is, when to use them, and how they relate to each other.
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.
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.
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.
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.
The first installment is due one week before the first class. Subsequent installments are spread out evenly across the duration of the course.
Installments | |
---|---|
10% non-refundable deposit | |
$650.00 | Total You Pay |
See the Installment plan FAQ for more information.
School Director, Instructor, & Senior Course Developer
Dan Rodney has been a designer and web developer for over 20 years. He creates coursework for Noble Desktop and teaches classes. In his spare time Dan also writes scripts for InDesign (Make Book Jacket, Proper Fraction Pro, and more). Dan teaches just about anything web, video, or print related: HTML, CSS, JavaScript, Figma, Adobe XD, Sketch, After Effects, Premiere Pro, Photoshop, Illustrator, InDesign, and more. You can find Dan on Twitter, LinkedIn, Facebook, and at danrodney.com.
Program Director & Senior Instructor
Brian is an experienced instructor, curriculum developer, and professional web developer, who in recent years has served as Director for a coding bootcamp in New York. Brian joined Noble Desktop in 2022 and is a lead instructor for HTML & CSS, JavaScript, Python for Data Science, and Excel. Prior to that, he taught Python Data Science and Machine Learning as an Adjunct Professor of Computer Science at Westchester County College.Entrepreneur & Founder of Noble Desktop
Scott Carson started Noble Desktop in 1990, and has been involved with computer graphics since 1986. He began teaching at Parsons School of Design in 1991, and has been training designers, professionals, and career-changers ever since. Scott is also a horse racing aficionado, and runs the largest horse racing contest on the internet, PublicHandicapper.com
Senior Instructor
Brian is an experienced instructor, curriculum developer, and professional web developer. Brian joined Noble Desktop in 2022 and is a lead instructor for MongoDB, Express, React, and Node. Prior to that, he taught SQL at Per Scholas.