0
0
Bootsrapmarkup~20 mins

First Bootstrap page - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Bootstrap Beginner Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ rendering
intermediate
2:00remaining
What will this Bootstrap page display?
Look at the HTML code below. What will you see in the browser when this page loads?
Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Test</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="text-primary">Welcome to Bootstrap!</h1>
    <p class="lead">This is your first Bootstrap page.</p>
  </div>
</body>
</html>
AA red heading and a normal paragraph with no special styling.
BA blue heading saying 'Welcome to Bootstrap!' and a slightly larger paragraph below it.
CA plain black heading and paragraph with no Bootstrap styles applied.
DAn error message because Bootstrap CSS is missing.
Attempts:
2 left
💡 Hint
Look at the class names and the Bootstrap CSS link in the head.
❓ selector
intermediate
1:30remaining
Which Bootstrap class adds spacing around an element?
You want to add margin space around a
using Bootstrap. Which class should you use?
Am-3
Bp-3
Ctext-center
Dbg-primary
Attempts:
2 left
💡 Hint
Bootstrap uses 'm' for margin and 'p' for padding.
❓ layout
advanced
2:00remaining
How does Bootstrap's grid system layout behave on small screens?
Given this Bootstrap grid code, how will the columns appear on a small screen (less than 576px wide)?
Column 1
Column 2
Column 3
AAll three columns stack vertically, each taking full width.
BAll three columns appear side by side in one row, each taking one-third width.
COnly the first two columns appear side by side; the third stacks below.
DColumns disappear because 'col-sm-4' only works on medium screens.
Attempts:
2 left
💡 Hint
Bootstrap grid classes with 'sm' apply from small screens and up.
❓ accessibility
advanced
1:30remaining
Which attribute improves accessibility for a Bootstrap modal?
You have a Bootstrap modal dialog. Which attribute should you add to the modal's main
to help screen readers?
Atabindex="-1"
Bdata-toggle="modal"
Crole="button"
Daria-labelledby="modalTitle"
Attempts:
2 left
💡 Hint
Screen readers need to know the modal's title for context.
🧠 Conceptual
expert
1:30remaining
What is the main benefit of using Bootstrap's container class?
Why do Bootstrap pages often wrap content inside a
element?
AIt disables scrolling on the page to keep content fixed.
BIt automatically adds a background color and border to the page content.
CIt centers the content and adds responsive horizontal padding to keep content aligned on all screen sizes.
DIt converts all text inside to uppercase for better readability.
Attempts:
2 left
💡 Hint
Think about how content looks on different screen sizes.