Offset columns in Bootsrap - Mini Project: Build & Apply

Offset Columns with Bootstrap

📖 Scenario: You are creating a simple webpage layout using Bootstrap. You want to position a content box not at the very left but slightly shifted to the right using Bootstrap's offset columns feature.

🎯 Goal: Build a responsive Bootstrap grid with a single row and one column that is offset by 3 columns on medium screens and larger.

📋 What You'll Learn

Use Bootstrap 5 classes

Create a container with a row

Add one column with class col-md-6

Offset the column by 3 columns on medium screens using offset-md-3

Include some visible content inside the column

💡 Why This Matters

🌍 Real World

Offset columns help position content nicely on a webpage, for example centering a form or creating space on the left side.

💼 Career

Web developers use Bootstrap offsets to build responsive layouts quickly without writing custom CSS.

1

Create the Bootstrap container and row

Write the HTML code to create a <div> with class container and inside it a <div> with class row.

Bootsrap

Need a hint?

Use <div class="container"> and inside it <div class="row">.

2

Add a column with class col-md-6

Inside the row div, add a <div> with class col-md-6 to create a column that takes 6 columns width on medium screens.

Bootsrap

Need a hint?

Use <div class="col-md-6"></div> inside the row.

3

Offset the column by 3 columns on medium screens

Add the class offset-md-3 to the existing column <div> with class col-md-6 to shift it 3 columns to the right on medium screens.

Bootsrap

Need a hint?

Add offset-md-3 to the column's class attribute.

4

Add visible content inside the offset column

Inside the div with classes col-md-6 offset-md-3, add a <p> tag with the text "This column is offset by 3 columns.".

Bootsrap

Need a hint?

Use a <p> tag with the exact text inside the column div.