Skip to content
Web Frameworks
Bootstrap
Bootstrap Basics — Complete Guide to Setup, Grid & Layout

Bootstrap Basics — Complete Guide to Setup, Grid & Layout

DodaTech Updated Jun 6, 2026 12 min read

Bootstrap is the world’s most popular CSS framework for building responsive, mobile-first websites with a powerful grid system and pre-built components that accelerate development.

What You’ll Learn

  • Set up Bootstrap via CDN and npm
  • Understand the 12-column grid system with an analogy
  • Use containers, rows, and columns for responsive layouts
  • Apply breakpoints, gutters, offsets, and ordering
  • Build a complete responsive dashboard page

Why Bootstrap Matters

Every modern website must work on phones, tablets, and desktops. Writing CSS for every screen size from scratch is tedious and error-prone. Bootstrap solves this with a mobile-first grid system that adapts layouts automatically.

At DodaTech, we use Bootstrap in the admin dashboards of Durga Antivirus Pro and Doda Browser to display real-time security data, user analytics, and system status — all responsive across devices. The same framework powers the DodaZIP file manager interface.

Your Learning Path 

    flowchart LR
  A[HTML & CSS Basics] --> B[Bootstrap Basics]
  B --> C[Bootstrap Content]
  C --> D[Bootstrap Components]
  D --> E[Bootstrap Forms]
  E --> F[Bootstrap Utilities]
  F --> G[Bootstrap Advanced]
  B:::current

  classDef current fill:#0d6efd,color:#fff,stroke:#0a58ca,stroke-width:2px
Prerequisites: You should know basic HTML (tags, attributes) and CSS (selectors, properties). No JavaScript knowledge needed for this lesson.

How Bootstrap Works — The Toolkit Analogy

Think of Bootstrap as a toolkit for building websites. Instead of crafting every piece from scratch (cutting wood, forging nails), you get pre-made parts that fit together.

Bootstrap has three layers:

  1. Grid System — the skeleton that holds your layout
  2. Components — pre-built UI pieces (buttons, cards, navbars)
  3. Utilities — helper classes for spacing, colors, and alignment

You can use any layer independently. This tutorial focuses on the grid system.

Setup — Two Ways to Start

Method 1: CDN (Recommended for Beginners)

Add two lines to your HTML. The CSS link goes in <head>, the JS bundle goes before </body>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- The viewport meta tag is REQUIRED for responsive design.
         Without it, mobile browsers will zoom out and your breakpoints won't work. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Bootstrap Page</title>
    <!-- This link loads Bootstrap's CSS from a CDN (Content Delivery Network).
         It's like downloading the Bootstrap stylesheet but faster because
         it's served from servers near your visitor. -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>Hello, Bootstrap!</h1>

    <!-- This script loads Bootstrap's JavaScript + Popper.js (needed for
         dropdowns, tooltips, modals, etc.). Always load it at the end so
         the page renders before the scripts run. -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Why CDN? You don’t have to download or install anything. It works immediately and loads faster because the file is cached across websites.

Method 2: npm (For Advanced Projects) 

npm install bootstrap@5

Then in your JavaScript:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

Why npm? If you’re already using a build tool like Webpack or Vite, this keeps Bootstrap version-controlled and bundled with your app.

Containers — The Wrapper

Every Bootstrap layout starts with a container. Think of it as a box that centers your content and adds appropriate padding.

<div class="container">        <!-- Fixed-width, responsive -->
<div class="container-fluid">  <!-- Always full width -->
<div class="container-sm">     <!-- 100% until sm breakpoint, then fixed -->
<div class="container-md">     <!-- 100% until md breakpoint, then fixed -->
<div class="container-lg">     <!-- 100% until lg breakpoint, then fixed -->
<div class="container-xl">     <!-- 100% until xl breakpoint, then fixed -->
<div class="container-xxl">    <!-- 100% until xxl breakpoint, then fixed -->

Why choose one? Use .container for most pages — it gives you readable column widths on large screens. Use .container-fluid for full-width designs like admin dashboards. The responsive containers (.container-sm, etc.) are fluid below a breakpoint and fixed above it.

