Skip to main content

Getting Started with Bootstrap

In this tutorial, we'll introduce Bootstrap, a popular CSS framework, and demonstrate how to use it in a simple project. We'll cover its key features, including the grid system, components, and utility classes.

What is Bootstrap?

Bootstrap is a powerful, open-source CSS framework designed to help developers create responsive, mobile-first websites. It includes a grid system, pre-built components, and utility classes that simplify the web design process.

Using Bootstrap in your project

To start using Bootstrap, you can either download the files from the official website ( or use the CDN links. For this tutorial, we'll use the CDN links.

Add the following links to the head section of your HTML file:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="" rel="stylesheet" />
<title>My Bootstrap Website</title>
<!-- Add Bootstrap components here -->
<script src=""></script>

Bootstrap grid system

The Bootstrap grid system uses a series of containers, rows, and columns to create responsive layouts. Containers hold rows, and rows hold columns. The grid is based on a 12-column layout.


<div class="container">
<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>

Bootstrap components

Bootstrap includes pre-built components like buttons, forms, and navigation. To use a component, simply add the appropriate Bootstrap classes to your HTML elements.

Example (buttons):

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

Bootstrap utility classes

Utility classes in Bootstrap provide quick ways to apply common CSS properties. They help you customize elements without writing additional CSS code.

Example (spacing):

<div class="mt-5">Margin top 5</div>
<div class="mb-3">Margin bottom 3</div>
<div class="pt-2">Padding top 2</div>
<div class="pb-4">Padding bottom 4</div>


In this tutorial, we introduced Bootstrap, a popular CSS framework, and demonstrated how to use it in a simple project. By using Bootstrap's grid system, components, and utility classes, you can create professional, responsive websites with ease.