Appliquez la notion

Pour réaliser cet exercice, vous aurez besoin de travailler sur l'environnement de travail :

Question

Téléchargez et incluez les scripts compilés nécessaires au bon fonctionnement de Bootstrap dans le fichier suivant.

Ces éléments sont disponibles sur le site de Bootstrap.

1
<!DOCTYPE html>
2
<html lang="fr">
3
<head>
4
    <meta charset="utf-8"/>
5
    <title>Mon espace personnel</title>
6
</head>
7
<body>
8
<main class="container">
9
   		<header class="bg-info border border-dark">
10
        <h1>Mon espace personnel</h1>
11
        <p>
12
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
13
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
14
        </p>
15
    </header>
16
</main>
17
</body>
18
</html>

Voici le résultat attendu, si la librairie est correctement installée :

Solution

Voici ce que vous avez dû obtenir :

1
<!DOCTYPE html>
2
<html lang="fr">
3
<head>
4
    <meta charset="utf-8"/>
5
    <title>Mon espace personnel</title>
6
    <!-- Bootstrap CSS -->
7
<link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">
8
</head>
9
<body>
10
<main class="container">
11
      <header class="bg-info border border-dark">
12
        <h1>Mon espace personnel</h1>
13
        <p>
14
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
15
            dolore magna aliqua.
16
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
17
        </p>
18
    </header>
19
</main>
20
<!-- Bootstrap JavaScript -->
21
<script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
22
</body>
23
</html>