📓 1.1.4.4 Introduction to Bootstrap
Even if you don't pursue a career in web design, you'll need to know enough about CSS to apply the correct classes to your code to integrate a designer's CSS. You'll also need to know how to make small changes to CSS as required by your project. This is why it's so important for both web developers and designers to understand CSS basics.
Additionally, you might want to create a website that looks nice without spending a lot of time designing the user interface. In that instance, front-end frameworks are very useful. In this lesson we'll learn what a front-end framework is, how they work, and we'll begin familiarizing ourselves with Bootstrap, one of the most popular front-end frameworks for design.
In this lesson
- What a front-end framework is and why developers use one
- What Bootstrap provides out of the box (components, responsive layout, styling)
- How Bootstrap fits into the rest of this section
AI Support: New to Bootstrap or front-end frameworks? You can ask AI to explain terminology in plain language. Use AI to understand what Bootstrap is and how class names work—not to generate full page layouts or complete exercises for you.
Example prompts:
- Weak: "Build my Bootstrap page."
- Strong: "Can you explain what a front-end framework like Bootstrap does in plain language—without writing HTML for me?"
Before asking, check: Do I have the license for this? See Using AI Responsibly at Fidgetech and How to Ask for Help.
Front-End Frameworks
When we use the term front-end in web development, we're referring to the portion of a website or application that's run in the browser. This includes menus, navbars, links, and CSS designs. This is in contrast to back-end code, which doesn't run in the browser. A browser application can make a request to a server where back-end code is stored.
The front-end can also include business logic, especially if the application doesn't have a separate back-end (such as a database). The term framework refers to a foundation of pre-built tools, software, code, and other resources we can use to create a project more easily than if we created it from scratch.
Front-end frameworks are pre-built code that assist us in creating the front-end of our website. There are frameworks more focused on design like Bootstrap, which we'll discuss in a moment. There are also frameworks that are focused on JavaScript code like React and Angular.
Bootstrap
Bootstrap is one of the most popular, widely used front-end design frameworks. It allows developers to quickly set up professional looking websites with minimal effort. It was originally built at Twitter to address inconsistencies in front-end design. It was later released to the public in 2011.
Bootstrap is essentially a big package containing all the code and CSS necessary to make a wide variety of commonly-used components like navigation bars, forms, headings, tables, buttons, and more. It also has built-in media queries so any Bootstrap elements we use in our own site will automatically re-style and resize themselves to best fit the user's viewport.
You can read more about Bootstrap on their website, here.
Websites Built with Bootstrap
Check out the following link to see some example sites built with Bootstrap:
We're going to start integrating Bootstrap into our sites, too. This will both further our knowledge of CSS, allow us to quickly create polished, professional-looking sites with far less effort. In the next lesson, we'll walk through how to download and install Bootstrap into a project.
Try asking AI: "What does it mean that Bootstrap is a CSS framework? Can you explain with a simple analogy?"
After reading AI's response, explain the concept back in your own words before moving on.
Checkpoint
Before moving on, you should be able to:
- Describe what a front-end framework is
- Explain why Bootstrap is widely used for layout and components
- Name a few types of elements Bootstrap provides (navbars, buttons, grids, etc.)
If you're unsure, re-read the section above or ask AI: "Can you explain the difference between front-end and back-end in web development—without writing code for me?"