Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Challenge & Quiz: Setting Up Bootstrap | Setting Up Environment
Bootstrap Essentials for Modern Websites

book
Challenge & Quiz: Setting Up Bootstrap

Note

All challenges will follow the same format as shown below:

  • You will be presented with the task that needs to be completed;

  • Following that, you will encounter a code block where you need to implement changes based on the task;

  • Click the Run Code button to preview the live page;

  • Beneath the code block, you will find two buttons: Hint and Solution;

    • The Hint button provides guidance for the task;

    • The Solution button reveals the correct solution.

  • It's recommended that you attempt the task on your own before resorting to the Solution button.

Task

You've been provided with a basic HTML code featuring a button element, currently styled with default browser styles. While the button element includes class names derived from Bootstrap, no changes are visible on the live page because Bootstrap hasn't been integrated into the project. Your task is to add the appropriate links to connect Bootstrap to the project.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge 1</title>
<!-- Include Bootstrap CSS link below -->

</head>
<body>
<button type="button" class="btn btn-success">Success</button>
<!-- Include Bootstrap JavaScript link below -->
</body>
</html>
  • To add the link to the Bootstrap CSS, use the following code: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">.

  • For the Bootstrap JavaScript link, use this code: <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge 1</title>
<!-- Include Bootstrap CSS link below -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<button type="button" class="btn btn-success">Success</button>
<!-- Include Bootstrap JavaScript link below -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Quiz

1. What is one of the methods to integrate Bootstrap into a project?

2. What does CDN stand for in the context of Bootstrap integration?

3. Which command is used to install Bootstrap via NPM?

question mark

What is one of the methods to integrate Bootstrap into a project?

Select the correct answer

question mark

What does CDN stand for in the context of Bootstrap integration?

Select the correct answer

question mark

Which command is used to install Bootstrap via NPM?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 4

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

We use cookies to make your experience better!
some-alt