Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge & Quiz | Setting Up Environment
Bootstrap: Building Stylish Websites

Challenge & QuizChallenge & Quiz

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.

image
html

index.html

css

index.css

js

index.js

  • 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

css

index.css

js

index.js

Quiz

image
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?

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

Select the correct answer

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

Select the correct answer

Which command is used to install Bootstrap via NPM?

Select the correct answer

Everything was clear?

Section 2. Chapter 4
course content

Course Content

Bootstrap: Building Stylish Websites

Challenge & QuizChallenge & Quiz

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.

image
html

index.html

css

index.css

js

index.js

  • 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

css

index.css

js

index.js

Quiz

image
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?

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

Select the correct answer

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

Select the correct answer

Which command is used to install Bootstrap via NPM?

Select the correct answer

Everything was clear?

Section 2. Chapter 4
some-alt