LAST UPDATED: August 25, 2025

Bootstrap Hello World

Hello Everyone!

In this tutorial, we will learn how to write a basic Hello World webpage using Bootstrap.

    
<!-- Save this as index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World with Bootstrap</title>
  <!-- Bootstrap CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light text-center">

  <div class="container mt-5">
    <h1 class="text-primary">Hello World!</h1>
    <p class="lead">Welcome to your first Bootstrap page.</p>
  </div>

</body>
</html>

Explanation:

Let's break down the Bootstrap code above.

1. `container` Class

This creates a responsive container that provides proper padding and centers the content.

2. `text-primary` Class

This applies Bootstrap’s primary theme color (blue by default) to the heading.

3. `lead` Class

This makes the paragraph stand out with slightly larger, lighter text.

4. Running the Code

To see the result:

Create an HTML file (e.g., index.html).
Copy and paste the Bootstrap code above (use the real HTML, not the escaped version).
Open the file in your browser to view the Hello World styled with Bootstrap.

Introduction to Bootstrap

1.1 Definition of Bootstrap

Bootstrap is a popular open-source front-end framework used for building responsive, mobile-first websites. It provides pre-styled components, a powerful grid system, and utility classes to speed up development.

<!-- Include Bootstrap via CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Task: Set up a simple HTML page and include Bootstrap using the CDN link.

1.2 History & Evolution

Bootstrap was originally developed at Twitter in 2011 to standardize internal tools. Over the years, it has evolved into one of the most widely used front-end frameworks. The latest version, Bootstrap 5, removes jQuery dependency and adds modern CSS features.

1.3 Why Use Bootstrap?

Bootstrap is widely adopted because it offers:

A responsive grid system for flexible layouts
Pre-styled UI components like buttons, modals, and navbars
Utility classes to apply styles quickly
Cross-browser compatibility and consistent design

<button class="btn btn-primary">Click Me</button>

1.4 Bootstrap vs Custom CSS

While Bootstrap speeds up development with ready-to-use components, custom CSS is still important for unique designs. A common approach is to use Bootstrap for layout and core UI, then enhance it with custom CSS for branding.

<div class="alert alert-success">
    This is a Bootstrap alert!
</div>

<!-- Custom CSS can override Bootstrap -->
<style>
    .alert-success { background-color: teal; }
</style>

1.5 Real-World Use Cases

Bootstrap is widely used in:

Corporate websites
Admin dashboards
Portfolio and personal blogs
Prototypes and MVPs

<div class="container">
    <h1 class="text-center text-primary">Hello, Bootstrap!</h1>
</div>

Bootstrap Setup

How to Add Bootstrap to a Webpage

There are two simple ways to use Bootstrap:

Option 1: Use a CDN – You copy and paste special links from the internet directly into your HTML file.
Option 2: Download the Files – You download Bootstrap as a ZIP file, keep it in your project folder, and link to it like a normal CSS or JS file.

1.1 Using Bootstrap via CDN

This is the easiest method. Just paste these lines in your HTML file:

<!-- Put this in the <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Put this before </body> closes -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

1.2 Installing Bootstrap with npm

For larger projects, install Bootstrap using npm to manage versions easily:

npm install bootstrap

After installation, link Bootstrap’s compiled CSS and JS files into your project. If using npm, you can import them in your main.js or app.css.

// Import Bootstrap CSS and JS
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

1.3 Using Bootstrap by Downloading Files

You can also download Bootstrap from the official website. After unzipping, you will get folders like css and js. Place them in your project and link like this:

<!-- Link to Bootstrap CSS from your folder -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

<!-- Link to Bootstrap JS from your folder -->
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>

1.4 Important Meta Tag

To make sure your page looks good on mobile devices, add this line inside the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

1.5 Test if Bootstrap Works

After setup, test it by adding a Bootstrap button. If the button looks blue with rounded corners, Bootstrap is working!

