Core Code
Core Code Modern Dev Handbook

Breakpoint Reference Table

Display Bootstrap breakpoint values in a quick reference table.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container py-5">

<h4 class="mb-3">Bootstrap Breakpoints</h4>

<table class="table table-bordered">

<thead>

<tr>
<th>Breakpoint</th>
<th>Class Prefix</th>
<th>Min Width</th>
</tr>

</thead>

<tbody>

<tr>
<td>Extra small</td>
<td>None</td>
<td>0px</td>
</tr>

<tr>
<td>Small</td>
<td>sm</td>
<td>576px</td>
</tr>

<tr>
<td>Medium</td>
<td>md</td>
<td>768px</td>
</tr>

<tr>
<td>Large</td>
<td>lg</td>
<td>992px</td>
</tr>

<tr>
<td>Extra large</td>
<td>xl</td>
<td>1200px</td>
</tr>

<tr>
<td>XXL</td>
<td>xxl</td>
<td>1400px</td>
</tr>

</tbody>

</table>

</div>

</body>
</html>

More BS5 Breakpoints Table Examples (7)

example Responsive Grid Columns open example example Responsive Display open example example Container Breakpoints open example example Responsive Navbar open example example Responsive Text Alignment open example example Responsive Spacing open example example Responsive Dashboard Layout open example