Introduction to Bootstrap

What is Bootstrap?

So, what exactly is Bootstrap? It's a front-end framework that helps you build responsive and mobile-friendly websites. And the best part? It does it in a way that's easy for you to understand.

Why use Bootstrap?

Bootstrap uses a grid-like approach to give your website responsiveness. This means that your website will look good on all kinds of devices, whether it's a desktop computer, a tablet, or a phone. This is super important because more and more people are using their phones to browse the web.

Not only does Bootstrap make your website look good on all devices, but it also makes it easier for you to build the website in the first place. Bootstrap provides you with templates for common website elements, so you don't have to write as much CSS and JavaScript. This saves you time and makes your life a lot easier.

What does the Bootstrap framework contain?

Bootstrap is made up of CSS and JavaScript code that you can use to build your website. When you use Bootstrap, you don't have to write all the code yourself. Instead, you can use the pre-made templates and classes to quickly add elements to your website.

The CSS code in Bootstrap provides you with pre-made styles for common website elements. For example, it has styles for headings, lists, images, buttons, and more. By using these styles, you don't have to write your own CSS to make your website look good. Instead, you can use the classes that Bootstrap provides and add them to your HTML elements.

Here's an example of how you would use a Bootstrap class to style a heading:

<h1 class="display-4">Hello, World!</h1>

In this example, the display-4 class is from Bootstrap and it styles the heading to be larger and more prominent.

The JavaScript code in Bootstrap provides you with additional functionality for your website. For example, it provides code for creating modals, tabs, dropdowns, and more. These are elements that would be more difficult to create from scratch, so Bootstrap makes it easier for you by providing the code.

How to Include Bootstrap in a Web page?

The current version of Bootstrap is 5, and it's even better than the previous versions. Bootstrap 5 is faster, and has better forms, new utility classes, improved documentation, and more. In this course, we'll be using Bootstrap 5 to build our website.

There are two popular ways to use Bootstrap in your web application: by downloading the compiled CSS and JavaScript files or by using a CDN (Content Delivery Network).

Download compiled files

If you want you can download either compiled CSS and JS files or source files from the official website.

It's more convenient for you as a beginner if you download the Compiled CSS and JS versions because the setup process is more straightforward. In contrast, if you download the 2nd option, you will need additional tools, such as Sass Compiler and Autoprefixer. So we'll go with the first option.

After downloading the zip file from the above link, unzip the folder and copy the content of the CSS folder into your website's CSS directory in your local host or the hosting provider.

After that, in the header of your HTML document, link the CSS files as shown below:

<link rel=”stylesheet” href=”css/bootstrap.min.css” type=”text/css”>

You can do the above procedure to Bootstrap's Javascript files as well.

<script type=”text/javascript” src=”js/bootstrap.min.js”></<script>

Also, make sure to include the CDN link to the latest version of the jQuery library before the above line of code:

<script type=”text/javascript” src=”https://code.jquery.com/jquery-latest.min.js”></script>

It’s a best practice to load these files before the close of the <./body> tag.

Include Bootstrap from a CDN

As you know already, there are Content Delivery Networks(CDNs) that host bootstrap CSS and JavaScript files. So, according to Bootstrap's official website, you can find the links to CDN files from its official download page.

For CSS:

Copy and paste the CDN link from the above page to your HTML page's head tag:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

For Javascript:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

As for Bootstrap 5, you don't need to include the jquery library as version 5 onwards Bootstrap supports JavaScript. However, you need to include the link to the popper.min.js file for certain functionalities.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>

So overall for the code examples in this code, you can have the following HTML template.

Our code samples will come between <body></body> sections.