<button class="btn btn-primary">Hello Bootstrap!</button>

Bootstrap Typography

2.1 Headings and Display Text

In normal HTML, we write headings using <h1> to <h6>. Bootstrap keeps those but also gives extra classes like .display-1 to .display-6. These make text much bigger and more eye-catching, often used for titles or banners.

<h1>Normal h1 Heading</h1>
<h2>Normal h2 Heading</h2>

<p class="display-1">Very Big Title (Display 1)</p>
<p class="display-4">Slightly Smaller Title (Display 4)</p>

2.2 Making Text Bold or Light

Bootstrap has simple classes to change how thick or thin text looks. Use .fw-bold for bold text, .fw-normal for regular text, and .fw-light for thin text.

<p class="fw-bold">This text is bold</p>
<p class="fw-normal">This text is normal</p>
<p class="fw-light">This text is light</p>

2.3 Aligning Text

Instead of writing custom CSS, you can quickly align text in Bootstrap: .text-start (left), .text-center (middle), and .text-end (right).

<p class="text-start">This is on the left</p>
<p class="text-center">This is in the center</p>
<p class="text-end">This is on the right</p>

2.4 Adding or Removing Underlines

You can add or remove underlines with simple classes. .text-decoration-underline makes text underlined, .text-decoration-line-through puts a line across the text, and .text-decoration-none removes underlines.

<p class="text-decoration-underline">This is underlined</p>
<p class="text-decoration-line-through">This has a strike-through</p>
<p class="text-decoration-none">This has no underline</p>

2.5 Changing Letter Case

Bootstrap can quickly change how letters look: .text-lowercase makes everything small, .text-uppercase makes everything capital, and .text-capitalize makes the first letter of each word big.

<p class="text-lowercase">HELLO WORLD</p>
<p class="text-uppercase">hello world</p>
<p class="text-capitalize">hello world</p>

2.6 Changing Font Size

Bootstrap gives shortcut classes from .fs-1 to .fs-6. .fs-1 is the biggest and .fs-6 is the smallest. This also works well on different screen sizes.

<p class="fs-1">Biggest size (fs-1)</p>
<p class="fs-3">Medium size (fs-3)</p>
<p class="fs-6">Smallest size (fs-6)</p>

Colors & Backgrounds

3.1 Change Text Colors

You can easily change the color of text without writing extra CSS. Bootstrap provides ready-made classes like .text-primary, .text-success, .text-danger, and many more. Just add the class to your element.

<p class="text-primary">This is blue text</p>
<p class="text-success">This is green text</p>
<p class="text-danger">This is red text</p>

3.2 Change Background Colors

Just like text, you can also set background colors using classes such as .bg-primary, .bg-warning, and .bg-dark. These classes automatically apply matching text colors for readability.

<div class="bg-primary text-white p-2">Blue background</div>
<div class="bg-warning p-2">Yellow background</div>
<div class="bg-dark text-white p-2">Dark background</div>

3.3 Adjust Opacity (Transparency)

Opacity lets you make colors lighter or more see-through. Use classes like .bg-opacity-25, .bg-opacity-50, and .bg-opacity-75 along with a background color.

<div class="bg-primary bg-opacity-25 p-2">25% opaque</div>
<div class="bg-primary bg-opacity-50 p-2">50% opaque</div>
<div class="bg-primary bg-opacity-75 p-2">75% opaque</div>

3.4 Tips for Readability & Contrast

Always make sure text is easy to read on the background you choose. For example, use .text-white on dark backgrounds, and .text-dark on light backgrounds. This improves readability and accessibility for all users.

<div class="bg-dark text-white p-2">White text on dark background</div>
<div class="bg-light text-dark p-2">Dark text on light background</div>

Bootstrap Grid System

The Bootstrap Grid System is a way to arrange your webpage content into rows and columns. Think of it like drawing invisible boxes on your screen to place text, images, or buttons neatly. It helps make your design responsive — meaning it looks good on mobile phones, tablets, and desktops without extra effort.

