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.
Learn BOOTSTRAP with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
1
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.
2
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.
3
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.
4
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.
5
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.
Frequently Asked Questions about Bootstrap
What is Bootstrap?
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.
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.