Container Widths by Breakpoint

Class<576px≥576px≥768px≥992px≥1200px≥1400px
.container100%540px720px960px1140px1320px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xxl100%100%100%100%100%1320px

Notice the pattern: each responsive container “snaps” to a fixed width at its matching breakpoint. Below that, it’s fluid (100%).

Breakpoints — The Decision Points

Bootstrap uses six breakpoints — like snap points where the layout adjusts:

BreakpointInfixMin WidthTypical Device
Extra Small(none)<576pxOld phones
Smallsm≥576pxModern phones
Mediummd≥768pxTablets
Largelg≥992pxLaptops
Extra Largexl≥1200pxDesktops
XX-Largexxl≥1400pxLarge desktops

How to use them: Classes like col-md-6 mean “6 columns wide on medium screens and above.” Below that breakpoint, the element stacks full-width. Classes like d-none d-lg-block mean “hidden on small screens, visible on large screens and above.”

The Grid System — Newspaper Columns Analogy

Imagine a newspaper page divided into 12 equal columns. You can merge adjacent columns to create wider sections. Bootstrap’s grid works the same way:

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|----------- 6 columns ----------|------- 6 columns -------|
|------- 4 -------|------- 4 -------|------- 4 -------|
|-- 3 --|-- 3 --|-- 3 --|-- 3 --|

Why 12? 12 divides evenly by 1, 2, 3, 4, 6, and 12, giving you maximum flexibility for creating columns of equal width.

Basic Grid Structure 

<!-- Every grid needs: container > row > col -->
<div class="container">
    <!-- A row creates a horizontal group of columns. It has negative
         margins that cancel out the container's padding, so columns
         sit flush against the edges. -->
    <div class="row">
        <!-- col-md-8 means "span 8 of 12 columns on medium screens+"
             On smaller screens, this stacks to full width. -->
        <div class="col-md-8">Main content (8 columns)</div>
        <div class="col-md-4">Sidebar (4 columns)</div>
    </div>
    <!-- This row uses auto-sized columns. When you use just "col"
         without a number, it automatically divides space equally. -->
    <div class="row">
        <div class="col">Auto (33%)</div>
        <div class="col">Auto (33%)</div>
        <div class="col">Auto (33%)</div>
    </div>
</div>

Why do we need .row? The row creates a flex container. Without it, columns won’t align horizontally. It also resets the negative margin spacing.

Column Classes Explained 

<!-- Equal width columns — add as many as you want, they auto-divide -->
<div class="row">
    <div class="col">1 of 3</div>
    <div class="col">2 of 3</div>
    <div class="col">3 of 3</div>
</div>

<!-- Specific widths — must add up to 12 in a row -->
<div class="row">
    <div class="col-8">8 of 12 (66.6%)</div>
    <div class="col-4">4 of 12 (33.3%)</div>
</div>

<!-- Responsive: different layouts at different breakpoints.
     On small screens: 6 cols each (2 columns)
     On medium screens: 4 cols each (3 columns)
     On large screens: 3 cols each (4 columns) -->
<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">Responsive item</div>
    <div class="col-sm-6 col-md-4 col-lg-3">Responsive item</div>
    <div class="col-sm-6 col-md-4 col-lg-3">Responsive item</div>
    <div class="col-sm-6 col-md-4 col-lg-3">Responsive item</div>
</div>

The mental model: Read col-md-4 as “take 4 of 12 columns starting at the md breakpoint and wider.” Below md, it goes full width.

Row Columns — A Shortcut 

<!-- row-cols-2 forces every direct child column to be 50% wide.
     You don't need to add col-6 to each child. -->
<div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
</div>

<!-- Responsive row columns -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
    <!-- 1 col on mobile, 2 on sm, 3 on md, 4 on lg+ -->
    <div class="col">Item</div>
    <div class="col">Item</div>
    <!-- ... more items ... -->
</div>

Why use row-cols? It’s cleaner when you have many items that should be equal width. Instead of adding col-md-4 to every item, you set it once on the row.

Nesting Grids 