4.1 Container Classes (.container, .container-fluid)

A container is like the main box that holds everything. Bootstrap has two main container types:

.container → has fixed widths that change at different screen sizes (good for centered layouts).
.container-fluid → always stretches to take up the full screen width (good for full-width layouts).

<div class="container">This box has fixed width</div>
<div class="container-fluid">This box is full width</div>

4.2 Rows and Columns

Inside a container, you create .row to group horizontal sections. Inside each row, you add .col to make columns. Columns automatically share space equally if you don’t specify sizes.

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
  </div>
</div>

4.3 Breakpoints (sm, md, lg, xl, xxl)

Breakpoints control how columns behave on different devices. Bootstrap uses 12 columns in a row. You can tell how many columns to take up at different screen sizes using these breakpoints:

sm → small screens (≥576px)
md → medium screens (≥768px)
lg → large screens (≥992px)
xl → extra large screens (≥1200px)
xxl → very large screens (≥1400px)

Example: .col-sm-6 means “take half the row width on small screens and bigger.”

<div class="row">
  <div class="col-sm-6 col-lg-4">Responsive Column</div>
  <div class="col-sm-6 col-lg-8">Responsive Column</div>
</div>

4.4 Column Ordering and Offsetting

Sometimes you want to rearrange columns or leave empty space. Bootstrap gives you:

Ordering: .order-1, .order-2 etc. to control column order.
Offsetting: .offset-* adds space to the left of a column.

<div class="row">
  <div class="col order-2">I show second</div>
  <div class="col order-1">I show first</div>
</div>

<div class="row">
  <div class="col-4 offset-2">I start with empty space on left</div>
</div>

4.5 Nesting Columns

You can put a new row inside a column. This is called nesting, and it helps build more complex layouts.

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

4.6 Images (img-fluid, rounded, thumbnail)

Bootstrap makes images easy to style:

.img-fluid → image scales with screen size.
.rounded → adds rounded corners.
.img-thumbnail → adds border and padding like a photo frame.

<img src="image.jpg" class="img-fluid" alt="Responsive">
<img src="image.jpg" class="rounded" alt="Rounded corners">
<img src="image.jpg" class="img-thumbnail" alt="Thumbnail">

4.7 Real Example: 3-Column Product Layout

Here’s how you might use the grid for a simple product section:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="prod1.jpg" class="img-fluid" alt="Product 1">
      <p>Product 1 description</p>
    </div>
    <div class="col-md-4">
      <img src="prod2.jpg" class="img-fluid" alt="Product 2">
      <p>Product 2 description</p>
    </div>
    <div class="col-md-4">
      <img src="prod3.jpg" class="img-fluid" alt="Product 3">
      <p>Product 3 description</p>
    </div>
  </div>
</div>

On larger screens, the products appear side by side in 3 columns. On smaller screens, they stack vertically one by one — automatically!

Bootstrap Utilities

Bootstrap utilities are small, ready-to-use classes that help you quickly style elements without writing custom CSS. They cover spacing, alignment, sizing, visibility, positioning, borders, and shadows. Think of them as shortcuts to make your page look nice quickly.

6.1 Spacing

Use spacing utilities to add margin (outside space) or padding (inside space). The format is: m{side}-{size} for margin, p{side}-{size} for padding.

m-3 → margin all around
mt-2 → margin-top
px-4 → padding left and right

<div class="p-3 mb-2 bg-light">Box with padding and margin</div>

6.2 Flexbox

Flex utilities let you easily align and distribute elements. Common classes include:

d-flex → enable flexbox
justify-content-center → center items horizontally
align-items-center → center items vertically

<div class="d-flex justify-content-center align-items-center">
  <button class="btn btn-primary">Centered Button</button>
</div>

6.3 Sizing

