Learn Bootstrap - 5 Code Examples & CST Typing Practice Test

Bootstrap is a popular open-source CSS framework for building responsive, mobile-first websites. It provides a collection of pre-designed UI components, utilities, and JavaScript plugins to speed up web development.

View all 5 Bootstrap code examples →

Bootstrap Simple Counter Bootstrap Counter with Step Bootstrap Counter with Min/Max Bootstrap Counter with Auto Increment Bootstrap Counter with Double Increment

Learn BOOTSTRAP with Real Code Examples

Updated Nov 23, 2025

Explain

Bootstrap offers a grid system and responsive design out-of-the-box.

It includes ready-to-use components like buttons, modals, forms, and navbars.

It helps developers quickly create consistent and mobile-friendly UIs.

Core Features

Flexbox-based grid layout

Typography and color utilities

Responsive breakpoints

Customizable via Sass variables

JavaScript components with jQuery (Bootstrap 4) or vanilla JS (Bootstrap 5+)

Basic Concepts Overview

Containers (`.container`, `.container-fluid`)

Grid rows (`.row`) and columns (`.col-*`)

Responsive breakpoints (`sm`, `md`, `lg`, `xl`, `xxl`)

Typography and utility classes

Components: buttons, forms, navbars, cards

Project Structure

index.html - main page layout

assets/css/ - custom styles

assets/js/ - optional custom scripts

node_modules/bootstrap - installed framework

partials/ - reusable components (navbar, footer)

Building Workflow

Set up project with Bootstrap CSS/JS

Define container and grid layout

Add components for UI elements

Customize using utility classes or Sass

Include JavaScript plugins if needed

Difficulty Use Cases

Beginner: static pages

Intermediate: responsive landing pages

Advanced: admin dashboards

Expert: fully customized theme

Community: large-scale Bootstrap-based apps

Comparisons

Simpler than full JS frameworks

Faster for prototyping than custom CSS

Larger than Tailwind in base size

More prebuilt components than Materialize

Cross-browser consistency out-of-the-box

Versioning Timeline

2011 - Bootstrap 1.0 released

2012 - Bootstrap 2.0: responsive design

2013 - Bootstrap 3.0: mobile-first, new grid

2018 - Bootstrap 4.0: Flexbox, Sass, improved components

2021 - Bootstrap 5.0: dropped jQuery, improved utilities

Glossary

Container: main wrapper for layout

Row: horizontal group of columns

Column: vertical section inside row

Utility: small reusable class for styling

Component: prebuilt UI element

Code Sample Descriptions

Bootstrap Simple Counter

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Counter</title>
</head>
<body>
<div class="container mt-5 text-center bg-light text-dark" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group my-3" role="group">
<button id="increment" class="btn btn-primary">+</button>
<button id="decrement" class="btn btn-danger">-</button>
<button id="reset" class="btn btn-secondary">Reset</button>
</div>
<button id="theme-btn" class="btn btn-warning">Switch Theme</button>
</div>
<script>
let count = 0;
let isDark = false;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
  isDark = !isDark;
  container.classList.toggle('bg-dark', isDark);
  container.classList.toggle('text-white', isDark);
  container.classList.toggle('bg-light', !isDark);
  container.classList.toggle('text-dark', !isDark);
};
</script>
</body>
</html>

Basic counter with increment, decrement, reset, and theme toggle using Bootstrap classes.

Let’s Try →

