# Introduction to Bootstrap 5.3

# What you already know

You already have some experience with Bootstrap grid and utility classes 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 responsive designs that adapt seamlessly to different screen sizes.
Bootstrap provides utility classes for common CSS tasks, such as adding margins, padding, and colors.
These classes allow you to style elements quickly without writing custom CSS.

READING TIP

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

# What is New?

While the grid system is a core feature of Bootstrap, it also offers a wide range of pre-designed components to enhance your web development process.

Components: Bootstrap offers a range of pre-designed components such as:
- buttons (opens new window)
- navbars (opens new window)
- modals (opens new window)
- cards (opens new window)
- and many more!
Speed of Development: Bootstrap's ready-made components and utilities significantly speed up the development process.
Customizability: Bootstrap is flexible, allowing you to tailor it to your project's specific needs using CSS variables.

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 5.3.3

The version of Bootstrap at the time of writing as displayed on their website (opens new window) is 5.3.3.
Be mindful of the version when searching for Bootstrap-related information, as the differences between major versions (3.x.x, 4.x.x, and 5.x.x) can be significant.

# 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.min.css">
</head>
<body>
<main class="container my-4">
    <h1 class="text-center">Bootstrap Buttons</h1>
    <button class="btn btn-primary">I am a primary button</button>
    <button class="btn btn-success">I am a success button</button>
</main>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# CDN link

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.3/dist/css/bootstrap.min.css">
</head>
<body>
<main class="container my-4">
    <h1 class="text-center">Bootstrap Buttons</h1>
    <button class="btn btn-primary">I am a primary button</button>
    <button class="btn btn-success">I am a success button</button>
</main>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Local vs CDN

When adding Bootstrap to your project, you have two main options: using a CDN or hosting the files locally. Each approach has its own advantages and trade-offs, which we will explore below.

# Client Perspective

Local: When using local files, the browser downloads the CSS and JS files from your own server.
This means that the user has to download these files with every page request.
CDN: When using a CDN, the browser downloads the CSS and JS files from a CDN server (like cdnjs.com (opens new window)).
These files are often cached in the browser or are already available in the cache of other visited websites, so they might not need to be downloaded again. This could increase the loading time for the user.

# Editor Perspective (PhpStorm)

Local: When you use local files, your editor can easily navigate to the source file and code completion works out of the box.
CDN: When you use a CDN link, the source files are not available for the editor. This could make working with Bootstrap a little harder (e.g: code completion won't work out of the box).

TIP

For small projects or quick prototypes, using a CDN is often the easiest option.
For larger projects or when working offline, hosting files locally may be more practical.

# bootstrap.css vs bootstrap.min.css

bootstrap.css: This is the unminified version of the Bootstrap CSS file.
- It's human-readable, with proper indentation and comments.
- This version is great for development and debugging, as it makes it easier to understand and modify the code.
bootstrap.min.css: This is the minified version of the Bootstrap CSS file.
- It has been compressed, with all unnecessary characters (spaces, comments, new lines) removed.
- This version is much smaller in size, resulting in faster loading times for the user's browser.
- This version is better suited for the production environment.

Getting Started with 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
You can download the Bootstrap CSS and JavaScript files and host them locally.