This page is the implementation reference for the AGE Bootstrap Toolkit. Each section shows the rendered element and the HTML needed to reproduce it, so the docs work as both visual catalog and copy-paste starter.
Use the standard structure of .container or
.container-fluid, then .row, then
.col-* responsive columns.
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">...</div>
<div class="col-12 col-md-6 col-lg-4">...</div>
<div class="col-12 col-md-12 col-lg-4">...</div>
</div>
</div>:root {
--age-primary: #47d3ff;
--age-secondary: #634bff;
--age-warning: #ffe53b;
--age-danger: #ff5c7a;
--age-success: #6df7a6;
--age-radius: 18px;
--age-gap: 1.5rem;
}Use display titles for large command-center messaging and lead text for descriptive support copy.
<div class="eyebrow">System Label</div>
<h1 class="display-title">Command Heading</h1>
<p class="lead">
Use display titles for large command-center messaging.
</p><button class="btn btn-primary">Primary</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-outline">Outline</button>
<span class="badge">Live</span>
<span class="badge badge-success">Ready</span>
<span class="badge badge-warning">Watch</span>
<span class="badge badge-danger">Breach</span>Use for modular content blocks inside dashboards.
<article class="card">
<div class="card-header">
<h3 class="section-title">Telemetry Card</h3>
<span class="badge">Live</span>
</div>
<div class="card-body">...</div>
</article>
<article class="stat">
<div class="stat-label">Signal</div>
<div class="stat-kpi">81%</div>
<div class="stat-trend">+4.2%</div>
</article>| Zone | Status | Load |
|---|---|---|
| AGE-1S | Stable | 92% |
| OUT-R | Watch | 67% |
<table class="table">
<thead>...</thead>
<tbody>
<tr>
<td>AGE-1S</td>
<td><span class="badge badge-success">Stable</span></td>
<td>92%</td>
</tr>
</tbody>
</table>
<div class="progress">
<div class="progress-bar" style="width:72%"></div>
</div><div class="status-list">
<div class="status-item">
<div class="status-cluster">
<span class="status-dot text-success"></span>
<div>...</div>
</div>
<span class="badge badge-success">Ready</span>
</div>
</div>
<div class="timeline">
<div class="timeline-item">...</div>
<div class="timeline-item">...</div>
</div><label class="form-label" for="sector">Sector Name</label>
<input class="form-control" id="sector" value="AGE-1S" />
<label class="form-label" for="mode">Mode</label>
<select class="form-select" id="mode">...</select>
<label class="form-label" for="directive">Directive</label>
<textarea class="form-textarea" id="directive"></textarea>
<div class="input-group">
<button class="btn btn-primary">Transmit</button>
<button class="btn btn-outline">Archive</button>
</div><figure class="sample-shot">
<div class="hero">
<div class="eyebrow">Gallery Tile</div>
<div class="section-title">Reusable visual block</div>
</div>
<figcaption>Publish-safe gallery block.</figcaption>
</figure>
<article class="terminal">
<div class="terminal-body">
<div class="terminal-line">
<span class="terminal-prompt">></span>
<span>bootstrap grid initialized</span>
</div>
</div>
</article>