<div class="row">
    <div class="col-sm-9">
        Level 1: 9 columns wide
        <!-- Nested row: this creates a NEW 12-column grid INSIDE
             this 9-column space. The nested columns are relative to
             the parent column, not the page. -->
        <div class="row">
            <div class="col-8">Nested: 8 of 12 (66% of the parent)</div>
            <div class="col-4">Nested: 4 of 12 (33% of the parent)</div>
        </div>
    </div>
</div>

Why nest? When one section of your page needs its own sub-layout (e.g., a sidebar with header + links + stats), nesting creates an independent grid inside that section.

Offsetting Columns 

<!-- offset-md-4 pushes the column 4 units to the right.
     This centers a 4-column-wide block in a 12-column row:
     4 offset + 4 content + 4 remaining = 12 total -->
<div class="row">
    <div class="col-md-4 offset-md-4">Centered content</div>
</div>

Available: offset-*, offset-sm-*, offset-md-*, offset-lg-*, offset-xl-*, offset-xxl-*

Ordering Columns 

<div class="row">
    <!-- order-3 means "appears third visually" even though it's
         first in the HTML. This is useful for reordering content
         without changing the HTML structure. -->
    <div class="col order-3">Third visually, first in HTML</div>
    <div class="col order-1">First visually, second in HTML</div>
    <div class="col order-2">Second visually, third in HTML</div>
</div>

Also available: order-first, order-last, order-1 through order-5

Gutters — Column Spacing

Gutters control the space between columns. By default, Bootstrap adds 1.5rem (24px) gutters.

<!-- No gutter — columns touch each other -->
<div class="row g-0">
    <div class="col">No gap</div>
    <div class="col">No gap</div>
</div>

<!-- Custom gutter sizes -->
<div class="row g-1"><!-- 0.25rem (4px) -->
<div class="row g-2"><!-- 0.5rem (8px) -->
<div class="row g-3"><!-- 1rem (16px) — this is the Bootstrap default -->
<div class="row g-4"><!-- 1.5rem (24px) -->
<div class="row g-5"><!-- 3rem (48px) -->

<!-- Separate horizontal and vertical gutters -->
<div class="row gx-4">  <!-- Horizontal gutter only (between columns) -->
<div class="row gy-4">  <!-- Vertical gutter only (between rows) -->

Why control gutters? Tight gutters (g-1) work for dense dashboards. Wide gutters (g-5) create breathing room in marketing pages. Use g-0 for image grids where you want no gaps.

Common Mistakes

1. Forgetting the container

Rows and columns must be inside .container or .container-fluid. Without one, the row’s negative margins spill outside the page and your layout breaks.

2. Columns not summing to 12 

<!-- WRONG: 6 + 8 = 14, which exceeds 12. The 8-column wraps to a new row. -->
<div class="row">
    <div class="col-6">6</div>
    <div class="col-8">8 — wraps below!</div>
</div>

3. Using columns outside a row

Columns (col-*) must be direct children of .row. If you nest them inside another div, they lose their flex context and won’t align.

4. Missing the viewport meta tag

Without <meta name="viewport" content="width=device-width, initial-scale=1">, mobile browsers render your page at a zoomed-out desktop width, breaking all your responsive breakpoints.

5. Putting content directly in the row

Content should go inside columns, not directly in the row. The row only provides the flex context and negative margins — it’s not meant to hold content itself.

Practice Questions

  1. What does col-md-6 mean in terms of screen sizes? Answer: It means “span 6 of 12 columns (50%) on medium screens (768px+) and above.” Below 768px, the element stacks full width.

  2. Why 12 columns? Why not 10 or 16? Answer: 12 divides evenly by 1, 2, 3, 4, 6, and 12, giving you the most flexibility for equal-width layouts.

  3. What’s the difference between .container and .container-fluid? Answer: .container has a fixed max-width at each breakpoint (e.g., 720px at md). .container-fluid is always width: 100%.

  4. If you have 4 items and want them in a 4-column grid on desktop but 2-column on mobile, what classes do you use? Answer: Use row-cols-2 row-cols-lg-4 on the row. Or col-6 col-lg-3 on each item.

  5. What does offset-md-4 do? Answer: It adds a 4-column margin to the left of the element on medium screens and above, effectively pushing it 4 columns to the right.

