Bootstrap
Workplace Context
As a developer, you will often work in environments where rapid prototyping and design consistency are essential. Bootstrap is one of the most widely used CSS frameworks, known for its comprehensive grid system, pre-designed components, and utility classes that allow developers to create responsive, mobile-first websites quickly. This lesson will guide you through Bootstrap’s core features, enabling you to build responsive layouts and use its component library effectively.
Learning Objectives
By the end of this lesson, you will be able to:
- Describe the benefits of using Bootstrap in web development.
- Implement Bootstrap’s grid system to create responsive layouts.
- Use Bootstrap’s components and utilities to build consistent UI elements.
- Customize Bootstrap to match a specific design or brand style.
What is Bootstrap?
Bootstrap is a CSS framework that provides a set of styles, components, and JavaScript plugins for building responsive, mobile-first websites. It includes a powerful grid system, ready-to-use components like buttons, cards, and modals, and utilities for common design patterns. Bootstrap helps teams deliver consistent and professional-looking websites quickly, especially useful in team-based environments.
Key Benefits of Bootstrap
- Responsive Grid System: Bootstrap’s grid system makes it easy to create layouts that adapt to various screen sizes.
- Reusable Components: Buttons, forms, navbars, and more are pre-designed for quick integration.
- Consistent Styling: Ensures a cohesive look and feel across projects.
- Customizable: Use Bootstrap’s configuration to apply branding, colors, and styles that match your project’s needs.
Setting Up Bootstrap
You can add Bootstrap to your project in various ways:
-
Using the CDN: The fastest way to start is to include Bootstrap’s CDN links in the
<head>section of your HTML.<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -
Installing via npm: For larger projects, you may want to install Bootstrap via npm for better control over versioning.
npm install bootstrap -
Importing into Sass: You can customize Bootstrap by importing it into a Sass file, allowing you to modify variables and include only the components you need.
Difference between Bootstrap and Traditional CSS
Here is the same example used in the previous lesson on Tailwind CSS:
Now, let us compare that to using Bootstrap utilities:
Very similar to Tailwind, but with some key differences!
Research: Bootstrap Utilities
We will take a few minutes to explore the Bootstrap documentation, focusing on utilities.
Begin by navigating to the utilities section of the documentation, and take a look through some of the available utilities’ syntax and behavior.
Make note of any utilities that you might use frequently; you will likely need them for upcoming exercises and assignments!
Do not venture outside of the utilities section just yet — we will cover things like layout and components soon.
Key Differences between Bootstrap and Tailwind
Notice the presence of actual inline styles in the previous example.
Bootstrap’s approach is built on a responsive grid system. This means that most of its sizing and positioning options are relative to other elements.
For example, the utility classes for width vary as shown below:
- Tailwind:
max-w-12is equivalent tomax-width: 3rem, a fixed width. - Bootstrap:
mw-100is equivalent tomax-width: 100%, a responsive width.
As you grow more familiar with the Bootstrap grid and flexbox systems, you will uncover the pros and cons of using this approach.
Working with Bootstrap’s Grid System
Bootstrap’s grid system is based on a 12-column layout and is responsive by default, making it simple to build layouts that adjust to different screen sizes. The grid system uses containers, rows, and columns to align and organize content.
The grid also includes breakpoints — utility additions that allow you to control how columns respond to the size of the user’s screen.
- Extra small (
xs) - Small (
sm) - Medium (
md) - Large (
lg) - Extra large (
xl) - Extra extra large (
xxl)
Example: Bootstrap’s Grid
The following code demonstrates Bootstrap’s responsive grid layout. You can see examples like this and more by visiting the Bootstrap documentation .
col-6: The column spans 6 out of 12 columns on small screens.col-md-4: On medium screens and larger, the column spans 4 out of 12 columns.
Example: Responsive Grid
At specific breakpoints, the responsive columns below will stack vertically instead of being horizontally aligned.
Research: Bootstrap Grid
Take another few minutes to explore the Bootstrap documentation, focusing on layout.
Begin by navigating to the grid section of the documentation, and take a look through some of the available layout classes’ syntax and behavior.
Make note of classes that affect grid layout, like alignment, spacing, and responsiveness. Utilizing the grid effectively is key to creating optimal layouts.
Do not venture outside of the layout section just yet — we will cover components soon.
Bootstrap Components
Bootstrap includes a variety of pre-designed components that make it easy to build common UI elements like buttons, cards, modals, and navigation bars.
Many components include bundled JavaScript functionality, which makes them particularly useful. In order for your elements to “hook” into Bootstrap’s JavaScript, you must use the correct classes and other attributes on each element.
One of the most common attributes you will see used is the data-bs- attribute such as data-bs-toggle and data-bs-parent, which help define the targets for certain Bootstrap JavaScript functions.
This will all become clear with the following examples.
Example: Accordion
Accordions are vertically-collapible elements that help to keep content condensed.
Try clicking on the various accordion items below to see the result. Then, inspect the code to determine how this component is put together.
Example: Cards
Cards are simply stylized content containers that serve a variety of purposes.
Note how minimal the markup for cards is compared to accordions, because cards do not inherently include any functional components.
Example: Carousels
Carousels are like slideshows for showing multiple pieces of information in a sequence, typically used for images. Try clicking through the carousel below.
Example: Navigation
Navigation bars are present in almost every application ever.
Wouldn’t it be nice if Bootstrap gave us flexible options for creating good ones?
And, it’s responsive! Try opening this example in a new tab and adjusting the window size.
More Components
Each of these components is flexible and extensible, able to be manipulated to fit your specific needs. There are also many more components that we did not demonstrate here.
To examine the full list of Bootstrap components and all of their various options, make sure to reference the Bootstrap documentation .
Being able to navigate documentation quickly and efficiently to uncover the information you need is one of the hallmarks of a good developer!
Customizing Bootstrap with Sass
Bootstrap allows for customization using Sass, a CSS preprocessor. By modifying variables, you can change Bootstrap’s colors, spacing, fonts, and more to match your design requirements.
Example: Changing the Primary Color
-
Install Sass and Bootstrap in your project.
npm install sass bootstrap -
Create a custom SCSS file and import Bootstrap.
// custom.scss $primary: #ff5733; // Custom primary color @import "bootstrap"; -
Compile the SCSS file:
npx sass custom.scss custom.css -
Link the compiled CSS in your HTML file.
<link href="custom.css" rel="stylesheet">
You can now use Bootstrap classes, but with a customized color palette.
Knowledge Check
What is the primary benefit of using Bootstrap’s grid system?
- Select an answer to view feedback.
Which Bootstrap class would you use to create a button with primary styling?
- Select an answer to view feedback.
How can you customize Bootstrap’s colors?
- Select an answer to view feedback.
Summary
In this lesson, you learned the basics of using Bootstrap for efficient front-end development. Bootstrap’s grid system, reusable components, and customization options make it a powerful tool for creating responsive, professional websites quickly. By mastering Bootstrap, you will be able to build visually consistent and adaptable designs across a variety of projects.