CSS Frameworks like Bootstrap and Foundation (v1)


You’ve spent plenty of time building up a great base of knowledge of HTML and CSS and even design. But it’s still a pain in the butt to lay out everything manually and keep repeating yourself all the time when writing your code. If only there was a way to save yourself all kinds of effort…

Frameworks to the rescue! Frameworks like Twitter Bootstrap and Zurb Foundation have done all the heavy lifting of packaging up commonly used CSS code and even icons and interactions (like menu dropdowns) for you. All you have to do is understand how they expect you to lay out your site and which classes they use to designate particular batches of styles.

Frameworks let you focus more on building great sites and less on how they are actually coded up on the front end. They are great for learning and great for rapidly producing sites. Once you’ve taken a tour through Bootstrap, you’ll start looking at every site you see (especially startup ones) and notice an awful lot of similarities… one of the downsides of the frameworks.

Learning Objectives

  • What are CSS frameworks?
  • How do frameworks actually work?
  • How do you interact with the framework to get the look you want?
  • What is Twitter Bootstrap?
  • What is Zurb Foundation?
  • What is TailwindCSS?
  • What other frameworks can you find out there?
  • What are the disadvantages of using frameworks?


  1. Read From A List Apart, Frameworks for Designers

  2. Read From A List Apart, Building Twitter Bootstrap

  3. Watch this next video on Bootstrap 5 and learn all about the framework and its practical uses:

Duration: 85 minutes

  1. Choosing Bootstrap or Foundation

  2. Browse through Getting Started with Foundation for an idea of how that framework operates. Observe the similarities and differences between that and Bootstrap.

  3. Take a brief look at TailwindCSS for a more unique and modern approach to CSS frameworks.

Additional Resources


Download this HTML template and try to make it look like the screenshot below, just by using Bootstrap 5 classes.

Once finished, upload the code in a private GitHub repository named sha-quiz-css-bootstrap5 and submit the URL in the Quiz below.

UPDATED: 30.10.2020