Bootstrap utility classes, grid rules, and component markup are easy to forget—this sheet is a visual-memory aid for rapid UI work. Use the Bootstrap roadmap when you want exercises and ordering that turn these snippets into confident layout skills.

Bootstrap / front-end learning roadmap — Layout, components, and responsive design in a guided sequence.

Bootstrap 5 Cheatsheet

Complete reference guide for Bootstrap 5 from basic to advanced concepts.

For Freshers Grid System Components Utilities Responsive Design

Getting Started

Setup Bootstrap

<!-- Bootstrap 5 CSS via CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap 5 JS bundle via CDN (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- Alternatively, include Popper and Bootstrap JS separately -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
Note: Always include the CSS in the head and JS before the closing body tag for better performance.

Basic Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Template</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, Bootstrap!</h1>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Grid System

Grid Basics

<!-- Container -->
<div class="container">
<!-- Fixed width container -->
</div>

<div class="container-fluid">
<!-- Full width container -->
</div>

<!-- Basic Grid -->
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>

<!-- Grid with specified column widths -->
<div class="row">
<div class="col-6">6 units</div>
<div class="col-4">4 units</div>
<div class="col-2">2 units</div>
</div>
Note: Bootstrap's grid system uses 12 columns. Use .container or .container-fluid as wrappers.

Responsive Grid

<!-- Responsive breakpoints: sm, md, lg, xl, xxl -->
<div class="row">
<div class="col-md-8">
<!-- 8 columns on medium screens and up -->
</div>
<div class="col-md-4">
<!-- 4 columns on medium screens and up -->
</div>
</div>

<!-- Multiple breakpoint classes -->
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<!-- 12 cols on xs, 6 on sm, 4 on md, 3 on lg -->
</div>
</div>

<!-- Auto-layout columns -->
<div class="row">
<div class="col">Auto column</div>
<div class="col">Auto column</div>
<div class="col">Auto column</div>
</div>

<!-- Nesting grids -->
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">Nested col 1</div>
<div class="col-md-6">Nested col 2</div>
</div>
</div>
</div>

Components

Buttons

<!-- Basic buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

<!-- Outline buttons -->
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>

<!-- Button sizes -->
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>

<!-- Disabled button -->
<button type="button" class="btn btn-primary" disabled>Disabled</button>

<!-- Button groups -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>

Cards

<!-- Basic card -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

<!-- Card with image -->
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

<!-- Card with header and footer -->
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-body-secondary">2 days ago</div>
</div>

<!-- Card groups -->
<div class="card-group">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>

Navbar

<!-- Basic navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

Forms

<!-- Basic form -->
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<div class="form-text">We'll never share your email.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

<!-- Form controls -->
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>

<!-- Form validation -->
<div class="form-floating mb-3">
<input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com">
<label for="floatingInputInvalid">Invalid input</label>
<div class="invalid-feedback">Please provide a valid value.</div>
</div>

Utilities

Spacing

<!-- Margin and padding utilities -->
<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="ms-3">Margin start (left)</div>
<div class="me-3">Margin end (right)</div>
<div class="mx-3">Horizontal margin</div>
<div class="my-3">Vertical margin</div>
<div class="m-3">Margin all sides</div>

<div class="pt-3">Padding top</div>
<div class="pb-3">Padding bottom</div>
<div class="ps-3">Padding start (left)</div>
<div class="pe-3">Padding end (right)</div>
<div class="px-3">Horizontal padding</div>
<div class="py-3">Vertical padding</div>
<div class="p-3">Padding all sides</div>

<!-- Sizes: 0-5 (0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem) -->
<div class="m-0">No margin</div>
<div class="m-1">Small margin</div>
<div class="m-5">Large margin</div>

<!-- Responsive spacing -->
<div class="mt-md-5 mt-3">Different margins on different screens</div>

Text & Colors

<!-- Text utilities -->
<p class="text-start">Start aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">End aligned text</p>

<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalized text</p>

<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder weight text</p>
<p class="fw-normal">Normal weight text</p>
<p class="fw-light">Light weight text</p>
<p class="fst-italic">Italic text</p>

<!-- Color utilities -->
<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-light bg-dark">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-body">Body text</p>
<p class="text-muted">Muted text</p>

<!-- Background colors -->
<div class="bg-primary">Primary background</div>
<div class="bg-success">Success background</div>
<div class="bg-danger">Danger background</div>
<div class="bg-warning">Warning background</div>
<div class="bg-info">Info background</div>
<div class="bg-light">Light background</div>
<div class="bg-dark text-light">Dark background</div>
<div class="bg-body">Body background</div>
<div class="bg-white">White background</div>
<div class="bg-transparent">Transparent background</div>

Flexbox

<!-- Flexbox container -->
<div class="d-flex">Flex container</div>
<div class="d-inline-flex">Inline flex container</div>

<!-- Direction -->
<div class="d-flex flex-row">Horizontal (default)</div>
<div class="d-flex flex-row-reverse">Horizontal reversed</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-column-reverse">Vertical reversed</div>

<!-- Justify content -->
<div class="d-flex justify-content-start">Start (default)</div>
<div class="d-flex justify-content-end">End</div>
<div class="d-flex justify-content-center">Center</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex justify-content-around">Space around</div>
<div class="d-flex justify-content-evenly">Space evenly</div>

<!-- Align items -->
<div class="d-flex align-items-start">Start</div>
<div class="d-flex align-items-end">End</div>
<div class="d-flex align-items-center">Center</div>
<div class="d-flex align-items-baseline">Baseline</div>
<div class="d-flex align-items-stretch">Stretch (default)</div>

<!-- Align self -->
<div class="d-flex">
<div class="align-self-start">Start</div>
<div class="align-self-end">End</div>
<div class="align-self-center">Center</div>
<div class="align-self-baseline">Baseline</div>
<div class="align-self-stretch">Stretch</div>
</div>

<!-- Fill -->
<div class="d-flex">
<div class="flex-fill">Flex fill</div>
<div class="flex-fill">Flex fill</div>
<div class="flex-fill">Flex fill</div>
</div>

<!-- Grow and shrink -->
<div class="d-flex">
<div class="flex-grow-1">Flex grow</div>
<div class="flex-shrink-1">Flex shrink</div>
</div>

<!-- Auto margins -->
<div class="d-flex">
<div class="me-auto">Left auto margin</div>
<div>Content</div>
<div class="ms-auto">Right auto margin</div>
</div>

<!-- Wrap -->
<div class="d-flex flex-nowrap">No wrap (default)</div>
<div class="d-flex flex-wrap">Wrap</div>
<div class="d-flex flex-wrap-reverse">Wrap reversed</div>

Display & Position

<!-- Display utilities -->
<div class="d-none">Hidden</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline block</div>
<div class="d-block">Block</div>
<div class="d-grid">Grid</div>
<div class="d-table">Table</div>
<div class="d-table-row">Table row</div>
<div class="d-table-cell">Table cell</div>
<div class="d-flex">Flex</div>
<div class="d-inline-flex">Inline flex</div>

<!-- Responsive display -->
<div class="d-sm-none d-md-block">
<!-- Hidden on small screens, block on medium and up -->
</div>

<!-- Position utilities -->
<div class="position-static">Static</div>
<div class="position-relative">Relative</div>
<div class="position-absolute">Absolute</div>
<div class="position-fixed">Fixed</div>
<div class="position-sticky">Sticky</div>

<!-- Placement utilities -->
<div class="top-0">Top 0</div>
<div class="start-0">Left 0</div>
<div class="bottom-0">Bottom 0</div>
<div class="end-0">Right 0</div>
<div class="translate-middle">Translate middle</div>

<!-- Fixed top example -->
<div class="fixed-top">Fixed to the top</div>
<div class="fixed-bottom">Fixed to the bottom</div>

<!-- Sticky top example -->
<div class="sticky-top">Sticky to the top</div>

Advanced Components

Modals

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<!-- Modal sizes -->
<div class="modal-dialog modal-sm">Small modal</div>
<div class="modal-dialog">Default modal</div>
<div class="modal-dialog modal-lg">Large modal</div>
<div class="modal-dialog modal-xl">Extra large modal</div>
<div class="modal-dialog modal-fullscreen">Fullscreen modal</div>

Carousel

<!-- Carousel -->
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

<!-- With indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
</div>

<!-- With captions -->
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content.</p>
</div>
Quick reference guide

Comprehensive Bootstrap UI Cheatsheet Reference

This Bootstrap UI cheatsheet on Nikhil Learn Hub collects syntax, commands, and practical snippets for quick revision. Explore Bootstrap grids, components, utilities, responsive layouts, and frontend styling techniques with examples.

Use the reference cards and examples above during coding sessions; return here instead of scattered searches when you need dependable reminders. Follow the Bootstrap / front-end learning roadmap when you want structured lessons beyond one-page lookups.

Quick lookup coverage

  • Syntax, commands, and API signatures
  • Copy-ready examples and common patterns
  • Terminology for coursework and interviews
  • Cross-links to the matching learning roadmap

How to study with this sheet

  • Production debugging and tuning reminders
  • Security, performance, or scale cautions
  • Integration with adjacent stacks on this site
  • Deeper study through tutorials and roadmaps

Who Should Use This Cheatsheet

Students, self-taught developers, and professionals who need fast Bootstrap UI lookups during labs, debugging, or interview revision should keep this page bookmarked.

Related Resources on Nikhil Learn Hub