Counter with Double Increment - Bootstrap Typing CST Test
Loading…
Counter with Double Increment — Bootstrap Code
Counter has a button that increments by 2.
<!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>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.