Coding Practice

Learn Bootstrap 3 Step by Step

Learn Bootstrap 3 in simple English. Understand the concept, check examples, and practice step by step. This page helps you understand older projects that still use Bootstrap 3.

Start Learning Try Practice

What is Bootstrap 3?

Bootstrap 3 is an older version of the Bootstrap framework. It helps you build responsive web pages using ready-made classes for layout, buttons, forms, navigation bars, and more.

Even though Bootstrap 5 is the latest version, Bootstrap 3 is still useful because many older websites and projects use it.

HTML

Creates the structure

CSS

Adds design and styling

Bootstrap 3

Provides ready-made classes

Why Learn Bootstrap 3?

Many old websites still use Bootstrap 3
Useful for job support and project maintenance
Helps understand legacy frontend code
Easy way to learn old framework structure

Useful for interviews when old versions are discussed
Good for working on support projects
Helps compare Bootstrap versions clearly
Good for understanding framework basics

Bootstrap Versions Overview

Understanding versions helps students know which version to learn first and which version is useful for support.

Bootstrap 3

Old version, still used in many old projects.

Bootstrap 4

Improved version with better layout system.

Bootstrap 5

Latest version and recommended for new students.

Simple idea: Start with Bootstrap 5 for new learning. Learn Bootstrap 3 for old project support.

How to Add Bootstrap 3

The easiest way is to use the CDN link. Add this code inside the <head> section of your HTML page.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

Simple meaning: after adding this link, you can start using Bootstrap 3 classes in your HTML code.

Basic Bootstrap 3 Page

Below is a simple Bootstrap 3 example with container, heading, paragraph, and button.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 3 Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>

<div class="container">
  <h1 class="text-primary">Hello Students</h1>
  <p>This is Bootstrap 3 example.</p>
  <button class="btn btn-warning">Click Me</button>
</div>

</body>
</html>

Core Topics in Bootstrap 3

1. Container

Container is used to wrap content and give proper layout spacing.

<div class="container">...</div>

2. Grid System

Bootstrap 3 uses rows and columns to create responsive layouts.

<div class="row"> <div class="col-md-6">...</div> </div>

3. Typography

Bootstrap gives text classes for color, alignment, and style.

text-primary, text-center, text-success

4. Buttons

Buttons are easy to create using ready-made Bootstrap classes.

btn btn-primary, btn btn-success

5. Panels

Panels are used to show content inside a clean box layout.

panel panel-default, panel-heading, panel-body

6. Forms

Forms become cleaner using Bootstrap form classes.

form-control, form-group

7. Navbar

Navbar is used to create header navigation sections.

navbar, navbar-default, navbar-brand

8. Glyphicons

Bootstrap 3 includes built-in icons called Glyphicons.

<span class="glyphicon glyphicon-user"></span>

9. Tables

Tables can be styled easily using Bootstrap table classes.

table table-bordered, table-striped

10. Responsive Layout

Bootstrap 3 helps pages adjust on mobile, tablet, and desktop screens.

col-xs-12, col-sm-6, col-md-4

Quick Understanding

Common Classes

container = layout
row = horizontal group
col-md-6 = column
btn = button
panel = content box

Important Features

navbar = navigation bar
form-control = input design
glyphicon = icon
table = table styling
text-primary = text color

Practice Tasks

Try these simple Bootstrap 3 tasks:

Create one container with heading

Create two columns layout

Create 3 buttons

Create one panel

Create one simple form

Live Example

This example uses Bootstrap 3 CDN with container, heading, paragraph, and button.

Code Editor

Output

Mini Project

Build This

Navbar
Header section
2 column layout
Panel section
Contact form

Goal

This project helps students combine layout, buttons, panels, and forms into one simple webpage.

Learning Flow

Container

Learn how layout starts.

Grid System

Learn rows and columns.

Components

Practice buttons, panels, and forms.

Responsive Design

Make pages work on all screens.

Basic Interview Questions

1. What is Bootstrap 3?

Bootstrap 3 is a CSS framework used to build responsive web pages.

2. Why do we use Bootstrap 3?

To build websites faster using ready-made classes.

3. What is container?

Container is used to wrap content and provide layout.

4. What is panel in Bootstrap 3?

Panel is used to create content boxes in Bootstrap 3.

5. What is Glyphicon?

Glyphicon is the built-in icon system used in Bootstrap 3.

Final Message

Bootstrap 3 becomes easy when you practice regularly. Do not only copy the code. Change the classes, test the output, and see what happens.

Learn Bootstrap 5 first for new projects, then use Bootstrap 3 for old project support.

`;function runCode() { var code = document.getElementById("dt-bootstrap3-editor").value; var frame = document.getElementById("dt-bootstrap3-output"); var doc = frame.contentWindow.document; doc.open(); doc.write(code); doc.close(); }function resetCode() { document.getElementById("dt-bootstrap3-editor").value = defaultBootstrap3Code; runCode(); }window.dtBootstrap3RunCode = runCode; window.dtBootstrap3ResetCode = resetCode;document.addEventListener("DOMContentLoaded", function () { resetCode(); }); })();