Use this Bootstrap cheatsheet to remember grid syntax, spacing utilities, buttons, cards, alerts, forms and navbars, plus the markup patterns that require Bootstrap CSS in your project.
containerrowcol-md-6g-3mt-4p-3mx-autopy-3 py-md-5btn btn-primarycard card-bodyalert alert-successform-controlCompare the syntax with a small rendered example so the reference is easier to scan and remember.
Bootstrap grids use containers, rows and columns.
<div class="container">
<div class="row g-3">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>Bootstrap classes require Bootstrap CSS in your project.
Button variants communicate action weight and state.
<button class="btn btn-primary">primary</button>
<button class="btn btn-outline-primary">Outline</button>Bootstrap classes require Bootstrap CSS in your project.
Use alerts for short status messages and cards for grouped content.
<div class="alert alert-primary">primary alert</div>
<div class="card">
<div class="card-body">Card body text.</div>
</div>Bootstrap classes require Bootstrap CSS in your project.
Card body text.
Bootstrap form controls need labels just like plain HTML forms.
<label class="form-label" for="email">Email address</label>
<input id="email" class="form-control" type="email">
<button class="btn btn-primary">Submit</button>Bootstrap classes require Bootstrap CSS in your project.
Bootstrap navbars group brand, links and mobile toggles.
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler">Menu</button>
</nav>Bootstrap classes require Bootstrap CSS in your project.
Short notes to help you decide when to use each pattern, avoid common mistakes and copy the examples with confidence.
<div class="container py-5">
<div class="row g-4">
<div class="col-md-6">First</div>
<div class="col-md-6">Second</div>
</div>
</div>Bootstrap Cheatsheet includes quick reference sections, practical examples, common mistakes, tips and links to related DevKitYard tools.
Yes. This cheatsheet includes visual examples with copyable code and lightweight controls where interaction helps explain the pattern.
Use it when you need to recall syntax, compare common patterns or avoid mistakes without opening a long tutorial.
Use related DevKitYard tools such as HTML Formatter, CSS Beautifier when you need to format, validate, generate or inspect real output.