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.