Counter with Step - Bootstrap Typing CST Test
Loading…
Counter with Step — Bootstrap Code
Counter increments/decrements by a custom step value using Bootstrap buttons.
<!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>Bootstrap Language Guide
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.
Primary Use Cases
- ▸Responsive websites and web apps
- ▸Landing pages and marketing sites
- ▸Admin dashboards and internal tools
- ▸Rapid prototyping
- ▸Cross-browser compatible UIs
Notable Features
- ▸12-column responsive grid system
- ▸Pre-styled components (buttons, forms, cards, navbars)
- ▸Utility classes for spacing, typography, colors
- ▸JavaScript plugins for modals, dropdowns, carousels
- ▸Extensive browser compatibility
Origin & Creator
Created by Mark Otto and Jacob Thornton at Twitter in 2011 as a framework to standardize UI development across internal projects.
Industrial Note
Bootstrap is heavily used in enterprise dashboards, admin panels, marketing websites, and rapid-prototyping projects.