0
0
Bootsrapmarkup~10 mins

Importing Bootstrap in projects - Interactive Code Practice

Choose your learning style9 modes available
Practice - 5 Tasks
Answer the questions below
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.
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.
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.
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.
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.