# Introduction to Bootstrap

# What you already know

You already have some experience with Bootstrap Grid from your work in the Webdesign Essentials course. Here are some key points that you should already know:

Bootstrap is a popular front-end framework that's great for building mobile-first web pages.
Bootstrap excels at creating designs that adjust to various screen sizes seamlessly.

READING TIP

If needed, you can look back at Webdesign Essentials > (Bootstrap) Grid (opens new window) for a refresher.

# What is new?

There's more than just Bootstrap Grid!

Components: Bootstrap offers a range of pre-designed components such as navbars, modals, and cards.
Speed of Development: Bootstrap's ready-made components and utilities expedite the development process greatly.
Customizability: Bootstrap is flexible, allowing you to tailor it to your project's specific needs.

A simple example of a Bootstrap component (a button):

# Linking Bootstrap

You can add Bootstrap to your HTML in two ways:

Use a CDN (Content Delivery Network) to link to the CSS and JS files
Download the CSS and JS files and host them locally

Bootstrap v5.x

The version of Bootstrap at the time of writing as displayed on their website (opens new window) is 5.3.2.
Be mindful of the version while Googling for Bootstrap-related information, as the differences between the major versions (v3.x.x, v4.x.x, and v5.x.x) can be huge!

# Local link

Here's an example of importing Bootstrap from our local files:

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="path/to/your/local/bootstrap.css">
</head>
<body>
    <button class="btn btn-primary">Click me!</button>

    <!-- Add Bootstrap JS -->
    <script src="path/to/your/local/bootstrap.bundle.min.js"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

Start your own Bootstrap project

If you want to start a fresh Bootstrap project without using our starting files, you have two options:

You can choose to link to the precompiled CDN version (opens new window)
You can download the Bootstrap Sass source files (opens new window), this is the option required this semester to change Bootstrap at its core.

# CDN link

WARNING

In this course, we will adapt Bootstrap to our needs using Sass. Therefore, we should never include Bootstrap via the CDN link this semester, as it will prevent us from customizing it to our liking.

For context, here's an example of using Bootstrap via a CDN:

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-primary">Click me!</button>

    <!-- Add Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13