0
0
Bootsrapmarkup~30 mins

Column sizing (col-1 through col-12) in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Bootstrap Column Sizing with col-1 through col-12
📖 Scenario: You are creating a simple webpage layout using Bootstrap. You want to arrange content in columns that adjust their width based on the Bootstrap grid system. This helps your page look neat and organized on different screen sizes.
🎯 Goal: Build a responsive Bootstrap grid with a single row containing three columns. Each column uses different col- classes to control their width. This will show how column sizing works from col-1 to col-12.
📋 What You'll Learn
Use Bootstrap 5 grid system
Create a container with a row
Add three columns inside the row
Use col-4, col-6, and col-2 classes for the columns
Add visible background colors to each column for clarity
Include responsive meta tag and Bootstrap CSS link
💡 Why This Matters
🌍 Real World
Bootstrap grid system is widely used to create responsive layouts that adapt to different screen sizes, making websites look good on phones, tablets, and desktops.
💼 Career
Understanding Bootstrap column sizing is essential for front-end developers and web designers to build clean, flexible, and responsive web pages quickly.
Progress0 / 4 steps
1
Set up the basic HTML structure with Bootstrap
Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag. Inside the <head>, link the Bootstrap 5 CSS from the official CDN. In the <body>, add a <div> with class container. This will hold your grid.
Bootsrap
Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section to use Bootstrap styles.

2
Add a Bootstrap row inside the container
Inside the <div class="container">, add a <div> with class row. This row will hold your columns.
Bootsrap
Need a hint?

The Bootstrap grid requires a row container to hold columns. Add a <div> with class row inside the container.

3
Add three columns with different col sizes
Inside the <div class="row">, add three <div> elements with classes col-4, col-6, and col-2 respectively. Add text inside each column: "Column 1", "Column 2", and "Column 3".
Bootsrap
Need a hint?

Use three <div> elements inside the row. Assign the classes col-4, col-6, and col-2 to control their widths.

4
Add background colors to columns for clarity
Add inline Bootstrap background color utility classes to each column: bg-primary for the first column, bg-success for the second, and bg-warning for the third. Also add text-white to the first two columns for better contrast and p-3 padding to all columns.
Bootsrap
Need a hint?

Use Bootstrap utility classes for background colors and padding. Add text-white to columns with dark backgrounds for readability.