Bootsrapmarkup~20 mins

Container types (container, container-fluid) in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Bootstrap Container Types: container vs container-fluid

📖 Scenario: You are building a simple webpage layout using Bootstrap. You want to understand how to use Bootstrap's container classes to control the width and responsiveness of your page content.

🎯 Goal: Create a webpage with two sections: one using a fixed-width container and one using a full-width container. This will help you see the difference between container and container-fluid classes in Bootstrap.

📋 What You'll Learn

Use Bootstrap 5 CSS via CDN

Create a fixed-width container section with a heading and paragraph

Create a full-width container-fluid section with a heading and paragraph

Use semantic HTML5 elements

Ensure the page is responsive on different screen sizes

💡 Why This Matters

🌍 Real World

Web developers often need to control the width and responsiveness of page content. Bootstrap containers help create consistent layouts that adapt to different screen sizes.

💼 Career

Understanding Bootstrap container types is essential for front-end developers working on responsive websites and web applications.

Progress0 / 4 steps

Set up the basic HTML structure with Bootstrap CSS

Create a basic HTML5 page 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 Container Types

Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section for styling.

Add a fixed-width Bootstrap container section

Inside the <body>, add a <section> with the class container. Inside this section, add an <h2> with the text Fixed-width Container and a <p> with the text This container has a fixed max width and is centered..

Bootsrap




    
    
    Bootstrap Container Types

Need a hint?

Use the container class on the <section> and add the heading and paragraph inside it.

Add a full-width Bootstrap container-fluid section

Below the fixed-width container section, add another <section> with the class container-fluid. Inside it, add an <h2> with the text Full-width Container and a <p> with the text This container spans the entire width of the viewport..

Bootsrap




    
    
    Bootstrap Container Types
    




    Fixed-width Container
    This container has a fixed max width and is centered.

Need a hint?

Use the container-fluid class on the new <section> and add the heading and paragraph inside it.

Add background colors and padding for visual clarity

Add Bootstrap utility classes to the two sections for background color and padding. Add bg-light p-3 classes to the fixed-width container section and bg-secondary text-white p-3 classes to the full-width container-fluid section.

Bootsrap




    
    
    Bootstrap Container Types
    




    
    Fixed-width Container
    This container has a fixed max width and is centered.



    
    Full-width Container
    This container spans the entire width of the viewport.

Need a hint?

Add the Bootstrap utility classes directly inside the class attribute of each <section>.