Text wrapping and overflow in Bootsrap - Mini Project: Build & Apply

Text Wrapping and Overflow with Bootstrap

📖 Scenario: You are creating a simple webpage section that shows a product description inside a box. Sometimes the description is very long and might overflow the box or break the layout.Your goal is to use Bootstrap classes to control how the text wraps and what happens if it is too long.

🎯 Goal: Build a webpage section with a fixed-width box that contains a long product description. Use Bootstrap classes to make sure the text wraps nicely and does not overflow outside the box.

📋 What You'll Learn

Use a Bootstrap container and row for layout

Create a fixed-width box using Bootstrap classes

Add a long text paragraph inside the box

Apply Bootstrap text wrapping and overflow classes to control text display

💡 Why This Matters

🌍 Real World

Controlling text wrapping and overflow is important in real websites to keep content readable and layouts neat, especially on different screen sizes.

💼 Career

Web developers often use Bootstrap utilities to quickly manage text and container behavior without writing custom CSS, improving productivity and consistency.

1

Create the basic HTML structure with Bootstrap

Write the basic HTML5 structure with lang="en", charset="UTF-8", and viewport meta tags. Include the Bootstrap 5 CSS CDN link inside the <head>. Inside the <body>, add a <div> with class container and inside it a <div> with class row. This sets up the page layout using Bootstrap.

Bootsrap

Hint

Remember to include the Bootstrap CSS link from a CDN inside the <head> section.

2

Add a fixed-width box with a long text paragraph

Inside the <div class="row">, add a <div> with Bootstrap classes col-12 col-md-6 border p-3 to create a box that is full width on small screens and half width on medium and larger screens. Inside this box, add a <p> element with the exact text: "This is a very long product description that might overflow or wrap depending on the container width and CSS rules applied."

Bootsrap

    
    
    Text Wrapping and Overflow
    


    
        
            
        
    

Hint

Use Bootstrap grid classes col-12 col-md-6 for responsive width and add border and p-3 for visible box and padding.

3

Apply Bootstrap text wrapping and overflow classes

Add the Bootstrap class text-wrap to the <p> element to ensure the text wraps inside the box. Also add the class text-truncate to the same <p> element to demonstrate text truncation with ellipsis if the text is too long. Keep both classes on the paragraph.

Bootsrap

    
    
    Text Wrapping and Overflow
    


    
        
            
                
                This is a very long product description that might overflow or wrap depending on the container width and CSS rules applied.
            
        
    

Hint

Add both text-wrap and text-truncate classes inside the class attribute of the paragraph.

4

Make the box width fixed and add overflow hidden

Add the Bootstrap class w-100 to the box <div> with classes col-12 col-md-6 border p-3 to make it full width inside its column. Also add the class overflow-hidden to the same <div> to hide any overflow content. This completes the text wrapping and overflow control.

Bootsrap

    
    
    Text Wrapping and Overflow
    


    
        
            
            
                This is a very long product description that might overflow or wrap depending on the container width and CSS rules applied.
            
        
    

Hint

Add both w-100 and overflow-hidden classes inside the class attribute of the box div.

Practice

1. Which Bootstrap class allows text to wrap normally within its container?

easy

A. .text-break

B. .text-nowrap

C. .text-truncate

D. .text-wrap

Solution

1. Step 1: Understand text wrapping classes in Bootstrap

   Bootstrap provides .text-wrap to allow normal text wrapping inside containers.

2. Step 2: Identify the class that enables wrapping

   .text-nowrap prevents wrapping, and .text-truncate truncates text with ellipsis. So, .text-wrap is the correct choice.

3. Final Answer:

   .text-wrap -> Option D

4. Quick Check:

   Text wrapping = .text-wrap [OK]

Hint: Wrap text? Use .text-wrap class [OK]

Common Mistakes:

• Confusing .text-nowrap as wrapping text
• Thinking .text-truncate wraps text
• Assuming .text-break is for wrapping

2. Which of the following is the correct Bootstrap class to prevent text from wrapping?

easy

A. .text-wrap

B. .text-nowrap

C. .text-truncate

D. .text-break

