First Bootstrap page - Interactive Code Practice

Practice - 5 Tasks

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

The correct link to include Bootstrap CSS is the official CDN URL. This ensures Bootstrap styles are applied.

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

The class btn-primary styles the button with Bootstrap's primary color.

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

The class container creates a responsive fixed-width container that centers content horizontally.

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

Using col-md-6 for both columns divides the row into two equal halves on medium and larger screen sizes.

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

The card header uses card-header, the body uses card-body, and the button uses btn-primary for styling.

Practice

1. What is the main purpose of including Bootstrap CSS in your HTML page?

easy

A. To create backend server logic

B. To apply ready-made styles and layout to your webpage quickly

C. To make your page load faster by compressing images

D. To add interactive JavaScript features only

Solution

1. Step 1: Understand Bootstrap CSS role

   Bootstrap CSS provides pre-built styles and layout helpers to style HTML elements easily.

2. Step 2: Differentiate CSS from JS and backend

   CSS controls appearance, not backend logic or image compression, and JS adds interactivity but is separate.

3. Final Answer:

   To apply ready-made styles and layout to your webpage quickly -> Option B

4. Quick Check:

   Bootstrap CSS = ready styles [OK]

Hint: Bootstrap CSS styles your page fast, not backend or speed [OK]

Common Mistakes:

• Confusing Bootstrap CSS with JavaScript functionality
• Thinking Bootstrap compresses images
• Assuming Bootstrap handles backend logic

2. Which of the following is the correct way to include Bootstrap CSS from a CDN in your HTML <head>?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct HTML tag for CSS

   CSS files are included using the <link> tag with rel="stylesheet" attribute.

2. Step 2: Check the CDN URL and tag correctness

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> uses <link> with correct href to Bootstrap CSS CDN, others misuse tags or attributes.

3. Final Answer:

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

4. Quick Check:

   CSS uses <link rel="stylesheet"> [OK]

Hint: Use for CSS files [OK]

Common Mistakes:

• Using <script> tag for CSS files
• Using <style> tag with src attribute
• Wrong attribute values like rel="script"

3. What will be the visual result of this HTML snippet using Bootstrap?

<div class="container">
  <button class="btn btn-primary">Click Me</button>
</div>

medium

A. A blue styled button labeled 'Click Me' centered with some padding

B. A plain button with no special styling

C. A red button labeled 'Click Me' with no padding

D. An error because 'btn-primary' is not a valid class

Solution

1. Step 1: Understand Bootstrap container and button classes

   The 'container' class adds horizontal padding and centers content. 'btn btn-primary' styles a button with Bootstrap's primary blue color and padding.

2. Step 2: Predict visual output

   The button will appear blue with white text, some padding, and be inside a padded container.

3. Final Answer:

   A blue styled button labeled 'Click Me' centered with some padding -> Option A

4. Quick Check:

   btn-primary = blue button style [OK]

Hint: btn-primary means a blue Bootstrap button [OK]

Common Mistakes:

• Thinking btn-primary is red
• Ignoring container padding effect
• Assuming no styling without extra CSS

4. Identify the error in this Bootstrap page snippet:

<html>
<head>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
  <div class="container">
    <button class="btn btn-primary">Submit</button>
  </div>
</body>
</html>

medium

A. Container class should be 'container-fluid' instead

B. Button class 'btn-primary' is misspelled

C. Missing closing tag for <button>

D. Bootstrap CSS file path is likely incorrect or missing CDN link

Solution

1. Step 1: Check Bootstrap CSS inclusion

   The link uses 'bootstrap.min.css' without a full path or CDN, which may cause the file not to load if not locally present.

2. Step 2: Verify other elements

   Button class spelling is correct, button tag is properly closed, and 'container' is valid Bootstrap class.

3. Final Answer:

   Bootstrap CSS file path is likely incorrect or missing CDN link -> Option D

4. Quick Check:

   Missing or wrong CSS link breaks Bootstrap styles [OK]

Hint: Always use full CDN URL or correct local path for Bootstrap CSS [OK]

Common Mistakes:

• Assuming local CSS file always exists
• Confusing container and container-fluid classes
• Overlooking missing or wrong file paths

5. You want to create a simple Bootstrap page with a navigation bar and a button below it. Which of the following code snippets correctly sets up the basic Bootstrap page structure including CSS and JS from CDN?

hard

A.

Bootstrap Page

Navbar

Click Me

B.

Bootstrap

Navbar

Click

C.

Page

Nav

Press

D.

Bootstrap

Navbar

Click

Solution

1. Step 1: Check for complete Bootstrap setup

   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Page</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav> <div class="container mt-3"> <button class="btn btn-success">Click Me</button> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> includes DOCTYPE, language, charset, viewport meta, Bootstrap CSS and JS from CDN, and uses proper navbar and button classes.

2. Step 2: Compare other options for missing parts

   <html> <head> <title>Bootstrap</title> <link rel="stylesheet" href="bootstrap.css"> </head> <body> <nav class="navbar"> <a href="#">Navbar</a> </nav> <button class="btn btn-primary">Click</button> </body> </html> lacks DOCTYPE, viewport meta, and uses local CSS without JS. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page</title> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#">Nav</a> </nav> <button class="btn btn-danger">Press</button> </body> </html> misses viewport meta and uses only JS without CSS. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> </nav> <button class="btn btn-warning">Click</button> </body> </html> misses Bootstrap JS and container for spacing.

3. Final Answer:

   Option A has the correct full Bootstrap page structure with CSS and JS from CDN -> Option A

4. Quick Check:

   Complete Bootstrap page = <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Page</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav> <div class="container mt-3"> <button class="btn btn-success">Click Me</button> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> [OK]

Hint: Full Bootstrap page needs DOCTYPE, meta, CSS and JS CDN links [OK]

Common Mistakes:

• Omitting viewport meta tag
• Not including Bootstrap JS bundle
• Using local files without confirming availability