Coding Practice

Learn Bootstrap 4 Step by Step

Learn Bootstrap 4 in simple English. Understand the concept, check examples, and practice step by step. This page helps you work with real-world projects that still use Bootstrap 4.

Start Learning Try Practice

What is Bootstrap 4?

Bootstrap 4 is a CSS framework used to build responsive web pages. It provides ready-made classes for layout, buttons, forms, cards, and many useful design components.

If you already know Bootstrap 5, then learning Bootstrap 4 becomes easier. It is still useful because many existing projects use Bootstrap 4.

HTML

Creates the structure

CSS

Adds design and styling

Bootstrap 4

Provides ready-made classes

Why Learn Bootstrap 4?

Many projects still use Bootstrap 4
Useful for job preparation
Helps understand older code
Easy to learn after Bootstrap 5

Good for maintaining existing projects
Helps build responsive layouts
Useful for frontend practice
Saves time in real projects

Bootstrap 4 vs Bootstrap 5

Bootstrap 4 and Bootstrap 5 are similar in many ways, but there are some important differences.

Bootstrap 4

Uses jQuery for some components
Older version
Still used in many projects
Useful for project support

Bootstrap 5

No jQuery dependency
Latest version
Better performance
Recommended for new learning

Simple idea: Learn Bootstrap 5 first, then learn Bootstrap 4 for old project understanding and job support.

How to Add Bootstrap 4

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/4.6.2/css/bootstrap.min.css">

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

Basic Bootstrap 4 Page

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

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

<body>

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

</body>
</html>

Core Topics in Bootstrap 4

1. Container

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

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

2. Grid System

Bootstrap 4 uses rows and columns to create responsive layouts.

<div class="row"> <div class="col">...</div> </div>

3. Typography

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

text-primary, text-center, text-muted

4. Colors

You can use text color and background color classes.

text-success, bg-warning, bg-dark

5. Buttons

Bootstrap buttons are easy to create using ready classes.

btn btn-primary, btn btn-success

6. Cards

Cards are used to show content in a clean box design.

card, card-body, card-title

7. Spacing

Bootstrap 4 gives margin and padding utility classes.

mt-5, mb-3, p-4, px-3

8. Forms

Forms become cleaner using Bootstrap form classes.

form-control, form-group, form-label

9. Navbar

Navbar is used to create header navigation sections.

navbar, navbar-brand, navbar-nav

10. Responsive Design

Bootstrap 4 classes help layouts adjust on different screens.

col-md-6, col-sm-12

Quick Understanding

Common Classes

container = layout
row = horizontal section
col = columns
btn = button
card = content box

Spacing Classes

mt = margin top
mb = margin bottom
p = padding
px = left and right padding
py = top and bottom padding

Practice Tasks

Try these simple Bootstrap 4 tasks:

Create one container with heading

Create two columns layout

Create 3 buttons

Create one card

Create one simple form

Live Example

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

Code Editor

Output

Mini Project

Build This

Navbar
Header section
3 cards section
Contact form
Footer

Goal

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

Learning Flow

Container

Learn how layout starts.

Grid System

Learn rows and columns.

Components

Practice buttons, cards, and forms.

Responsive Design

Make pages work on all screens.

Basic Interview Questions

1. What is Bootstrap 4?

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

2. Why do we use Bootstrap 4?

To build websites faster using ready-made classes.

3. What is container?

Container is used to wrap content and provide layout.

4. What is grid system?

It divides the page into rows and columns.

5. Difference between Bootstrap 4 and 5?

Bootstrap 4 uses jQuery. Bootstrap 5 does not.

Final Message

Bootstrap 4 is easy when you practice regularly. Do not just copy code. Try changing classes and see the output.

Learn Bootstrap 5 first, then Bootstrap 4 for better project understanding.

`;function runCode() { var code = document.getElementById("dt-bootstrap4-editor").value; var frame = document.getElementById("dt-bootstrap4-output"); var doc = frame.contentWindow.document; doc.open(); doc.write(code); doc.close(); }function resetCode() { document.getElementById("dt-bootstrap4-editor").value = defaultBootstrap4Code; runCode(); }window.dtBootstrap4RunCode = runCode; window.dtBootstrap4ResetCode = resetCode;document.addEventListener("DOMContentLoaded", function () { resetCode(); }); })();