Solution

1. Step 1: Recall Bootstrap classes for text wrapping control

   .text-nowrap is designed to stop text from wrapping onto the next line.

2. Step 2: Confirm the class that disables wrapping

   .text-wrap allows wrapping, .text-truncate truncates text, so .text-nowrap is the correct class to prevent wrapping.

3. Final Answer:

   .text-nowrap -> Option B

4. Quick Check:

   No wrap = .text-nowrap [OK]

Hint: Stop wrapping? Use .text-nowrap class [OK]

Common Mistakes:

• Using .text-wrap to stop wrapping
• Confusing .text-truncate with no wrap
• Assuming .text-break stops wrapping

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

<div class='text-truncate' style='width: 8rem;'>This is a very long text that should be cut off.</div>

medium

A. The text will be cut off with an ellipsis (...) at the end within 8rem width.

B. The text will stay on one line and overflow outside the box.

C. The full text will wrap into multiple lines within 8rem width.

D. The text will break words to fit inside the box without ellipsis.

Solution

1. Step 1: Understand .text-truncate behavior

   The .text-truncate class in Bootstrap truncates text that overflows its container and adds an ellipsis.

2. Step 2: Analyze the style and effect

   The container width is limited to 8rem, so the long text will not fit and will be cut off with an ellipsis on one line.

3. Final Answer:

   Text cut off with ellipsis within 8rem width -> Option A

4. Quick Check:

   .text-truncate = ellipsis cut off [OK]

Hint: Use .text-truncate for ellipsis on overflow [OK]

Common Mistakes:

• Expecting text to wrap with .text-truncate
• Thinking text overflows visibly without cut off
• Confusing .text-truncate with .text-nowrap

4. You want to prevent text wrapping but also show an ellipsis if the text is too long. Which Bootstrap classes combination is correct?

medium

A. .text-nowrap .text-truncate

B. .text-wrap .text-truncate

C. .text-nowrap .text-wrap

D. .text-truncate .text-wrap

Solution

1. Step 1: Identify classes for no wrap and truncation

   .text-nowrap stops wrapping, and .text-truncate adds ellipsis for overflow.

2. Step 2: Combine classes correctly

   Using .text-nowrap .text-truncate together prevents wrapping and truncates overflow with ellipsis.

3. Final Answer:

   .text-nowrap .text-truncate -> Option A

4. Quick Check:

   No wrap + ellipsis = .text-nowrap .text-truncate [OK]

Hint: Combine .text-nowrap and .text-truncate for no wrap + ellipsis [OK]

Common Mistakes:

• Using .text-wrap with .text-truncate (conflicting)
• Not combining classes, only using one
• Mixing order incorrectly

5. You have a responsive card with a title that might be very long. You want the title to stay on one line, show ellipsis if too long, and be accessible for screen readers. Which Bootstrap and HTML approach is best?

hard

A. <h5 class='text-nowrap text-truncate' style='max-width: 100%;'>Long title</h5>

B. <h5 class='text-wrap'>Long title</h5>

C. <h5 class='text-nowrap text-truncate' style='max-width: 15rem;' title='Long title'>Long title</h5>

D. <h5 class='text-truncate' style='max-width: 15rem;'>Long title</h5>

Solution

1. Step 1: Ensure no wrapping and truncation

   Use .text-nowrap to prevent wrapping and .text-truncate to add ellipsis for overflow.

2. Step 2: Set a max-width and add accessibility

   Limit width with max-width: 15rem; so truncation works. Add title attribute to show full text on hover for screen readers and keyboard users.

3. Final Answer:

   <h5 class='text-nowrap text-truncate' style='max-width: 15rem;' title='Long title'>Long title</h5> -> Option C

4. Quick Check:

   No wrap + ellipsis + accessibility = <h5 class='text-nowrap text-truncate' style='max-width: 15rem;' title='Long title'>Long title</h5> [OK]

Hint: Use .text-nowrap, .text-truncate, max-width, and title for accessibility [OK]

Common Mistakes:

• Not setting max-width so truncation fails
• Missing title attribute for accessibility
• Using .text-wrap which allows wrapping