Importing Bootstrap in projects - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add Bootstrap CSS from a CDN in the <head> section.

Bootsrap

<head>
  <link rel="stylesheet" href="[1]">
</head>

Drag options to blanks, or click blank then click option'

Ahttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

Bhttps://example.com/style.css

Cbootstrap.js

Dstyles.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using a JavaScript file URL instead of CSS.

Using a local file name instead of CDN URL.

The correct link is the official Bootstrap CSS CDN URL to load Bootstrap styles.

2fill in blank

medium

Complete the code to add Bootstrap JavaScript bundle from a CDN before the closing tag.

Bootsrap

<body>
  <!-- page content -->
  <script src="[1]"></script>
</body>

Drag options to blanks, or click blank then click option'

Aapp.js

Bhttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

Chttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js

Djquery.min.js

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS URL in a script tag.

Using jQuery which Bootstrap 5 does not require.

The Bootstrap JavaScript bundle includes necessary JS and Popper.js for components to work.

3fill in blank

hard

Fix the error in the code to correctly import Bootstrap CSS in the <head>.

Bootsrap

<head>
  <link rel="stylesheet" href=[1]>
</head>

Drag options to blanks, or click blank then click option'

Ahttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

B"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"

C'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'

Dbootstrap.min.css

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the URL.

Using single quotes inconsistently.

The href attribute value must be inside quotes for valid HTML syntax.

4fill in blank

hard

Fill both blanks to correctly import Bootstrap CSS and JS from CDN in a minimal HTML page.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="[1]">
  <title>Bootstrap Test</title>
</head>
<body>
  <h1>Hello, Bootstrap!</h1>
  <script src="[2]"></script>
</body>
</html>

Drag options to blanks, or click blank then click option'

Ahttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

Bhttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js

Cstyles.css

Dapp.js

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing local file names with CDN URLs.

Using JS URL in the CSS link or vice versa.

The CSS link and JS script must use the official Bootstrap CDN URLs for proper loading.

5fill in blank

hard

Fill all three blanks to create a responsive Bootstrap button with correct imports.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="[1]">
  <title>Bootstrap Button</title>
</head>
<body>
  <button type="button" class="btn btn-[2]">Click me</button>
  <script src="[3]"></script>
</body>
</html>

Drag options to blanks, or click blank then click option'

Ahttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

Bprimary

Chttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js

Dsecondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using local file names instead of CDN URLs.

Choosing a button style class that is not a Bootstrap color.

The CSS and JS URLs must be the official Bootstrap CDN links. The button color class btn-primary is a common Bootstrap style.

Practice

1. What is the correct way to include Bootstrap CSS in your HTML project?

easy

A. Use a <link> tag inside the <head> section

B. Use a <script> tag inside the <head> section

C. Use a <style> tag inside the <body> section

D. Use a <script> tag before the closing </html> tag

Solution

1. Step 1: Understand where CSS files go

   CSS files are linked in the <head> section to load styles before the page shows.

2. Step 2: Use the correct HTML tag for CSS

   The <link> tag is used to include external CSS files like Bootstrap.

3. Final Answer:

   Use a <link> tag inside the <head> section -> Option A

4. Quick Check:

   Bootstrap CSS = <link> in <head> [OK]

Hint: CSS files always use <link> in <head> [OK]

Common Mistakes:

• Using <script> tag for CSS
• Placing CSS link in <body>
• Not including Bootstrap CSS at all

2. Which of the following is the correct syntax to add Bootstrap JavaScript in your HTML file?

easy

A. <script src="bootstrap.bundle.min.js"></script>

B. <script href="bootstrap.bundle.min.js"></script>

C. <script src="bootstrap.min.css"></script>

D. <link rel="stylesheet" href="bootstrap.bundle.min.js">

Solution

1. Step 1: Identify the correct tag for JavaScript

   JavaScript files are included with the <script> tag using the src attribute.

2. Step 2: Check the file name and attribute

   The correct file is bootstrap.bundle.min.js and it must be linked with src, not href.

3. Final Answer:

   <script src="bootstrap.bundle.min.js"></script> -> Option A

4. Quick Check:

   Bootstrap JS uses <script src="..."> [OK]

Hint: JavaScript files use

Common Mistakes:

• Using href instead of src for scripts
• Linking CSS file with <script>
• Using <link> tag for JavaScript

3. Given this HTML snippet, what will be the visual result in the browser?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Test</title>
</head>
<body>
  <button class="btn btn-primary">Click Me</button>
</body>
</html>

medium

A. A plain button with default browser style

B. A red styled button labeled 'Click Me'

C. No button visible due to missing CSS

D. A blue styled button labeled 'Click Me'

Solution

1. Step 1: Check Bootstrap CSS inclusion

   The <link> tag includes Bootstrap CSS from CDN, so styles apply.

2. Step 2: Understand Bootstrap button classes

   The classes btn btn-primary style the button with Bootstrap's primary blue color.

3. Final Answer:

   A blue styled button labeled 'Click Me' -> Option D

4. Quick Check:

   Bootstrap button with btn-primary = blue button [OK]

Hint: btn-primary class makes button blue [OK]

Common Mistakes:

• Ignoring the Bootstrap CSS link
• Confusing btn-primary with btn-danger
• Expecting default browser button style

4. You added Bootstrap JavaScript with this tag:
<script href="bootstrap.bundle.min.js"></script>
Why does Bootstrap's interactive features not work?

medium

A. Because Bootstrap JavaScript needs no script tag

B. Because the href attribute is incorrect for scripts

C. Because JavaScript must be added in the <head> section

D. Because the file name is wrong

Solution

1. Step 1: Identify correct attribute for script source

   The <script> tag uses src to link files, not href.

2. Step 2: Understand effect of wrong attribute

   Using href means the browser does not load the JavaScript file, so features fail.

3. Final Answer:

   Because the href attribute is incorrect for scripts -> Option B

4. Quick Check:

   Script files use src, not href [OK]

Hint: Scripts need src attribute, not href [OK]

Common Mistakes:

• Using href instead of src in <script>
• Placing script in wrong HTML section
• Assuming JavaScript loads without script tag

5. You want to create a responsive webpage using Bootstrap. Which is the best way to import Bootstrap to ensure both styles and interactive components work properly?

hard

A. Add Bootstrap JS only with <script> in <head>, CSS is optional

B. Add Bootstrap CSS and JS both inside <head> using <link> tags

C. Add Bootstrap CSS with <link> in <head> and Bootstrap JS with <script src="..."></script> before </body>

D. Add Bootstrap CSS with <style> tag and JS with <script href="..."> before </body>

Solution

1. Step 1: Correctly include Bootstrap CSS

   Bootstrap CSS must be linked with <link> in the <head> for styles to load early.

2. Step 2: Correctly include Bootstrap JavaScript

   Bootstrap JS should be added with <script src="..."></script> before closing </body> for proper loading and performance.

3. Final Answer:

   Add Bootstrap CSS with <link> in <head> and JS with <script src="..."> before </body> -> Option C

4. Quick Check:

   CSS in head + JS before body end = proper Bootstrap import [OK]

Hint: CSS in head, JS before for Bootstrap [OK]

Common Mistakes:

• Placing JS in head with wrong attributes
• Skipping CSS link tag
• Using href instead of src for JS