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
    


    

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
    


    
    
    
    

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
    


    
    
    
    

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
    


    
    
    
    

Hint

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

Practice

1. Which Bootstrap class sets an element's width to 50% of its parent container?

easy

A. w-50

B. h-50

C. w-100

D. h-100

Solution

1. Step 1: Understand width and height prefixes

   Bootstrap uses w- for width and h- for height classes.

2. Step 2: Identify the class for 50% width

   The class w-50 sets width to 50%, while h-50 sets height to 50%.

3. Final Answer:

   <code>w-50</code> -> Option A

4. Quick Check:

   Width 50% = w-50 [OK]

Hint: Width classes start with w-, height with h- [OK]

Common Mistakes:

• Confusing width (w-) with height (h-)
• Using w-100 instead of w-50
• Assuming h-50 sets width

2. Which of the following is the correct Bootstrap class to set an element's height to 100% of the viewport height?

easy

A. h-vh-100

B. h-100

C. h-100vh

D. vh-100

Solution

1. Step 1: Recall Bootstrap height classes

   Bootstrap uses h-100 to set height to 100% of the parent container.

2. Step 2: Viewport height in Bootstrap

   Bootstrap does not have a class vh-100 to set height to 100vh. To set height to viewport height, custom CSS or utility classes are needed.

3. Final Answer:

   <code>h-100</code> -> Option B

4. Quick Check:

   Height 100% of parent = h-100 [OK]

Hint: Use h-100 for height 100% of parent [OK]

Common Mistakes:

• Using h-vh-100 or h-100vh which are invalid
• Assuming vh-100 is a Bootstrap class
• Confusing viewport height with parent height

3. What will be the width of the <div class='w-75'></div> element relative to its parent container?

medium

A. 25% of the parent container

B. 50% of the parent container

C. 100% of the parent container

D. 75% of the parent container

Solution

1. Step 1: Understand the meaning of w-75

   The class w-75 sets the element's width to 75% of its parent container.

2. Step 2: Compare options with the class effect

   Only 75% of the parent container correctly states 75% width relative to the parent.

3. Final Answer:

   75% of the parent container -> Option D

4. Quick Check:

   w-75 means width 75% [OK]

Hint: Class w-XX means width XX% [OK]

Common Mistakes:

• Mixing up 75% with 25%
• Thinking w-75 means height
• Assuming w-75 means 100% width

4. You want to set an element's height to 25% using Bootstrap classes, but your code <div class='w-25'></div> does not work as expected. What is the error?

medium

A. Using width class w-25 instead of height class h-25

B. Missing a custom CSS for height

C. Bootstrap does not support height utilities

D. Class w-25 sets height, so no error

Solution

1. Step 1: Identify the class used

   The class w-25 sets width to 25%, not height.

2. Step 2: Correct the class for height

   To set height to 25%, use h-25 instead of w-25.

3. Final Answer:

   Using width class w-25 instead of height class h-25 -> Option A

4. Quick Check:

   Height needs h-25, not w-25 [OK]

Hint: Use h-XX for height, w-XX for width [OK]

Common Mistakes:

• Confusing width and height classes
• Assuming w-25 affects height
• Thinking Bootstrap lacks height utilities

5. You want a responsive box that is 100% wide on small screens but only 50% wide on medium and larger screens using Bootstrap sizing utilities. Which class combination achieves this?

hard

A. h-100 w-md-50

B. w-50 w-md-100

C. w-100 w-md-50

D. w-100 h-md-50

Solution

1. Step 1: Understand responsive sizing classes

   Bootstrap uses breakpoint prefixes like md to apply styles at medium screen sizes and above.

2. Step 2: Choose classes for width at different breakpoints

   w-100 sets width 100% on all screens, but w-md-50 overrides width to 50% on medium and larger screens.

3. Step 3: Verify other options

   Options B, C, and D either reverse the sizes or mix height and width incorrectly.

4. Final Answer:

   <code>w-100 w-md-50</code> -> Option C

5. Quick Check:

   Responsive width: w-100 then w-md-50 [OK]

Hint: Use breakpoint prefixes like w-md-50 for responsive widths [OK]

Common Mistakes:

• Mixing height and width classes
• Reversing breakpoint order
• Not using breakpoint prefixes for responsiveness