In this first lesson, we'll start by defining what is Bootstrap. We then show the advantages as well as the limits of this framework so that you immediately have an idea of the cases where it will be interesting to use it and those where it will be necessary to favor other solutions. We will finally see the new features brought by version 5 of Bootstrap which is the version with which we will be working and will take the opportunity to set up our working environment.

What is Bootstrap?

Bootstrap is a CSS framework. A framework corresponds to a set of libraries grouped together for a specific purpose and having internal rules that users must follow. In other words, and to put it very simply, Bootstrap is a collection of CSS and JavaScript files that work together and that we can use to create complex designs in a relatively simple way. The Bootstrap framework is therefore a set of CSS and JavaScript files which contain predefined rules and which define components. These rule sets are enclosed in classes so we will only have to use the classes we are interested in in order to apply a set of styles to a particular HTML element. In addition, Bootstrap also uses JavaScript files and in particular external JavaScript libraries like jQuery or Popper to define entire components like navigation bars, modal windows, etc. which we will also be able to directly implement.

Why use Bootstrap?

Bootstrap has three major notable advantages over other solutions available to us, which are limited to writing all of your code yourself or using another CSS framework or library.

These advantages are:

A saving of development time which can be significant; A certain robustness in the overall architecture of the code; A framework owned by a large corporation (Twitter). Let's detail. The primary idea of a framework is usually to save users time by offering them a set of pre-designed elements. Bootstrap is no exception to this rule. Once you have mastered the framework, you will be able to create complex and robust designs in no time by using the appropriate Bootstrap classes. Bootstrap will simplify all this for us since the creators of this framework have already done the work for us by providing us with a set of rules and tools that (when used properly) will allow us to create 100% responsive pages. and compatible with the vast majority of versions of different browsers. Finally, by using Bootstrap rather than another framework you have a certain guarantee of security in relation to the evolution of the framework over time since Bootstrap is owned by Twitter which is a relatively solid tech company in principle.

Getting started with Bootstrap

The simple way to start easily with Bootstrap is to integrate online bootstrap css and js:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

But there is another easier way, it is to download the Bootstrap Starter template: https://getbootstrap.com/docs/5.0/getting-started/introduction/

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
</body>
</html>

Let's test Bootstrap on an example

We will now see how to use Bootstrap to create very nice buttons. For this go to : https://getbootstrap.com/docs/5.0/ and type button in the search area. You will see the many pretty buttons delivered with their codes:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Younes Derfoufi
my-courses.net

Leave a Reply