Importing Bootstrap in projects - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How to include Bootstrap CSS in an HTML file?

Which of the following HTML lines correctly includes Bootstrap CSS from a CDN in your project?

A <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

B <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.js"></script>

C <style src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"></style>

D <link href="bootstrap.min.css" rel="script">

💡 Hint

Bootstrap CSS is included with a tag and rel="stylesheet" attribute.

The correct way to include Bootstrap CSS is using a <link> tag with rel="stylesheet" and the href pointing to the Bootstrap CSS file.

Option A includes Bootstrap JavaScript, not CSS. Option A uses <style> incorrectly. Option A uses wrong attributes.

📝 Syntax

intermediate

Correct way to import Bootstrap JS bundle with Popper

Which script tag correctly imports Bootstrap's JavaScript bundle including Popper from a CDN?

A <script href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

B <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

C <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

D <link rel="script" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">

💡 Hint

Bootstrap bundle includes Popper and is loaded with a