Set width or height using utility classes: w-25 (25% width), w-50, h-100 (100% height), etc.

<div class="w-50 p-2 bg-info text-white">Half width box</div>

6.4 Visibility

Control whether elements are visible on certain devices.

d-none → hide element
d-sm-block → show element only on small screens and above

<p class="d-none d-md-block">Visible only on medium+ screens</p>

6.5 Positioning

Position elements using utilities like:

position-relative / position-absolute
top-0, start-50 → move element to top or left
translate-middle → center element with transform

<div class="position-relative">
  <span class="position-absolute top-0 start-50 translate-middle">Centered Text</span>
</div>

6.6 Borders and Shadows

Quickly add borders, rounded corners, or shadows to elements.

border → simple border
rounded → slightly rounded corners
shadow / shadow-lg → box shadows

<div class="p-3 border rounded shadow">Box with border, rounded corners & shadow</div>

6.7 Real Example

Using multiple utilities together:

<div class="d-flex justify-content-around align-items-center p-3 border rounded shadow">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-success">Button 2</button>
  <button class="btn btn-danger">Button 3</button>
</div>

The above box is centered, has padding, a border, rounded corners, shadow, and three nicely spaced buttons — all without writing a single CSS rule!

Bootstrap Forms

Forms are a key part of any web application, allowing users to input data. Bootstrap provides ready-to-use form classes to make creating stylish, responsive forms simple, without writing custom CSS.

7.1 Form Controls

Bootstrap form controls include inputs, selects, and textareas. Use .form-control for text inputs and .form-select for dropdowns.

<input type="text" class="form-control" placeholder="Enter your name">
<select class="form-select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

7.2 Input Groups

Input groups allow you to add text, icons, or buttons next to inputs. Useful for prepending or appending extra information.

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

7.3 Validation States

Show feedback to users about their input using validation classes. .is-valid for correct input, .is-invalid for incorrect input.

<input type="text" class="form-control is-valid" placeholder="Valid input">
<div class="valid-feedback">Looks good!</div>

<input type="text" class="form-control is-invalid" placeholder="Invalid input">
<div class="invalid-feedback">Please provide a valid value.</div>

7.4 Floating Labels

Floating labels allow the label to appear inside the input and move above when typing. This creates a cleaner, modern look.

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
  <label for="floatingEmail">Email address</label>
</div>

7.5 Form Layouts: Inline, Horizontal, Vertical

Bootstrap makes it easy to arrange form elements:

Vertical forms: Default layout, elements stacked vertically.
Horizontal forms: Use grid classes to align labels and inputs side by side.
Inline forms: Elements appear in a row for compact layouts. Use .row and .col classes.

<!-- Inline Form -->
<form class="row g-2 align-items-center">
  <div class="col-auto">
    <input type="text" class="form-control" placeholder="Name">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Using Bootstrap forms, you can quickly build responsive, stylish forms without writing custom CSS, and combine multiple features like validation, input groups, and floating labels to improve user experience.

Bootstrap Components

Bootstrap provides a set of prebuilt components to help you build responsive and interactive websites without writing custom CSS or JavaScript. These components include alerts, buttons, cards, modals, navigation bars, and more.

8.1 Alerts

Alerts are used to provide feedback messages to users. You can use different contextual classes like .alert-primary, .alert-success, .alert-danger, etc.

<div class="alert alert-success" role="alert">
  This is a success alert!
</div>

8.2 Badges

Badges are small count indicators or labels. You can use them inside buttons or headings.

<span class="badge bg-primary">New</span>

8.3 Buttons

Buttons can be styled using classes like .btn with context classes like .btn-primary, .btn-success, etc. They can also be made outline or link style.

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-outline-secondary">Outline Button</button>

8.4 Cards

Cards are flexible containers for content, including text, images, and actions.

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

8.5 Collapse

The collapse component allows you to hide and show content dynamically with animation.