Bootstrap Counter with Step

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Counter Step</title>
</head>
<body>
<div class="container mt-5 text-center bg-light text-dark" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group my-3" role="group">
<button id="increment" class="btn btn-primary">+5</button>
<button id="decrement" class="btn btn-danger">-5</button>
<button id="reset" class="btn btn-secondary">Reset</button>
</div>
<button id="theme-btn" class="btn btn-warning">Switch Theme</button>
</div>
<script>
let count = 0;
let step = 5;
let isDark = false;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
document.getElementById('increment').onclick = () => { count += step; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { count -= step; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
  isDark = !isDark;
  container.classList.toggle('bg-dark', isDark);
  container.classList.toggle('text-white', isDark);
  container.classList.toggle('bg-light', !isDark);
  container.classList.toggle('text-dark', !isDark);
};
</script>
</body>
</html>

Counter increments/decrements by a custom step value using Bootstrap buttons.

Let’s Try →

Bootstrap Counter with Min/Max

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Counter Min Max</title>
</head>
<body>
<div class="container mt-5 text-center bg-light text-dark" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group my-3" role="group">
<button id="increment" class="btn btn-primary">+</button>
<button id="decrement" class="btn btn-danger">-</button>
<button id="reset" class="btn btn-secondary">Reset</button>
</div>
<button id="theme-btn" class="btn btn-warning">Switch Theme</button>
</div>
<script>
let count = 0;
let min = 0;
let max = 10;
let isDark = false;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
document.getElementById('increment').onclick = () => { if(count < max) count++; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { if(count > min) count--; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
  isDark = !isDark;
  container.classList.toggle('bg-dark', isDark);
  container.classList.toggle('text-white', isDark);
  container.classList.toggle('bg-light', !isDark);
  container.classList.toggle('text-dark', !isDark);
};
</script>
</body>
</html>

Counter with minimum and maximum limits using Bootstrap buttons.

Let’s Try →

Bootstrap Counter with Auto Increment

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Auto Counter</title>
</head>
<body>
<div class="container mt-5 text-center bg-light text-dark" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group my-3" role="group">
<button id="increment" class="btn btn-primary">+</button>
<button id="decrement" class="btn btn-danger">-</button>
<button id="reset" class="btn btn-secondary">Reset</button>
<button id="auto-btn" class="btn btn-info">Start Auto</button>
</div>
<button id="theme-btn" class="btn btn-warning">Switch Theme</button>
</div>
<script>
let count = 0;
let isDark = false;
let auto = false;
let timer;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
function updateCounter() { countEl.textContent = count; container.classList.toggle('bg-dark', isDark); container.classList.toggle('text-white', isDark); container.classList.toggle('bg-light', !isDark); container.classList.toggle('text-dark', !isDark); document.getElementById('auto-btn').textContent = auto ? 'Stop Auto' : 'Start Auto'; }
document.getElementById('increment').onclick = () => { count++; updateCounter(); };
document.getElementById('decrement').onclick = () => { count--; updateCounter(); };
document.getElementById('reset').onclick = () => { count = 0; updateCounter(); };
document.getElementById('theme-btn').onclick = () => { isDark = !isDark; updateCounter(); };
document.getElementById('auto-btn').onclick = () => { auto = !auto; if(auto) timer = setInterval(() => { count++; updateCounter(); }, 1000); else clearInterval(timer); updateCounter(); };
updateCounter();
</script>
</body>
</html>

Counter automatically increments every second with Bootstrap styling.

Let’s Try →

Bootstrap Counter with Double Increment

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Double Increment</title>
</head>
<body>
<div class="container mt-5 text-center bg-light text-dark" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group my-3" role="group">
<button id="increment" class="btn btn-primary">+</button>
<button id="double-increment" class="btn btn-success">++</button>
<button id="decrement" class="btn btn-danger">-</button>
<button id="reset" class="btn btn-secondary">Reset</button>
</div>
<button id="theme-btn" class="btn btn-warning">Switch Theme</button>
</div>
<script>
let count = 0;
let isDark = false;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
function updateCounter() { countEl.textContent = count; container.classList.toggle('bg-dark', isDark); container.classList.toggle('text-white', isDark); container.classList.toggle('bg-light', !isDark); container.classList.toggle('text-dark', !isDark); }
document.getElementById('increment').onclick = () => { count++; updateCounter(); };
document.getElementById('double-increment').onclick = () => { count += 2; updateCounter(); };
document.getElementById('decrement').onclick = () => { count--; updateCounter(); };
document.getElementById('reset').onclick = () => { count = 0; updateCounter(); };
document.getElementById('theme-btn').onclick = () => { isDark = !isDark; updateCounter(); };
updateCounter();
</script>
</body>
</html>

Counter has a button that increments by 2.

Let’s Try →

Frequently Asked Questions about Bootstrap

What is Bootstrap?

What are the primary use cases for Bootstrap?

Responsive websites and web apps. Landing pages and marketing sites. Admin dashboards and internal tools. Rapid prototyping. Cross-browser compatible UIs

What are the strengths of Bootstrap?

Speeds up front-end development. Consistent cross-browser styling. Large community and documentation. Extensive ready-to-use components. Responsive design by default

What are the limitations of Bootstrap?

Websites may look similar without customization. Heavy reliance on utility classes can clutter HTML. Requires overrides for unique designs. Bootstrap 4 relies on jQuery (not Bootstrap 5). Not a full front-end framework (logic needs JS separately)

How can I practice Bootstrap typing speed?

CodeSpeedTest offers 5+ real Bootstrap code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn Bootstrap - 5 Code Examples & CST Typing Practice Test

Code Sample Descriptions

Bootstrap Simple Counter

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Counter</title>
</head>
<body>
<div class="container mt-5 text-center bg-light text-dark" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group my-3" role="group">
<button id="increment" class="btn btn-primary">+</button>
<button id="decrement" class="btn btn-danger">-</button>
<button id="reset" class="btn btn-secondary">Reset</button>
</div>
<button id="theme-btn" class="btn btn-warning">Switch Theme</button>
</div>
<script>
let count = 0;
let isDark = false;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
  isDark = !isDark;
  container.classList.toggle('bg-dark', isDark);
  container.classList.toggle('text-white', isDark);
  container.classList.toggle('bg-light', !isDark);
  container.classList.toggle('text-dark', !isDark);
};
</script>
</body>
</html>

Basic counter with increment, decrement, reset, and theme toggle using Bootstrap classes.

Let’s Try →

Bootstrap Counter with Step

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Counter Step</title>
</head>
<body>
<div class="container mt-5 text-center bg-light text-dark" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group my-3" role="group">
<button id="increment" class="btn btn-primary">+5</button>
<button id="decrement" class="btn btn-danger">-5</button>
<button id="reset" class="btn btn-secondary">Reset</button>
</div>
<button id="theme-btn" class="btn btn-warning">Switch Theme</button>
</div>
<script>
let count = 0;
let step = 5;
let isDark = false;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
document.getElementById('increment').onclick = () => { count += step; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { count -= step; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
  isDark = !isDark;
  container.classList.toggle('bg-dark', isDark);
  container.classList.toggle('text-white', isDark);
  container.classList.toggle('bg-light', !isDark);
  container.classList.toggle('text-dark', !isDark);
};
</script>
</body>
</html>

Counter increments/decrements by a custom step value using Bootstrap buttons.

Let’s Try →

Bootstrap Counter with Min/Max

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Counter Min Max</title>
</head>
<body>
<div class="container mt-5 text-center bg-light text-dark" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group my-3" role="group">
<button id="increment" class="btn btn-primary">+</button>
<button id="decrement" class="btn btn-danger">-</button>
<button id="reset" class="btn btn-secondary">Reset</button>
</div>
<button id="theme-btn" class="btn btn-warning">Switch Theme</button>
</div>
<script>
let count = 0;
let min = 0;
let max = 10;
let isDark = false;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
document.getElementById('increment').onclick = () => { if(count < max) count++; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { if(count > min) count--; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
  isDark = !isDark;
  container.classList.toggle('bg-dark', isDark);
  container.classList.toggle('text-white', isDark);
  container.classList.toggle('bg-light', !isDark);
  container.classList.toggle('text-dark', !isDark);
};
</script>
</body>
</html>

Counter with minimum and maximum limits using Bootstrap buttons.

Let’s Try →

Bootstrap Counter with Auto Increment

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Auto Counter</title>
</head>
<body>
<div class="container mt-5 text-center bg-light text-dark" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group my-3" role="group">
<button id="increment" class="btn btn-primary">+</button>
<button id="decrement" class="btn btn-danger">-</button>
<button id="reset" class="btn btn-secondary">Reset</button>
<button id="auto-btn" class="btn btn-info">Start Auto</button>
</div>
<button id="theme-btn" class="btn btn-warning">Switch Theme</button>
</div>
<script>
let count = 0;
let isDark = false;
let auto = false;
let timer;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
function updateCounter() { countEl.textContent = count; container.classList.toggle('bg-dark', isDark); container.classList.toggle('text-white', isDark); container.classList.toggle('bg-light', !isDark); container.classList.toggle('text-dark', !isDark); document.getElementById('auto-btn').textContent = auto ? 'Stop Auto' : 'Start Auto'; }
document.getElementById('increment').onclick = () => { count++; updateCounter(); };
document.getElementById('decrement').onclick = () => { count--; updateCounter(); };
document.getElementById('reset').onclick = () => { count = 0; updateCounter(); };
document.getElementById('theme-btn').onclick = () => { isDark = !isDark; updateCounter(); };
document.getElementById('auto-btn').onclick = () => { auto = !auto; if(auto) timer = setInterval(() => { count++; updateCounter(); }, 1000); else clearInterval(timer); updateCounter(); };
updateCounter();
</script>
</body>
</html>

Counter automatically increments every second with Bootstrap styling.

Let’s Try →

Bootstrap Counter with Double Increment

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Double Increment</title>
</head>
<body>
<div class="container mt-5 text-center bg-light text-dark" id="container">
<h2>Counter: <span id="count">0</span></h2>
<div class="btn-group my-3" role="group">
<button id="increment" class="btn btn-primary">+</button>
<button id="double-increment" class="btn btn-success">++</button>
<button id="decrement" class="btn btn-danger">-</button>
<button id="reset" class="btn btn-secondary">Reset</button>
</div>
<button id="theme-btn" class="btn btn-warning">Switch Theme</button>
</div>
<script>
let count = 0;
let isDark = false;
const countEl = document.getElementById('count');
const container = document.getElementById('container');
function updateCounter() { countEl.textContent = count; container.classList.toggle('bg-dark', isDark); container.classList.toggle('text-white', isDark); container.classList.toggle('bg-light', !isDark); container.classList.toggle('text-dark', !isDark); }
document.getElementById('increment').onclick = () => { count++; updateCounter(); };
document.getElementById('double-increment').onclick = () => { count += 2; updateCounter(); };
document.getElementById('decrement').onclick = () => { count--; updateCounter(); };
document.getElementById('reset').onclick = () => { count = 0; updateCounter(); };
document.getElementById('theme-btn').onclick = () => { isDark = !isDark; updateCounter(); };
updateCounter();
</script>
</body>
</html>

Counter has a button that increments by 2.

Let’s Try →

Frequently Asked Questions about Bootstrap

What is Bootstrap?

What are the primary use cases for Bootstrap?

Responsive websites and web apps. Landing pages and marketing sites. Admin dashboards and internal tools. Rapid prototyping. Cross-browser compatible UIs

What are the strengths of Bootstrap?

Speeds up front-end development. Consistent cross-browser styling. Large community and documentation. Extensive ready-to-use components. Responsive design by default

What are the limitations of Bootstrap?

How can I practice Bootstrap typing speed?

CodeSpeedTest offers 5+ real Bootstrap code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Bootstrap - 5 Code Examples & CST Typing Practice Test

Learn BOOTSTRAP with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons

Versioning Timeline

Glossary

Installation Setup

Environment Setup

Config Files

Cli Commands

Internationalization

Accessibility

Ui Styling

State Management

Data Management

Architecture

Rendering Model

Architectural Patterns

Real World Architectures

Design Principles

Scalability Guide

Migration Guide

Performance Notes

Security Notes

Monitoring Analytics

Code Quality

Practical Examples

Troubleshooting

Testing Guide

Deployment Options

Tools Ecosystem

Integrations

Productivity Tips

Challenges

Learning Path

Skill Improvement Plan

Interview Questions

Cheat Sheet

Books

Tutorials

Official Docs

Community Links

Community Support

Monetization

Future Roadmap

When Not To Use

Final Summary

Faq

Code Sample Descriptions

Bootstrap Simple Counter

Bootstrap Counter with Step

Bootstrap Counter with Min/Max

Bootstrap Counter with Auto Increment

Bootstrap Counter with Double Increment

Frequently Asked Questions about Bootstrap

What is Bootstrap?

What are the primary use cases for Bootstrap?

What are the strengths of Bootstrap?

What are the limitations of Bootstrap?

How can I practice Bootstrap typing speed?

Learn Other Programming Languages

Learn Bootstrap - 5 Code Examples & CST Typing Practice Test

Learn BOOTSTRAP with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons

Versioning Timeline

Glossary

Installation Setup

Environment Setup

Config Files