Getting Started with Bootstrap – Installation and Setup Guide

Getting Started with Bootstrap – Installation and Setup Guide

Getting Started with Bootstrap — Setup Guide for Beginners | TipsInLearning
Home Bootstrap Course Getting Started with Bootstrap
Bootstrap Lesson 2 of 19

Getting Started with Bootstrap

Learn the three ways to add Bootstrap to your project — CDN, download, and npm. Understand the required page structure, containers, the 12-column grid, utility classes, and how to build your first complete Bootstrap page.

12 min read
Beginner
Bootstrap Setup
Bootstrap Course
In This Lesson
12 min read Beginner
Progress0/19
The biggest mistake beginners make is skipping the setup step — they paste Bootstrap code but forget the viewport meta tag or put the JS in the wrong place, then wonder why nothing works. Do this lesson properly once and you'll never waste time on setup issues again. TipsInLearning has you covered.
What You'll Learn
HTML, CSS, JS requirements for Bootstrap
Three ways to add Bootstrap to a project
Set up Bootstrap via CDN in under 2 minutes
Download Bootstrap and link files locally
Install Bootstrap with npm (advanced)
Correct Bootstrap page structure
Containers, grid system, and utility classes
Build a complete working Bootstrap page

Requirements Before You Start

Bootstrap is built on top of HTML and CSS. Before starting, you should have a basic understanding of these three technologies. You don't need to be an expert — but knowing what a tag, property, and class selector are will make Bootstrap much easier to follow.

HTML
Tags, attributes, nesting, semantic structure — essential. Bootstrap classes go on HTML elements.
CSS
Box model, display, padding, margin — helpful. Bootstrap utility classes map directly to CSS properties.
JavaScript
Optional for most of Bootstrap. Only needed for interactive components like modals, dropdowns, and tooltips.
TipsInLearning tip: If you haven't done the HTML and CSS courses yet, complete at least the first 5 lessons of each before starting Bootstrap. You'll learn much faster and understand why Bootstrap works the way it does — not just how to copy the class names.

3 Ways to Add Bootstrap

There are three methods to include Bootstrap in your project. Choose based on your experience and project type:

CDN
✓ Best for Beginners

No download needed. Add two lines of code. Works immediately. Ideal for learning and small projects.

Download
Intermediate

Download Bootstrap files and link them locally. Works offline. Good for medium projects.

NPM / Yarn
Advanced

Package manager install. For professional projects using Webpack, Vite, React, or Vue.

Method 1 — Bootstrap via CDN

The CDN method is the fastest way to start using Bootstrap. No download, no installation — just add two lines of code to your HTML file and Bootstrap is ready. TipsInLearning recommends this method for all beginners.

Step 1 — Add Bootstrap CSS in <head>

Paste this <link> tag inside your <head> section, after the viewport meta tag:

HTML — Bootstrap CSS CDN
<!-- Bootstrap 5 CSS — paste inside <head> -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
>

Step 2 — Add Bootstrap JS before </body>

Paste this <script> tag just before the closing </body> tag. The JS bundle includes Popper.js (needed for dropdowns and tooltips):

HTML — Bootstrap JS CDN
<!-- Bootstrap 5 JS Bundle (includes Popper) — paste before </body> -->
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
  crossorigin="anonymous"
></script>

Instant Setup

Zero download, zero installation — Bootstrap is live in under 60 seconds.

Fast Loading

CDN servers worldwide cache the files — often loads faster than local hosting.

Always Updated

Pin to a specific version (like 5.3.2) to control exactly which Bootstrap you use.

Integrity Check

The integrity attribute verifies the file hasn't been tampered with.

Method 2 — Download Bootstrap Files

Download Bootstrap files to your computer and link them from your project folder. This method works offline and gives you full control over the files. Useful for production projects where you can't rely on external CDN availability.

How to download

  1. Go to getbootstrap.com and click the "Download" button
  2. Download the "Compiled CSS and JS" ZIP file
  3. Extract the ZIP — you'll get a css/ and js/ folder
  4. Copy those folders into your project directory
  5. Link the files in your HTML as shown below
HTML — Local Bootstrap Files
<!-- CSS in <head> -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- JS before </body> -->
<script src="js/bootstrap.bundle.min.js"></script>