<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample">Toggle</a>
<div class="collapse" id="collapseExample">
  <div class="card card-body">Hidden content</div>
</div>

8.6 Dropdowns

Dropdowns provide a toggleable menu for navigation or actions.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>

8.7 Forms

Bootstrap forms make creating input fields, labels, and validation messages simple and responsive. See the Forms section for details.

8.8 Modals

Modals are popup dialogs that overlay the page content. They can be used for alerts, forms, or custom content.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch Modal</button>
<div class="modal fade" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content">Modal content</div>
  </div>
</div>

8.9 Navs and Tabs

Navs and tabs allow users to switch between different views or sections.

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
</ul>

8.10 Navbar

Navbar is a responsive navigation header that can include links, forms, and dropdowns.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

8.11 Pagination

Pagination allows navigation between pages of content.

<nav><ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
</ul></nav>

8.12 Progress Bars

Progress bars visually show completion or loading status.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%;">50%</div>
</div>

8.13 Toasts

Toasts are small popup notifications that appear temporarily.

<div class="toast" role="alert">Message</div>

8.14 Tooltips

Tooltips display small helper text when users hover over elements.

<button type="button" data-bs-toggle="tooltip" title="Tooltip">Hover me</button>

Bootstrap Icons

Bootstrap Icons are a library of free, high-quality icons designed to work seamlessly with Bootstrap components. You can use them to enhance your website’s UI without needing custom graphics.

1. Using Bootstrap Icons via CDN

The easiest way to use Bootstrap Icons is via a CDN. Include the link in your <head> section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

2. Common Icon Classes

Each icon has its own class name. Use <i class="bi bi-alarm"></i> to add an alarm icon. Example:

<i class="bi bi-alarm"></i>
<i class="bi bi-heart"></i>
<i class="bi bi-star"></i>

3. Customizing Icon Size

Adjust the size using font-size in CSS or Bootstrap’s sizing classes like fs-1 to fs-6.

<i class="bi bi-alarm fs-1"></i> <!-- Large icon -->
<i class="bi bi-alarm fs-4"></i> <!-- Medium icon -->

4. Changing Icon Color

You can change icon color using text color utilities like .text-primary, .text-success, or custom CSS.

<i class="bi bi-alarm text-primary"></i>
<i class="bi bi-alarm text-danger"></i>

5. Accessibility with Icons

Always add aria-label or role="img" for screen readers:

<i class="bi bi-alarm" role="img" aria-label="Alarm Icon"></i>

Bootstrap Customization

Bootstrap provides default styles and components, but you can customize them to match your design requirements. This section explains simple ways to change Bootstrap's look and behavior without breaking its framework.

1. Overriding Styles with Custom CSS

You can override Bootstrap's default styles by writing your own CSS. Include your CSS file after Bootstrap’s CSS to ensure your styles take precedence.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="custom.css">

/* Example in custom.css */
.btn-primary {
    background-color: #ff6600;
    border-color: #ff6600;
}

2. Using Sass Variables

Bootstrap uses Sass variables to define colors, spacing, font sizes, and more. You can change these variables before compiling Bootstrap to create a customized design.

$primary: #ff6600;
$font-family-base: 'Arial, sans-serif';

3. Creating Custom Themes

Combine custom CSS and modified Sass variables to create a unique theme. You can build multiple themes for different projects or switch between dark/light modes.

body {
    background-color: $body-bg;
    color: $body-color;
}

4. Extending Bootstrap Components

You can create new components or extend existing ones using your own CSS or JavaScript while still leveraging Bootstrap's classes.

<div class="card custom-card">
    <div class="card-body">
        Custom card content
    </div>
</div>

/* custom-card can have extra padding, border-radius, or shadows in custom.css */

5. Using Utility API

Bootstrap 5 allows you to create custom utility classes using the Utility API. This is useful to add reusable styles without writing long CSS rules.

@layer utilities {
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
}