Challenge: Build a 3-column layout where the middle column has double the width of the side columns on desktop, but all three stack vertically on mobile. Solution: col-12 col-md-3, col-12 col-md-6, col-12 col-md-3.

FAQ

What is the difference between container and container-fluid?
.container has a fixed max-width at each breakpoint. .container-fluid is always width: 100%. Use .container for most layouts and .container-fluid for full-width designs.
How does the 12-column grid work?
Each row is divided into 12 theoretical columns. You specify how many columns an element should span (e.g., col-4 = 4/12 = 33.3% width). The sum across a row should be 12.
What is mobile-first in Bootstrap?
Base classes (without infix) apply to all screen sizes. Classes with infixes (e.g., col-md-6) apply at that breakpoint and above. Design for smallest screens first, then add larger breakpoints.
Can I use CSS Grid and the flexbox grid together?
Yes. Bootstrap 5 supports both. Use the flexbox grid (row/col) for most layouts, and CSS Grid (.grid/.g-col-*) for 2D layouts.
What is the difference between g, gx, and gy?
g sets both horizontal and vertical gutters. gx sets only horizontal (between columns). gy sets only vertical (between rows).
How do I center content vertically?
Use the flex utility: <div class="row align-items-center"> or <div class="d-flex align-items-center">.

Try It Yourself 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Top Navbar -->
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">Dashboard</span>
        </div>
    </nav>

    <div class="container-fluid mt-3">
        <div class="row">
            <!-- Sidebar: 3 cols on md, 2 on lg -->
            <div class="col-md-3 col-lg-2 bg-light p-3">
                <h5>Menu</h5>
                <ul class="nav flex-column">
                    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Analytics</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Orders</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Customers</a></li>
                </ul>
            </div>

            <!-- Main Content: 9 cols on md, 10 on lg -->
            <div class="col-md-9 col-lg-10">
                <h2>Overview</h2>

                <!-- Cards row — responsive 1→2→4 columns -->
                <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3 mb-4">
                    <div class="col">
                        <div class="card text-white bg-primary">
                            <div class="card-body">
                                <h5 class="card-title">Users</h5>
                                <p class="card-text display-6">1,234</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card text-white bg-success">
                            <div class="card-body">
                                <h5 class="card-title">Revenue</h5>
                                <p class="card-text display-6">$12K</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card text-white bg-warning">
                            <div class="card-body">
                                <h5 class="card-title">Orders</h5>
                                <p class="card-text display-6">456</p>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card text-white bg-danger">
                            <div class="card-body">
                                <h5 class="card-title">Growth</h5>
                                <p class="card-text display-6">+12%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bottom row: chart + notifications -->
                <div class="row">
                    <div class="col-lg-8">
                        <div class="border rounded p-4 bg-white">
                            <h5>Recent Activity</h5>
                            <p class="text-muted">Chart and activity feed would go here.</p>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="border rounded p-4 bg-white">
                            <h5>Notifications</h5>
                            <div class="alert alert-info">Server updated successfully</div>
                            <div class="alert alert-warning">SSL certificate expires in 30 days</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

This sandbox demonstrates: containers, the grid system, responsive breakpoints, row-cols, cards, navbar, alerts, and spacing utilities — the foundation of every Bootstrap layout.

What’s Next

TopicDescription
Bootstrap ContentLearn typography, images, tables, and colors
Bootstrap Components Part 1Alerts, buttons, cards, accordion
CSS FlexboxUnderstanding the flexbox behind Bootstrap’s grid
Bootstrap UtilitiesSpacing, display, and flex helper classes

What’s Next

Congratulations on completing this Bootstrap Basics tutorial! Here’s where to go from here:

  • Practice daily — Consistency is more important than long study sessions
  • Build a project — Apply what you learned by building something real
  • Explore related topics — Check out other tutorials in the same category
  • Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Next Bootstrap Typography & Content — Complete Practical Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap