Sizing utilities (width, height) in Bootsrap - Mini Project: Build & Apply

Sizing Utilities with Bootstrap

📖 Scenario: You are building a simple webpage with boxes that have different widths and heights. You want to use Bootstrap's sizing utilities to control the size of these boxes easily.

🎯 Goal: Create three colored boxes using Bootstrap classes. Each box should have a specific width and height using Bootstrap's width utilities and inline styles.

📋 What You'll Learn

Use Bootstrap 5 sizing utility classes for width and inline styles for height

Create three div elements with background colors: red, green, and blue

Set the first box to width 25% and height 100px

Set the second box to width 50% and height 150px

Set the third box to width 75% and height 200px

Use semantic HTML and ensure the boxes are visible on the page

💡 Why This Matters

🌍 Real World

Sizing utilities help quickly control the size of elements on a webpage without writing custom CSS. This is useful for building responsive layouts and consistent designs.

💼 Career

Front-end developers often use Bootstrap or similar frameworks to speed up styling tasks. Knowing sizing utilities helps create flexible and accessible UI components efficiently.

1

Create the HTML skeleton with three boxes

Create a basic HTML5 page with a head and body. Inside the body, add three div elements with the classes bg-danger, bg-success, and bg-primary respectively. These will be the red, green, and blue boxes.

Bootsrap

    
    
    Sizing Utilities
    


    

Need a hint?

Remember to include the Bootstrap CSS link in the head so the colors show up.

2

Add width utility classes to the boxes

Add Bootstrap width utility classes to the three div elements: add w-25 to the red box, w-50 to the green box, and w-75 to the blue box.

Bootsrap

    
    
    Sizing Utilities
    


    
    
    
    

Need a hint?

Use the Bootstrap classes w-25, w-50, and w-75 to set widths to 25%, 50%, and 75% respectively.

3

Set fixed heights using inline styles

Bootstrap height utility classes, such as h-25, h-50, and h-75, set the height as a percentage of the parent container. To achieve fixed pixel heights, add inline styles to the three div elements: style="height: 100px;" for the red box, style="height: 150px;" for the green box, and style="height: 200px;" for the blue box.

Bootsrap

    
    
    Sizing Utilities
    


    
    
    
    

Need a hint?

Bootstrap height utilities use percentages of the parent, so use inline styles to set fixed pixel heights for the boxes.

4

Add spacing and accessibility improvements

Add the Bootstrap class mb-3 to each box to add margin below them for spacing. Also, add role="img" and aria-label attributes describing each box color for accessibility: aria-label="Red box", aria-label="Green box", and aria-label="Blue box" respectively.

Bootsrap

    
    
    Sizing Utilities
    


    
    
    
    

Need a hint?

Use mb-3 to add margin below each box and add role="img" with descriptive aria-label for screen readers.