Recommended folder structure

Project Structure
my-project/
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.bundle.min.js
├── index.html
└── style.css     ← your custom CSS file
Always add your own CSS file after Bootstrap's. Place your style.css link after the Bootstrap CSS link. This ensures your custom styles override Bootstrap's defaults when needed — not the other way around.

Method 3 — NPM / Yarn (Advanced)

For professional developers using build tools like Webpack or Vite, or frameworks like React, Vue, or Angular, install Bootstrap via npm or Yarn. This method gives you full control over which Bootstrap components to import and enables tree-shaking to reduce file size.

BASH — Install via npm
npm install bootstrap@5.3.2
BASH — Install via Yarn
yarn add bootstrap@5.3.2

Then import Bootstrap in your main JavaScript or SCSS entry file:

JavaScript — Import Bootstrap
// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JS (all components)
import 'bootstrap';

// Or import only what you need (tree-shaking)
import { Modal, Dropdown, Tooltip } from 'bootstrap';
Beginner? Skip this section for now. You don't need npm to use Bootstrap. Start with the CDN method and learn npm later when you start working on professional projects with build tools. TipsInLearning covers npm setup in depth in the JavaScript course.

Bootstrap Page Structure

Every Bootstrap page needs a specific skeleton. The order matters — especially the viewport meta tag and where the JS goes. Here is the correct structure for a complete Bootstrap 5 HTML page:

HTML — Complete Bootstrap 5 Page Structure
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <!-- Required: tells mobile browsers how to scale the page -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>My Bootstrap Page</title>

  <!-- Bootstrap CSS (must come before your own CSS) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Your own CSS comes after Bootstrap -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- All your page content goes here -->
  <div class="container">
    <h1>Hello, TipsInLearning Bootstrap!</h1>
    <p class="lead">This is my first Bootstrap 5 page.</p>
    <button class="btn btn-primary">Get Started</button>
  </div>

  <!-- Bootstrap JS must be last, just before closing </body> -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Breaking Down the Structure

lang="en" — Declares the page language. Helps screen readers and search engines.

meta charset="UTF-8" — Supports all characters including symbols and special letters.

meta name="viewport" — Critical for Bootstrap. Without this, mobile breakpoints won't work. Always include it.

Bootstrap CSS link — Must be in <head> so styles load before the page renders.

Bootstrap JS script — Goes just before </body> so it loads after all HTML elements exist.

Bootstrap Containers

A container is the outermost wrapper for your Bootstrap content. It controls the maximum width of your page layout and adds horizontal padding on both sides to prevent content from touching the screen edges.

There are three container types in Bootstrap 5:

ClassBehaviourBest Used For
.containerFixed max-width, responsive per breakpointArticles, blogs, lesson pages
.container-fluidAlways 100% width of viewportFull-width headers, footers, banners
.container-{bp}100% wide until the named breakpoint, then fixedSpecific breakpoint-controlled sections
HTML — Container Types
<!-- Fixed-width container (centered) -->
<div class="container">
  <p>Fixed-width — great for article content</p>
</div>

<!-- Full-width container (edge to edge) -->
<div class="container-fluid">
  <p>Full-width — great for hero sections and navbars</p>
</div>

<!-- Full-width on mobile, fixed from medium screens up -->
<div class="container-md">
  <p>Responsive — stacks on mobile, fixed on medium+</p>
</div>

Bootstrap Grid System

The Bootstrap grid divides each row into 12 equal columns. You control how many columns each element spans using classes like col-4 (4 of 12 = one third of the row). The layout structure is always: container → row → columns.

HTML — Basic 3-Column Grid
<div class="container">
  <div class="row">
    <!-- Each col-4 takes 4/12 = one third of the row -->
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
    <div class="col-4">Column 3</div>
  </div>
</div>

Responsive column classes

Add breakpoint suffixes to make columns responsive. The column spans its defined width from that breakpoint and above — below it, the column is full width (stacks vertically):

HTML — Responsive Grid
<div class="container">
  <div class="row">
    <!-- Full width on mobile | Half on md | Third on lg -->
    <div class="col-12 col-md-6 col-lg-4">Card A</div>
    <div class="col-12 col-md-6 col-lg-4">Card B</div>
    <div class="col-12 col-md-6 col-lg-4">Card C</div>
  </div>
</div>

Bootstrap 5 breakpoints

BreakpointClass prefixStarts atTypical device
Extra smallcol-< 576pxPortrait phones
Smallcol-sm-≥ 576pxLandscape phones
Mediumcol-md-≥ 768pxTablets
Largecol-lg-≥ 992pxLaptops
Extra largecol-xl-≥ 1200pxDesktops
XXLcol-xxl-≥ 1400pxLarge desktops

Bootstrap Utility Classes

Utility classes let you style elements instantly with no custom CSS. Every utility maps to a specific CSS property. TipsInLearning uses them throughout this site for spacing, alignment, and colours.

Spacing — m, p

mt-3 = margin-top. pb-4 = padding-bottom. Scale 0–5.

Text — text-*

text-center, text-white, text-muted, text-uppercase.

Colours — bg-*

bg-primary, bg-dark, bg-light, bg-success.

Display — d-*

d-flex, d-none, d-block, d-md-flex.

Sizing — w-*, h-*

w-100 = 100% width. w-50 = 50% width.

Borders — border-*

border, border-0, rounded, rounded-pill.

HTML — Utility Classes in Action
<!-- Centered heading with bottom margin -->
<h1 class="text-center mb-4">TipsInLearning</h1>

<!-- Dark background, white text, padding, rounded corners -->
<div class="bg-dark text-white p-4 rounded">
  Styled box using only utility classes
</div>

<!-- Full-width button with top margin -->
<button class="btn btn-success w-100 mt-3">
  Full Width Button
</button>

<!-- Flex container with centered content -->
<div class="d-flex justify-content-center align-items-center gap-3 mt-4">
  <button class="btn btn-primary">HTML</button>
  <button class="btn btn-warning">CSS</button>
  <button class="btn btn-danger">Bootstrap</button>
</div>

Complete Bootstrap Page Example

Here is a complete, production-ready Bootstrap 5 page combining everything covered in this lesson — viewport tag, container, grid, components, and utility classes. Click Run to see it in your browser:

HTML — Full Bootstrap Page
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TipsInLearning Bootstrap Page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

  <!-- Full-width dark navbar -->
  <nav class="navbar navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">TipsInLearning</a>
    </div>
  </nav>

  <!-- Hero section -->
  <div class="bg-primary text-white py-5 text-center">
    <h1 class="display-5 fw-bold">Learn Bootstrap with TipsInLearning</h1>
    <p class="lead">Free, beginner-friendly Bootstrap tutorials</p>
    <a href="#" class="btn btn-light btn-lg">Start Now</a>
  </div>

  <!-- Main content with 3-card grid -->
  <div class="container my-5">
    <h2 class="text-center mb-4">Our Courses</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <h5 class="card-title">HTML</h5>
            <p class="card-text">Learn the structure of every webpage.</p>
            <a href="#" class="btn btn-outline-primary btn-sm">Start Course</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <h5 class="card-title">CSS</h5>
            <p class="card-text">Style your pages with confidence.</p>
            <a href="#" class="btn btn-outline-primary btn-sm">Start Course</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <h5 class="card-title">Bootstrap</h5>
            <p class="card-text">Build responsive sites in hours.</p>
            <a href="#" class="btn btn-outline-primary btn-sm">Start Course</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="bg-dark text-white text-center py-4 mt-5">
    <p class="mb-0">&copy; 2026 TipsInLearning. All rights reserved.</p>
  </footer>

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

Common Mistakes

These are the errors TipsInLearning sees most often from beginners setting up Bootstrap for the first time:

Missing the viewport meta tag
Without <meta name="viewport" content="width=device-width, initial-scale=1">, Bootstrap's entire responsive system breaks on mobile. The page will appear zoomed out, columns won't stack, and breakpoints won't trigger. This tag is mandatory. Every single Bootstrap page needs it.
Putting Bootstrap JS in the <head>
Bootstrap JS must go just before </body> — not in <head>. If you put it in the head, the script loads before HTML elements exist, causing interactive components like dropdowns and modals to fail silently.
Putting columns outside a row, or rows outside a container
The grid hierarchy must always be container → row → columns. If you put col-6 directly inside a container without a row, the gutter spacing breaks. If you skip the container entirely, layout width and padding won't work correctly.
Column numbers that exceed 12 in a row
Each row has exactly 12 column units. If your columns add up to more than 12 — say two col-7 elements (14 total) — the second one wraps to a new line. Always check that your column widths add up to 12 or less per row.
Linking your custom CSS before Bootstrap
If you add style.css before the Bootstrap CSS link, Bootstrap's styles will override yours. Always link Bootstrap first, then your own stylesheet so your custom rules take priority.
Challenge — Build and Set Up Your Bootstrap Page
1Create a new index.html file and add the correct Bootstrap 5 CDN CSS link inside <head> — don't forget the viewport meta tag
2Add the Bootstrap JS CDN script just before </body> — make sure it's not in the head
3Add a .container div and inside it create a two-column layout using col-md-6 — notice how they stack on mobile
4Use utility classes to add spacing, alignment, and colour — try mt-4, text-center, and bg-primary text-white p-3
5Add a Bootstrap card inside each column with a title, description, and button
6Resize your browser window to see Bootstrap's responsive behavior in action — the columns should stack on narrow screens
Lesson Summary — Getting Started with Bootstrap
1Know basic HTML and CSS before starting Bootstrap — JS is optional for most features
2CDN is the fastest setup — one CSS link in head, one JS script before </body>
3Viewport meta tag is mandatory — without it, mobile responsive design breaks completely
4Layout hierarchy is always container → row → col — never skip a level
5Column numbers per row must add up to 12 or less — excess wraps to a new line
6Your CSS must come after Bootstrap's — so your custom rules override Bootstrap's defaults

Questions About Bootstrap Setup

The questions TipsInLearning students ask most when setting up Bootstrap for the first time:

What is the best way to add Bootstrap to a website?
For beginners, the CDN method is by far the best choice. Add the Bootstrap CSS link inside <head> and the Bootstrap JS script just before </body>. No download, no installation, no build tools — Bootstrap is ready immediately. This is how TipsInLearning teaches it in all beginner lessons.
Do I need to download Bootstrap to use it?
No. Using the CDN method, you don't need to download anything. The Bootstrap CSS and JS files are served from jsDelivr's global CDN network directly into your page. Download is only needed if you need offline access or want to customize Bootstrap's source SCSS files for a production project.
Why is the viewport meta tag required for Bootstrap?
The viewport meta tag instructs mobile browsers how to control page dimensions and scaling. Without it, mobile browsers render the page at a typical desktop width and scale it down — making text tiny and layouts broken. Bootstrap's grid breakpoints depend on this tag to fire at the right screen widths. It is not optional and should be on every Bootstrap page you build.
What is the difference between .container and .container-fluid?
.container has a fixed max-width that responds at each breakpoint — it keeps content centered with padding on both sides, like a newspaper column. .container-fluid always spans 100% of the screen width — great for full-bleed sections like navbars, hero banners, and footers. Most pages use a mix of both: .container-fluid for the hero, .container for content.
Can I use Bootstrap without knowing JavaScript?
Yes, completely. The core of Bootstrap — the grid system, utility classes, typography, forms, buttons, tables, cards, and alerts — all work with HTML and CSS only. JavaScript is only required for interactive components like modals, dropdowns, tooltips, carousels, and collapses. You can build full, professional-looking layouts and pages with zero JavaScript knowledge.
Do I need npm to use Bootstrap 5?
Absolutely not. npm is only for advanced developers building with build tools like Webpack, Vite, or frameworks like React and Vue. If you're a beginner, use the CDN method. TipsInLearning recommends learning npm as part of the JavaScript course — after you're comfortable with HTML, CSS, and Bootstrap basics.
Why isn't my Bootstrap layout working on mobile?
The most common cause is a missing viewport meta tag. Check that <meta name="viewport" content="width=device-width, initial-scale=1"> is in your <head>. The second most common cause is columns not adding up to 12 or missing the required .row wrapper. Open your browser's DevTools (F12), switch to mobile view, and inspect the element to see which styles are applied.

Post a Comment