Bootstrap Day 1: BS5 Intro, Containers, Grid Basics

Bootstrap Day 1: BS5 Introduction, Containers, Grid Basics

Niotechone Marketing Team
November 25, 2025
11:30 am

Introduction

Welcome to the amazing world of Bootstrap 5! If you’ve ever been on a professional-looking site and thought to yourself, “How do they get everything to line up so perfectly and look good no matter what size the device?” chances are the answer is Bootstrap.

The most widely used front-end framework in the world, Bootstrap, makes it easy and quick to create mobile-first, responsive websites. Consider it a vast toolkit that includes ready-to-use styles, pre-built components, and a robust grid system that makes designing expert layouts a breeze.

In this tutorial, you’ll learn:

What is Bootstrap, and how do you add it to your projects?
The difference between containers shows which one to use for layouts.
Bootstrap’s creative 12-column grid system
How to make responsive layouts for any screen size
Some examples you can start using in your project today!

When finished, you’ll be creating professional looking responsive layouts with confidence! Let’s get started!

What is Bootstrap?

Bootstrap is a free open-source CSS framework created by Twitter developers. This framework includes:

Pre-designed components: Buttons, forms, navigation bars, cards, modals, etc.
Responsive grid system: Allows you to create layouts for all devices
Utility classes: Quickly enable styling without writing custom CSS
JavaScript plugins: Provide interactive components, like dropdowns and carousels

Think about Bootstrap like LEGO for web design: Instead of creating everything from scratch, you “snap” together pre-made blocks to create awesome websites faster!

Why is Bootstrap important for beginners?

1. Speed: Create responsive websites in a matter of hours rather than days.

2. Consistency: Everything appears polished and expert right out of the box.

3. Mobile – First: Your websites look great on desktops, tablets, and phones by default.

4. Industry standard: Bootstrap is used by millions of developers around the globe.

5. Learning foundation: You can learn responsive design principles by comprehending Bootstrap.

Step-by-Step Tutorial

Step 1: Installing Bootstrap 5 with CDN

One of the easiest ways to implement Bootstrap is to utilize a CDN (Content Delivery Network). In other words, they provide the files for you to use and they’re stored on fast servers throughout the world. All you do is link to the files using your HTML.

🌐

<title>Bootstrap 5 Demo</title>


    <!-- Your Bootstrap content goes here -->

What’s happening here?

Bootstrap CSS link: The <link> tag loads Bootstrap’s styles (must go in <head>)
Bootstrap JS script: The <script> tag loads Bootstrap’s JavaScript for interactive components
viewport meta tag: Required for responsive design—tells mobile browsers how to scale the page.
bootstrap.bundle.min.js: This is a Bootstrap JavaScript and Popper.js tooltips/popovers combined file.

Pro Tip: If you use Bootstrap you must always add the viewport meta tag whenever possible! Without it, your site won’t be responsive on mobile devices!

Note: The .min.css and .min.js are “minified”- / compressed versions for faster loading time on websites.

Step 2: Understanding Containers - Your Layout Foundation

Containers serve as the core component in Bootstrap. They wrap your content in a responsive fixed-width container with the right amount of padding.

Container vs Container-Fluid

🌐

<!-- Fixed-width Container -->
<div class="container" style="background-color:antiquewhite">
    <h1>Heyy</h1>
    <p>This part is inside a .container class.</p>
</div>

<!-- Full-width Container -->
<div class="container-fluid">
    <h1>Heyy</h1>
    <p>This part is inside a .container-fluid class.</p>
</div>

When to use what?

Use .container for most of your content (articles, forms, standard pages)
Use .container-fluid if you are designing an edge-to-edge design (image galleries, maps, dashboards)

Step 3: Introduction to Bootstrap's Grid System

Bootstrap uses a 12-column grid system. Basically, it is like splitting your page into 12 equal vertical slices, and you can combine those columns to create whatever layout you want!

🌐

<div class="container">
    <div class="row">
        <div class="col bg-dark text-white">COLUMN1</div>
        <div class="col bg-primary text-white">COLUMN2</div>
    </div>
</div>

The basics of 12-column:

Each row is split into 12 equal parts
Columns add up to 12 (or will wrap on to the next line) whenever there is too many
.col without a number = equal width (auto divide)

Note: bg-dark and text-white are Bootstrap utility classes for background color and text color. These are just good examples of the columns to see.

Step 4: Specific Column Widths

You have total control over the width of each column by indicating a number from 1 to 12:

🌐

<div class="container">
    <div class="row">
        <div class="col-4 bg-warning">Width 4</div>
        <div class="col-8 bg-info">Width 8</div>
    </div>
</div>

Column width reference:

.col-12 = 100% (full row)
.col-6 = 50% (half row)
.col-4 = 33.33% (one third)
.col-3 = 25% (one quarter )
.col-8 = 66.66% (two thirds)

Pro Tip: The column widths do not need to add up to exactly 12! If you did exceed 12, you will notice the extra columns wrap to the next line.

Step 5: Column Wrapping Example

🌐

<div class="container mt-4">
    <div class="row">
        <div class="col-8 bg-primary text-white p-2">col-8</div>
        <div class="col-6 bg-secondary text-white p-2">col-6 (wraps to next line)</div>
    </div>
</div>

Common Mistake: New developers are concerned if the columns exceed 12, which is fine, because Bootstrap will handle it all by wrapping.

Step 6: Auto-Layout Columns

When you just use the .col class without a number, Bootstrap will automatically divide the space equally.

🌐

<div class="container mt-4">
    <div class="row">
        <div class="col bg-primary text-white text-center p-3">Column 1</div>
        <div class="col bg-success text-white text-center p-3">Column 2</div>
        <div class="col bg-info text-white text-center p-3">Column 3</div>
    </div>
</div>

Benefits of the auto-layout:

Flexible: You can add, remove, or adjust columns without recalculating the width
Clean Code: You do not have to specify each number exactly
Perfectly Equal: It will always divide evenly

Design Tip: Use the auto-layout anytime you want perfectly equal columns such as navigation menus, feature grids, or whatever you need!

Step 7: Responsive Breakpoints - The Power of Bootstrap

This is where Bootstrap really shines! You can specify varying column sizes based on screen size:

🌐

<div class="container mt-4">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4 bg-light p-3">Responsive Col 1</div>
        <div class="col-12 col-md-6 col-lg-4 bg-dark text-white p-3">Responsive Col 2</div>
        <div class="col-12 col-lg-4 bg-info p-3">Responsive Col 3</div>
    </div>
</div>

Decoding `.col-12 col-md-6 col-lg-4`:

Let’s break down the first column:

– **`col-12`**: On extra-small screens (phones), take full width (12/12)

– **`col-md-6`**: On medium screens (tablets), take half width (6/12)

– **`col-lg-4`**: On large screens (desktops), take one-third width (4/12)

**Bootstrap’s Breakpoint System:**

|————|————-|————–|—————-|

| Small | `sm` | ≥ 576px | Phones (landscape) |

| Medium | `md` | ≥ 768px | Tablets |

| Large | `lg` | ≥ 992px | Laptops |

| Extra Large | `xl` | ≥ 1200px | Desktops |

| XXL | `xxl` | ≥ 1400px | Large monitors |

**Visual representation of our responsive example:**

📱 Mobile (< 768px): 🖥️ Desktop (≥ 992px):

[====Column 1====] [==Col1==][==Col2==][==Col3==]

[====Column 2====] (3 columns side by side)

[====Column 3====]

(Stacked vertically)

📱 Tablet (768px – 991px):

[===Column 1===][===Column 2===]

[========Column 3========]

(2 columns, then 1 full-width)

Pro Tip: Remember to design mobile-first! Begin with the smallest size (col-12) and add larger breakpoints as necessary.

Step 8: Nested Grids (Grids Within Grids!)

You can nest rows and columns within other columns to achieve very complex layouts:

🌐

<div class="row">
    <div class="col-6">
        Level 1: col-6
        <div class="row">
            <div class="col-6 bg-warning">Level 2: col-6</div>
            <div class="col-6 bg-info">Level 2: col-6</div>
        </div>
    </div>
    <div class="col-6 bg-success text-white">Level 1: col-6</div>
</div>

**Structure visualization:**

Parent Row:

├── Column 1 (6 units)

│ └── Nested Row:

│ ├── Nested Column 1 (3 units of parent = 6/12 of nested row)

│ └── Nested Column 2 (3 units of parent = 6/12 of nested row)

└── Column 2 (6 units)

**Key Concept**: When you create a row within a column, that nested row gets its **own fresh 12 column grid** to work with!

**Visual breakdown:**

Main Grid: [======Parent Col 1 (6)======][======Parent Col 2 (6)======]

↓

Nested Grid: [===Child 1 (6)===][===Child 2 (6)===]

(Each child is 50% of parent, which is 25% of total page)

Applications: Nested grids are great for:

Blog layouts with sidebar widgets
Dashboard cards with layouts within them
Product grids with multiple details per item

Step 9: Practical Example - Responsive Card Grid

Let’s create a real-world scenario for a responsive card layout that looks good no matter the screen size!

🌐

<div class="container mt-4">
    <div class="row">
        <div class="col-12 col-sm-6 col-lg-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card 1</h5>
                    <p class="card-text">This adjusts with screen size.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card 2</h5>
                    <p class="card-text">Responsive using Bootstrap grid.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card 3</h5>
                    <p class="card-text">Try resizing the screen.</p>
                </div>
            </div>
        </div>
    </div>
</div>

**Breakdown of `.col-12 col-sm-6 col-lg-4 mb-3`:**

– **`col-12`**: Mobile (< 576px) = 1 card per row (stacked)

– **`col-sm-6`**: Small screens (≥ 576px) = 2 cards per row

– **`col-lg-4`**: Large screens (≥ 992px) = 3 cards per row

– **`mb-3`**: Adds bottom margin (spacing) using Bootstrap’s utility class

**Responsive behavior:**

📱 Mobile: 💻 Tablet: 🖥️ Desktop:

[====Card 1====] [==Card 1==][==Card 2==] [=C1=][=C2=][=C3=]

[====Card 2====] [==Card 3==][==Card 4==] [=C4=]

[====Card 3====]

[====Card 4====]

Real-world uses:

Product listings in e-commerce sites
Blog post previews
Team member bios
Portfolio gallery
Feature displays

Step 10: Understanding Bootstrap Utility Classes

In all our examples, we have been using utility classes, let’s break those down a bit more now:

🌐

<div class="col-4 bg-warning p-3 text-center">col-4</div>

Utility class breakdown:

Class	Category	What It Does
bg-warning	Background	Sets yellow background color
p-3	Padding	Adds padding (3 units on all sides)
text-center	Text Alignment	Centers text horizontally
text-white	Text Color	Makes text white
mt-4	Margin Top	Adds top margin (4 units)
mb-3	Margin Bottom	Adds bottom margin (3 units)

Spacing scale (0-5):

0 = 0 (no spacing)
1 = 0.25rem (4px)
2 = 0.5rem (8px)
3 = 1rem (16px)
4 = 1.5rem (24px)
5 = 3rem (48px)

Direction abbreviations:

t = top
b = bottom
l = left (or s = start)
r = right (or e = end)
x = left and right
y = top and bottom

Pro-tip: Bootstrap utility classes save you POL work, as you won’t be writing tons of custom CSS. Learn the utility classes to code quicker!

Step 11: Multiple Column Width Combinations

Let’s practice a few combinations of columns to further the examples to get you more comfortable:

🌐

<!-- Example 1: Unequal columns -->
<div class="container mt-4">
    <div class="row">
        <div class="col-3 bg-danger text-white p-2">col-3</div>
        <div class="col-6 bg-warning p-2">col-6</div>
        <div class="col-3 bg-success text-white p-2">col-3</div>
    </div>
</div>

**Calculation:** 3 + 6 + 3 = 12 ✓ Perfect fit!

**Visual layout:**

[==col-3==][========col-6========][==col-3==]

25% 50% 25%

Common layouts you can create:

Layout Description	Column Classes	Use Case
Two equal columns	col-6 + col-6	Split content 50/50
Sidebar + content	col-3 + col-9	Blog with sidebar
Three equal	col-4 + col-4 + col-4	Feature showcase
Four equal	col-3 × 4	Image gallery
Hero + aside	col-8 + col-4	Article with ads

Step 12: Best Practices and Common Patterns

Pattern 1: Always wrap columns in a row

🌐

<!-- ✅ CORRECT -->
<div class="container">
    <div class="row">
        <div class="col">Content</div>
    </div>
</div>

<!-- ❌ INCORRECT -->
<div class="container">
    <div class="col">Content</div>
</div>

Why? Rows apply negative margins which offsets the container padding. There is no row, this will be misaligned.

Pattern 2: Use containers properly

🌐

<!-- ✅ CORRECT: Container wraps everything -->
<div class="container">
    <div class="row">
        <div class="col">Content</div>
    </div>
    <div class="row">
        <div class="col">More content</div>
    </div>
</div>

Pattern 3: Responsive design mobile-first

🌐

<!-- ✅ CORRECT: Start with mobile, add larger breakpoints -->
<div class="col-12 col-md-6 col-lg-4">Content</div>

<!-- ❌ LESS OPTIMAL: Desktop-first approach -->
<div class="col-lg-4 col-md-6 col-12">Content</div>

Note: Both works, but the mobile first is the philosophy and more semantically correct.

Code Explanation Sections

How The Grid System Works Internally

Bootstraps uses CSS Flexbox for you behind the scenes. When you write:

🌐

<div class="row">
    <div class="col-6">Column</div>
</div>

Bootstrap applies CSS like this:

🎨

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%; /* 6/12 = 50% */
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

Key Principles:

Flexbox: A modern style layout system for CSS, is simple for alignment
Negative margins: Rows use negative margins to offset the column padding
Column percentages: The current column number translates to a percentage (e.g., col-6 is 50%)
Flex wrap: Columns inherently wrap to the next line when their size exceeds the number of units of 12

Understanding Responsive Breakpoints

When you write:

🌐

<div class="col-12 col-md-6 col-lg-4">Content</div>

Bootstrap generates media queries:

🎨

/* Default: Mobile */
.col-12 { width: 100%; }

/* Medium screens (≥768px) */
@media (min-width: 768px) {
    .col-md-6 { width: 50%; }
}

/* Large screens (≥992px) */
@media (min-width: 992px) {
    .col-lg-4 { width: 33.333%; }
}

The cascade implementation:

Begin with the smallest screen (mobile)
Each consecutive larger breakpoint overrides the immediate smaller preset
If not at each breakpoint, inherits all the styles of the immediate previous size

Container Behavior Explained

Containers have responsive max-widths at different breakpoints:

🎨

.container {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}

/* Small devices (≥576px) */
@media (min-width: 576px) {
    .container { max-width: 540px; }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
    .container { max-width: 720px; }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
    .container { max-width: 960px; }
}

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

Meanwhile, .container-fluid simply stays 100% width at all times:

🎨

.container-fluid {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

Tables of Key Concepts and Components

1. Bootstrap Classes and Components Used

Class/Component	Description
.container	Responsive fixed-width container that centers content
.container-fluid	Full-width container spanning entire viewport
.row	Horizontal group of columns (uses flexbox)
.col	Auto-width column that divides space equally
.col-{number}	Column taking specific width (1-12 units)
.col-{breakpoint}-{number}	Responsive column width at specific breakpoint
.card	Bootstrap component for content containers
.card-body	Padding and spacing for card content
.card-title	Styled heading inside cards
.card-text	Paragraph text inside cards
.bg-{color}	Background color utility (primary, success, danger, etc.)
.text-{color}	Text color utility (white, dark, muted, etc.)
.text-center	Centers text horizontally
.p-{size}	Padding on all sides (0-5 scale)
.m-{size}	Margin on all sides (0-5 scale)
.mt-{size}	Margin top utility
.mb-{size}	Margin bottom utility

2. Responsive Breakpoints and Grid Properties

Breakpoint	Class Prefix	Screen Width	Typical Devices	Column Behavior
Extra Small	(none)	< 576px	Portrait phones	Full-width by default
Small	sm	≥ 576px	Landscape phones	Breakpoint triggers
Medium	md	≥ 768px	Tablets	Typical tablet width
Large	lg	≥ 992px	Laptops/Desktops	Standard desktop
Extra Large	xl	≥ 1200px	Large desktops	Wide monitors
XXL	xxl	≥ 1400px	Extra large monitors	Ultra-wide displays

3. Grid System Key Numbers

Concept	Value	Explanation
Total columns	12	Each row divided into 12 equal units
Gutter width	1.5rem (24px)	Space between columns (0.75rem padding each side)
Container padding	0.75rem (12px)	Padding on left/right of containers
Column classes	1-12	col-1 through col-12
Auto-layout	.col	Columns automatically divide available space
Nesting	Unlimited	Can nest rows inside columns infinitely

4. Common Column Combinations

Layout	Classes	Visual	Use Case
Equal halves	col-6 + col-6	50%	50%
Thirds	col-4 × 3	33%	33%
Quarters	col-3 × 4	25% each	Image gallery
Sidebar left	col-3 + col-9	25%	75%
Sidebar right	col-9 + col-3	75%	25%
Hero section	col-8 + col-4	66%	33%
Uneven thirds	col-5 + col-7	42%	58%

Useful References

Are you ready to get more in-depth with Bootstrap? Here are the best resources for your continued learning:

Official Documentation

Bootstrap 5 Official Docs – The complete, authoritative guide (start here!)
Bootstrap Grid System – Deep dive into grid features
Bootstrap Breakpoints – Understanding responsive design
Bootstrap Utilities – Complete utility class reference

Interactive Learning

W3Schools Bootstrap 5 Tutorial – Step-by-step lessons with try-it-yourself editors
freeCodeCamp Bootstrap – Free hands-on courses
Scrimba Bootstrap Course – Interactive video tutorials
Codecademy Bootstrap – Structured learning path

Video Tutorials

Bootstrap 5 Crash Course – Traversy Media – 45-minute comprehensive overview
Bootstrap 5 Tutorial – Net Ninja – Complete playlist for beginners
Bootstrap 5 Full Course – freeCodeCamp – 3+ hour deep dive
Learn Bootstrap in Less Than 20 Minutes – Quick overview for fast learners

Practical Resources

Bootstrap Examples – Official example templates to study and use
Bootstrap Cheat Sheet – Quick reference for all classes
Start Bootstrap – Free Bootstrap themes and templates
Bootsnipp – Code snippets and design elements

Design Inspiration

Bootstrap Themes – Official premium themes (great for studying)
BootstrapMade – Free and premium templates
Creative Tim – Beautiful free Bootstrap templates
ThemeForest Bootstrap – Professional templates (study the structure)

Tools & Utilities

Bootstrap Build Tool – Visual Bootstrap builder
Layoutit Grid – Visual CSS Grid generator
Bootstrap Studio – Desktop app for Bootstrap design (paid)
Coolors – Color palette generator for your Bootstrap projects

Community & Help

Stack Overflow – Bootstrap Tag – Get answers to specific questions
Bootstrap GitHub – Official repository, issues, and discussions
Reddit – r/bootstrap – Community discussion and help
Bootstrap Discord – Real-time chat with other Bootstrap developers

Practice & Challenges

Frontend Mentor – Real-world design challenges (use Bootstrap to solve them!)
Codepen Bootstrap Collection – Thousands of examples to explore
CSS Battle – CSS challenges (try solving with Bootstrap utilities!)
Codewell – Practice projects perfect for Bootstrap

Advanced Topics (Next Steps)

Bootstrap Sass Variables – Customizing Bootstrap with Sass
Bootstrap JavaScript – Interactive components
Bootstrap Icons – Official icon library (1,800+ icons!)
Bootstrap npm Package – Using Bootstrap in modern build tools

Mobile Development

Bootstrap Mobile Best Practices – Mobile-first design principles
Responsive Images Guide – Making images responsive
Chrome DevTools Device Mode – Testing responsive designs

Comparison & Alternatives

Bootstrap vs Tailwind – Understanding different approaches
Foundation Framework – Alternative to Bootstrap
Bulma – Modern CSS framework alternative
Materialize – Material Design framework

Bonus: Common Bootstrap Patterns Cheat Sheet

Here are some more pre-written templates you’ll frequently utilize:

1. Basic Page Structure

🌐

<title>My Bootstrap Page</title>


    <div class="container">
        <!-- Your content here -->
    </div>

2. Two-Column Layout (Sidebar + Content)

🌐

<div class="container">
    <div class="row">
        <div class="col-12 col-md-3">
            <!-- Sidebar -->
        </div>
        <div class="col-12 col-md-9">
            <!-- Main content -->
        </div>
    </div>
</div>

3. Three Equal Columns (Features)

🌐

<div class="container">
    <div class="row">
        <div class="col-12 col-md-4 mb-3">Feature 1</div>
        <div class="col-12 col-md-4 mb-3">Feature 2</div>
        <div class="col-12 col-md-4 mb-3">Feature 3</div>
    </div>
</div>

4. Responsive Card Grid

🌐

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card Title</h5>
                    <p class="card-text">Card content</p>
                </div>
            </div>
        </div>
        <!-- Repeat for more cards -->
    </div>
</div>

5. Centered Content

🌐

<div class="container">
    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-6">
            <!-- Centered content -->
        </div>
    </div>
</div>

6. Full-Width Hero + Contained Content

🌐

<div class="container-fluid bg-primary text-white py-5">
    <!-- Hero section -->
</div>
<div class="container">
    <!-- Regular content -->
</div>

Troubleshooting Common Issues

Problem 1: Columns Not Aligning

🌐

<!-- ❌ WRONG: Missing .row -->
<div class="container">
    <div class="col-6">Content</div>
</div>

<!-- ✅ CORRECT: Always use .row -->
<div class="container">
    <div class="row">
        <div class="col-6">Content</div>
    </div>
</div>

Problem 2: Content Overflow on Mobile

🌐

<!-- ❌ WRONG: No mobile breakpoint -->
<div class="col-lg-3">Content</div>

<!-- ✅ CORRECT: Start with mobile -->
<div class="col-12 col-lg-3">Content</div>

Problem 3: Unexpected Spacing

🌐

<!-- ❌ WRONG: Multiple containers nested -->
<div class="container">
    <div class="container">Content</div>
</div>

<!-- ✅ CORRECT: One container per section -->
<div class="container">
    <div class="row">
        <div class="col">Content</div>
    </div>
</div>

Problem 4: Responsive Breakpoint Not Working

🌐

<!-- ❌ WRONG: Wrong order (desktop-first) -->
<div class="col-lg-4 col-md-6 col-12">Content</div>

<!-- ✅ BETTER: Mobile-first order (though both work) -->
<div class="col-12 col-md-6 col-lg-4">Content</div>

### Problem 5: Bootstrap Styles Not Applying

### Layout Classes

.container – Fixed-width container

.container-fluid – Full-width container

.row – Horizontal group of columns

.col – Auto-width column

.col-{1-12} – Specific width column

.col-{bp}-{1-12} – Responsive column

### Spacing Utilities

.m-{0-5} – Margin all sides

.mt-{0-5} – Margin top

.mb-{0-5} – Margin bottom

.p-{0-5} – Padding all sides

.pt-{0-5} – Padding top

.pb-{0-5} – Padding bottom

### Text Utilities

.text-center – Center text

.text-start – Left align

.text-end – Right align

.text-white – White text

.fw-bold – Bold text

.fs-{1-6} – Font size

### Background Colors

.bg-primary – Blue

.bg-secondary – Gray

.bg-success – Green

.bg-danger – Red

.bg-warning – Yellow

.bg-info – Light blue

.bg-light – Light gray

.bg-dark – Dark gray

What Comes Next

Bootstrap is just the starting point in your web developer journey; here are more things you can do next:

Immediate Next Steps (this week):

Practice these tutorials
Build a simple personal portfolio with the Bootstrap grid layout
Experiment with the column combinations

Short-Term Goals (this month):

Learn more about the Bootstrap components (the navigation bar; forms; buttons; modals)
Do some reading on the Bootstrap JavaScript plugins
Build 3 to 5 complete layouts for a page
Colors and styles of your custom Bootstrap 5 variables

Long-Term Ownership (around 3 to 6 months):

Master Bootstrap Sass customization
Learn additional frameworks (Tailwind, React, etc.)
Build full websites in Bootstrap
Explore contributing to open source Bootstrap projects

Remember These Principles

1. Mobile-first always: Consider your design for smaller screens first

2. Be semantic: Use proper HTML5 elements

3. Don’t fight the framework: Work with Bootstrap other than fighting it

4. Customizations are overrated: Use Bootstrap’s utility class styles rather than writing custom CSS

5. Test on the device: Dev tools are nice, but testing on a real phone is better

6. The importance of accessibility: Use correct ARIA labels & semantic HTML.

7. Performance counts: Only include Bootstrap components that you are using.

Join the Community

Web development is better when we work together:

Post and share your Bootstrap projects on social
Inquires on Stack Overflow
Do open source contributions
Help others learn Bootstrap
Keep up with Bootstrap releases.

One Last Challenge

Before you close this tutorial, challenge yourself:

Create a complete landing page that includes:

Full-width hero area
Features/benefits section with three columns
Services area with two-columns and images
Grid of cards (testimonials or products) that are responsive
Footer of social links

Requirements:

Responsive (mobile, tablet, desktop)
Only uses Bootstrap classes (no custom CSS)
4 different breakpoints minimum
Proper semantic HTML

Set a timer: see if you can get done in under 2 hours!

Quick Action Items (Do These Now!)

Bookmark the official Bootstrap documentation.
Make sure to save this tutorial as a resource for the next time you practice.
Maintain a file of code snippets that you can refer to for common patterns.
Create a folder for a practice project.
Spend at least a half hour every day practicing with Bootstrap!
Choose one of the bootstrap pattern challenges here and try to complete it today!
Find and join a Bootstrap community – Discord, Reddit, or developer forums.
Follow Bootstrap on a social media platform you use; you’ll see updates and examples!
Organize your “Bootstrap Resources”.
Design and begin a “working” project with Bootstrap right now!

Source Code:

https://github.com/niotechoneSoftware/dotnet-developer-roadmap/blob/main/Bootstrap-Essentials/Day%201%20-%20Bootstrap%20-%20BS5%20Intro%2C%20Containers%2C%20Grid%20Basics/Index.html

Conclusion

Your Journey So Far

You’ve come from: Basic HTML and CSS knowledge

You’ve learned: A professional-grade responsive framework

You can now build: Production-ready responsive mobile-first web pages.

You are no longer a beginner in Bootstrap anymore, you are a developer leveraging Bootstrap to create beautiful responsive sites quickly!

The web is your canvas and Bootstrap is your brush. Now looking forward to you going out there and making something amazing!

Keep on building. Keep on learning. Keep on growing.

Remember: Every knowledgeable, professional developer started at the same place you are now. What made the difference was they kept working on it. You can do this!

Output

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What is Bootstrap 5 (Bootstrap)?

Bootstrap 5 is a framework that provides CSS utilities to create sleek, responsive, and mobile-ready websites quicker. It comes with many pre-made classes for layout, spacing, color, type, components, and utilities.

Why would you use Bootstrap 5?

Increases speed of development.
Provides consistent design.
Allows for faster development of responsive layouts.
Has a broad community and documentation.
Is a strong choice for beginners and pros.

What is the purpose of the containers with Bootstrap?

Containers are simply used to control the width of your contents and give your layout proper alignment and responsive behavior.

What is the Bootstrap Grid System?

Bootstrap's Grid System is a layout, a structure consisting of 12 columns, for you to create responsive web pages. It allows you to create a page made up of equal columns; to layout information in rows and columns. Working within this structure, you can control how your layout works on mobile, tablet and desktop devices by placing responsive column classes on each element with, col-sm, col-md, first, col-lg.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Bootstrap Day 1: BS5 Introduction, Containers, Grid Basics

Table of Contents

Introduction

What is Bootstrap?

Why is Bootstrap important for beginners?

Step-by-Step Tutorial

Step 1: Installing Bootstrap 5 with CDN

Step 2: Understanding Containers - Your Layout Foundation

Step 3: Introduction to Bootstrap's Grid System

Step 4: Specific Column Widths

Step 5: Column Wrapping Example

Step 6: Auto-Layout Columns

Step 7: Responsive Breakpoints - The Power of Bootstrap

Step 8: Nested Grids (Grids Within Grids!)

Step 9: Practical Example - Responsive Card Grid

Step 10: Understanding Bootstrap Utility Classes

Step 11: Multiple Column Width Combinations

Step 12: Best Practices and Common Patterns

Code Explanation Sections

Tables of Key Concepts and Components

Useful References

Bonus: Common Bootstrap Patterns Cheat Sheet

Troubleshooting Common Issues

What Comes Next

Remember These Principles

Join the Community

One Last Challenge

Quick Action Items (Do These Now!)

Source Code:

Conclusion

Output

Categories

Related Articles

Bootstrap Day 6: Flexbox Utilities, Responsive Utilities + Z-Index + Order, Tables + Lists + Spinners

Bootstrap Day 5 : Modal, Tooltip, Popover, Carousel and Progress Bar

Bootstrap Day 4: Building Smart Navigation & Interactive Forms

Follow Us

Let's Work Together

Related Tags

Frequently Asked Questions FAQs