What is Bootstrap?

Bootstrap is a popular front-end framework that helps you design websites quickly using ready-made CSS and JavaScript classes. It helps your site look good on all screen sizes.

Setup

Add these links in your HTML <head> section:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Containers

Containers are used to center and pad your content. You can use:

.container – fixed width
.container-fluid – full width

This is inside a container

Grid System

Bootstrap uses a 12-column grid. Wrap columns inside .row and use .col classes.

Column 1

Column 2

Typography

Bootstrap gives simple text and heading styles.

Heading 1

Heading 2

This is a lead paragraph.

This text looks muted.

Centered text

Buttons

Use .btn class for buttons and choose color variants:

Forms

Bootstrap styles all form elements beautifully.

Cards

Card Title

Simple card example using Bootstrap.

Utilities

Quick helper classes for spacing, text, borders, and colors.

Padding & Background Example

Border and rounded corners

Common Components

Bootstrap offers many ready-made components like Alerts and Badges.

This is a success alert!

Info Badge