0
0
Bootsrapmarkup~10 mins

First Bootstrap page - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to add the Bootstrap CSS link in the head section.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Bootstrap Page</title>
  <link rel="stylesheet" href="[1]">
</head>
<body>
  <h1>Hello, Bootstrap!</h1>
</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
Bstyle.css
Cbootstrap.js
Dhttps://example.com/style.css
Attempts:
3 left
💡 Hint
Common Mistakes
Using a JavaScript file instead of CSS
Linking to a local file that doesn't exist
Using a wrong URL that doesn't load Bootstrap
2fill in blank
medium

Complete the code to add a Bootstrap button with primary style.

Bootsrap
<button type="button" class="btn [1]">Click me</button>
Drag options to blanks, or click blank then click option'
Abtn-primary
Bbtn-danger
Cbtn-secondary
Dbtn-link
Attempts:
3 left
💡 Hint
Common Mistakes
Using a button class that doesn't exist
Forgetting the btn base class
Using a class for a different button style
3fill in blank
hard

Fix the error in the Bootstrap container class to center content.

Bootsrap
<div class="[1]">
  <p>Centered content</p>
</div>
Drag options to blanks, or click blank then click option'
Acontainer-fluid
Bcontainer
Ccontainer-fixed
Dcontainer-center
Attempts:
3 left
💡 Hint
Common Mistakes
Using container-fluid which is full width
Using made-up class names
Forgetting to add the container class
4fill in blank
hard

Fill both blanks to create a responsive grid with two columns on medium screens.

Bootsrap
<div class="container">
  <div class="row">
    <div class="col-md-[1]">Column 1</div>
    <div class="col-md-[2]">Column 2</div>
  </div>
</div>
Drag options to blanks, or click blank then click option'
A6
B12
C4
D3
Attempts:
3 left
💡 Hint
Common Mistakes
Using columns that don't add up to 12
Using col-12 which makes full width
Using different column sizes that don't balance
5fill in blank
hard

Fill all three blanks to create a Bootstrap card with a header, body text, and a button.

Bootsrap
<div class="card" style="width: 18rem;">
  <div class="card-[1]">Card Header</div>
  <div class="card-[2]">
    <p class="card-text">This is some text inside the card body.</p>
    <a href="#" class="btn btn-[3]">Go somewhere</a>
  </div>
</div>
Drag options to blanks, or click blank then click option'
Aheader
Bbody
Cprimary
Dfooter
Attempts:
3 left
💡 Hint
Common Mistakes
Mixing up card body and header classes
Using wrong button color classes
Forgetting to add the btn class