Component-based framework philosophy in Bootsrap - Mini Project: Build & Apply

Building a Simple Bootstrap Card Component

📖 Scenario: You are creating a small webpage section to showcase a product using Bootstrap components. This will help you understand how Bootstrap uses components to build UI pieces that are reusable and easy to style.

🎯 Goal: Build a Bootstrap card component that displays a product image, title, description, and a button. This will demonstrate the component-based philosophy of Bootstrap.

📋 What You'll Learn

Use Bootstrap 5 classes to create a card component

Include an image at the top of the card

Add a card title and text inside the card body

Add a button styled with Bootstrap inside the card body

Use semantic HTML and ensure the card is responsive

💡 Why This Matters

🌍 Real World

Bootstrap cards are widely used in websites to display products, articles, or user profiles in a clean and consistent way.

💼 Career

Understanding Bootstrap components is essential for front-end developers to quickly build responsive and accessible user interfaces.

1

Create the HTML skeleton with Bootstrap CSS link

Write the basic HTML5 structure with lang="en", meta charset="UTF-8", and viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Add an empty <body> section.

Bootsrap

    
    
    Bootstrap Card Component


    

Hint

Remember to include the Bootstrap CSS link inside the <head> so you can use Bootstrap classes.

2

Add a Bootstrap card container inside the body

Inside the <body>, add a <div> with the Bootstrap class card and set its style attribute to width: 18rem; to fix the card width.

Bootsrap

    
    
    
    Bootstrap Card Component


    
        
    

Hint

Use a div with class card and add inline style width: 18rem; to set the card width.

3

Add an image, card body with title, text, and button inside the card

Inside the div with class card, add an <img> with class card-img-top and src set to https://via.placeholder.com/286x180. Then add a div with class card-body. Inside this card body, add an <h5> with class card-title and text Product Title, a <p> with class card-text and text This is a simple product description., and a <a> tag with classes btn btn-primary, href #, and text Buy Now.

Bootsrap

    
    
    
    Bootstrap Card Component


    
        
        
    

Hint

Use Bootstrap classes card-img-top for the image, card-body for the container, and inside it use card-title, card-text, and btn btn-primary for the button.

4

Add accessibility and responsive container

Wrap the card div inside a main element with class container mt-5 for spacing and responsiveness. Add an alt attribute to the image with the text Product image for accessibility.

Bootsrap

    
    
    
    Bootstrap Card Component


    
        
    

Hint

Wrap the card inside a main with Bootstrap classes container mt-5 for spacing and responsiveness. Make sure the image has an alt attribute describing it.

Practice

1. What is the main idea behind a component-based framework like Bootstrap?

easy

A. Avoiding any reusable code

B. Breaking a webpage into small, reusable parts

C. Using only JavaScript for styling

D. Writing all styles in one big CSS file

Solution

1. Step 1: Understand the concept of components

   Components are small parts that can be reused to build a webpage easily.

2. Step 2: Compare options with this idea

   Only Breaking a webpage into small, reusable parts describes breaking a webpage into reusable parts, which matches the component philosophy.

3. Final Answer:

   Breaking a webpage into small, reusable parts -> Option B

4. Quick Check:

   Component-based = reusable parts [OK]

Hint: Components mean reusable parts of a webpage [OK]

Common Mistakes:

• Thinking components mean writing all styles in one file
• Confusing components with JavaScript-only code
• Believing components avoid reuse

2. Which of the following is a correct way to use a Bootstrap button component in HTML?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall Bootstrap button syntax

   Bootstrap buttons use the btn class plus a style class like btn-primary.

2. Step 2: Check each option for correct classes and tags

   <button class="btn btn-primary">Click me</button> uses <button> with btn btn-primary, which is correct. Others use wrong classes or tags.

3. Final Answer:

   <button class="btn btn-primary">Click me</button> -> Option D

4. Quick Check:

   Bootstrap buttons need btn + style class [OK]

Hint: Bootstrap buttons always use class 'btn' plus style [OK]

Common Mistakes:

• Using incorrect class names like 'button-primary'
• Using invalid HTML tags like <btn>
• Swapping class order or missing 'btn'

3. What will be the visual result of this Bootstrap code?

<div class="alert alert-success" role="alert">Success!</div>

medium

A. A green box with the text 'Success!'

B. A red box with the text 'Success!'

C. Plain text 'Success!' with no box

D. A blue box with the text 'Success!'

Solution

1. Step 1: Identify the Bootstrap classes used

   The classes alert and alert-success create a styled alert box with green color.

2. Step 2: Understand the visual meaning

   alert-success means a green alert box showing success message.

3. Final Answer:

   A green box with the text 'Success!' -> Option A

4. Quick Check:

   alert-success = green alert box [OK]

Hint: alert-success always shows a green alert box [OK]

Common Mistakes:

• Confusing alert-success with alert-danger (red)
• Expecting no box or plain text
• Mixing up alert colors

4. Identify the error in this Bootstrap navbar code:

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

medium

A. Incorrect class name for navbar-brand

B. Missing data-bs-toggle attribute on button

C. Missing aria-controls attribute on button

D. Missing id on collapse div

Solution

1. Step 1: Check button attributes for toggling navbar

   The button has data-bs-toggle and data-bs-target, but lacks aria-controls which is needed for accessibility.

2. Step 2: Verify other attributes and classes

   Classes and id are correct; only aria-controls is missing on the button.

3. Final Answer:

   Missing aria-controls attribute on button -> Option C

4. Quick Check:

   Navbar toggle needs aria-controls for accessibility [OK]

Hint: Navbar toggler button needs aria-controls attribute [OK]

Common Mistakes:

• Ignoring accessibility attributes
• Thinking data-bs-toggle is missing
• Confusing id and class names

5. You want to create a reusable Bootstrap card component that shows a title and text. Which approach best follows the component-based philosophy?

hard

A. Use Bootstrap card classes and create a reusable template or component in your code

B. Create a custom CSS class and write card HTML manually each time

C. Write the card HTML once and copy-paste it everywhere

D. Avoid using Bootstrap and write all styles inline

Solution

1. Step 1: Understand component-based philosophy

   It encourages reusable parts that can be used multiple times without rewriting code.

2. Step 2: Evaluate options for reusability and Bootstrap usage

   Use Bootstrap card classes and create a reusable template or component in your code uses Bootstrap classes and creates a reusable template/component, which is best practice.

3. Final Answer:

   Use Bootstrap card classes and create a reusable template or component in your code -> Option A

4. Quick Check:

   Reusable templates + Bootstrap classes = best practice [OK]

Hint: Reuse Bootstrap classes with templates/components [OK]

Common Mistakes:

• Copy-pasting code instead of reusing components
• Writing custom CSS unnecessarily
• Avoiding Bootstrap and inline styles