Bootsrapmarkup~30 mins

Equal-width columns in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Create a Bootstrap Layout with Equal-width Columns

📖 Scenario: You are building a simple webpage layout using Bootstrap. You want to create a row with three columns that all have the same width, regardless of the content inside them.

🎯 Goal: Build a Bootstrap grid with one row containing three equal-width col columns.

📋 What You'll Learn

Use Bootstrap 5 classes

Create a div with class container as the main wrapper

Inside the container, create a div with class row

Inside the row, create exactly three div elements with class col

Each column should contain some placeholder text like 'Column 1', 'Column 2', and 'Column 3'

💡 Why This Matters

🌍 Real World

Creating equal-width columns is a common task in building responsive web pages, especially for layouts like feature sections, pricing tables, or galleries.

💼 Career

Understanding Bootstrap grid basics is essential for front-end developers and web designers to build clean, responsive layouts quickly.

Progress0 / 4 steps

Set up the basic HTML structure with Bootstrap

Create a basic HTML5 document with lang="en". Inside the <head>, add the required meta tags for charset UTF-8 and viewport for responsive design. Also, include the Bootstrap 5 CSS CDN link. In the <body>, add a div with class container to hold your content.

Bootsrap

Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section and add a div with class container inside the body.

Add a Bootstrap row inside the container

Inside the existing div with class container, add a div with class row. This will hold the columns.

Bootsrap




    
    
    
    Equal-width Columns

Need a hint?

The row class groups columns horizontally. Add a div with class row inside the container.

Add three equal-width columns inside the row

Inside the div with class row, add three div elements each with class col. Inside each column, add the text Column 1, Column 2, and Column 3 respectively.

Bootsrap




    
    
    
    Equal-width Columns

Need a hint?

Use three div elements with class col inside the row. Add the exact text inside each column.

Add a responsive meta tag and a page title

Make sure the <head> section includes a <title> tag with the text Equal-width Columns and the viewport meta tag for responsive design is present.

Bootsrap




    
    


    
        
            Column 1
            Column 2
            Column 3

Need a hint?

The viewport meta tag helps the page scale on mobile devices. The title appears in the browser tab.