Bootstrap
CDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
</head>
<body>
<h1>Hello, world!</h1>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
</head>
<body>
<h1>Hello, world!</h1>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>
Content
Reboot > Paragraphs
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus sit
aspernatur, assumenda veritatis id aut natus fugit obcaecati porro omnis.
Officiis ducimus voluptatibus officia quasi atque necessitatibus optio
laudantium natus!
</p><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus sit
aspernatur, assumenda veritatis id aut natus fugit obcaecati porro omnis.
Officiis ducimus voluptatibus officia quasi atque necessitatibus optio
laudantium natus!
</p>Reboot > Headings
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6><h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>Reboot > Links
<a href="#">This is an example link</a><a href="#">This is an example link</a>Tables > default table
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table><table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>Tables > .table
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table><table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>Tables > .table-striped
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table><table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>Helpers
Color & background > .text-{color}
color: primary, secondary, success, danger, warning, info, light, dark
<div class="text-primary">Primary with contrasting color</div>
<div class="text-secondary">Secondary with contrasting color</div>
<div class="text-success">Success with contrasting color</div>
<div class="text-danger">Danger with contrasting color</div>
<div class="text-warning">Warning with contrasting color</div>
<div class="text-info">Info with contrasting color</div>
<div class="text-light">Light with contrasting color</div>
<div class="text-dark">Dark with contrasting color</div><div class="text-primary">Primary with contrasting color</div>
<div class="text-secondary">Secondary with contrasting color</div>
<div class="text-success">Success with contrasting color</div>
<div class="text-danger">Danger with contrasting color</div>
<div class="text-warning">Warning with contrasting color</div>
<div class="text-info">Info with contrasting color</div>
<div class="text-light">Light with contrasting color</div>
<div class="text-dark">Dark with contrasting color</div>Color & background > .bg-{color}
color: primary, secondary, success, danger, warning, info, light, dark
<div class="bg-primary">Primary with contrasting color</div>
<div class="bg-secondary">Secondary with contrasting color</div>
<div class="bg-success">Success with contrasting color</div>
<div class="bg-danger">Danger with contrasting color</div>
<div class="bg-warning">Warning with contrasting color</div>
<div class="bg-info">Info with contrasting color</div>
<div class="bg-light">Light with contrasting color</div>
<div class="bg-dark">Dark with contrasting color</div><div class="bg-primary">Primary with contrasting color</div>
<div class="bg-secondary">Secondary with contrasting color</div>
<div class="bg-success">Success with contrasting color</div>
<div class="bg-danger">Danger with contrasting color</div>
<div class="bg-warning">Warning with contrasting color</div>
<div class="bg-info">Info with contrasting color</div>
<div class="bg-light">Light with contrasting color</div>
<div class="bg-dark">Dark with contrasting color</div>Color & background > .text-bg-{color}
color: primary, secondary, success, danger, warning, info, light, dark
<div class="text-bg-primary">Primary with contrasting color</div>
<div class="text-bg-secondary">Secondary with contrasting color</div>
<div class="text-bg-success">Success with contrasting color</div>
<div class="text-bg-danger">Danger with contrasting color</div>
<div class="text-bg-warning">Warning with contrasting color</div>
<div class="text-bg-info">Info with contrasting color</div>
<div class="text-bg-light">Light with contrasting color</div>
<div class="text-bg-dark">Dark with contrasting color</div><div class="text-bg-primary">Primary with contrasting color</div>
<div class="text-bg-secondary">Secondary with contrasting color</div>
<div class="text-bg-success">Success with contrasting color</div>
<div class="text-bg-danger">Danger with contrasting color</div>
<div class="text-bg-warning">Warning with contrasting color</div>
<div class="text-bg-info">Info with contrasting color</div>
<div class="text-bg-light">Light with contrasting color</div>
<div class="text-bg-dark">Dark with contrasting color</div>Utilities
Text > Text alignment: .text-start, .text-center, .text-end
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p><p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>Text > Text transform: .text-lowercase, .text-uppercase, .text-capitalize
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p><p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Text > Font weight and italics: .fw-bold, .fst-italic
<p class="fw-bold">Bold text.</p>
<p class="fst-italic">Italic text.</p><p class="fw-bold">Bold text.</p>
<p class="fst-italic">Italic text.</p>Text > Font size: .fs-1, …, .fs-6
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p><p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>Spacing > {property}{sides}-{size} & {property}{sides}-{breakpoint}-{size}
property: m, p
sides: t, b, s, e, x, y
size: 0, 1, 2, 3, 4, 5, auto
breakpoint: sm, md, lg, xl, xxl
<div class="text-bg-primary p-3">p-3</div>
<div class="text-bg-primary m-3">m-3</div>
<div class="text-bg-primary p-3 m-3">p-3 m-3</div>
<div class="text-bg-primary ps-3 m-3">ps-3 m-3</div>
<div class="text-bg-primary ps-3 m-3">ps-3 m-3</div>
<div class="text-bg-primary ps-3 m-md-3">ps-3 m-md-3</div><div class="text-bg-primary p-3">p-3</div>
<div class="text-bg-primary m-3">m-3</div>
<div class="text-bg-primary p-3 m-3">p-3 m-3</div>
<div class="text-bg-primary ps-3 m-3">ps-3 m-3</div>
<div class="text-bg-primary ps-3 m-3">ps-3 m-3</div>
<div class="text-bg-primary ps-3 m-md-3">ps-3 m-md-3</div>Display > .d-{value}, .d-{breakpoint}-{value}
value: none, inline, inline-block, block, grid, inline-grid, table, table-cell, table-row, flex, inline-flex
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
<span class="mt-4 d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span><div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
<span class="mt-4 d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>Visibility > .visible, .invisible
<p class="mt-4 visible p-2 text-bg-primary">.visible</p>
<p class="invisible p-2 text-bg-primary">.invisible</p><p class="mt-4 visible p-2 text-bg-primary">.visible</p>
<p class="invisible p-2 text-bg-primary">.invisible</p>Components
html
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<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"
aria-expanded="false"
>
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 here</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script><nav class="navbar navbar-expand-lg bg-body-tertiary">
<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"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<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"
aria-expanded="false"
>
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 here</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>Card > Basic card
<div class="card">
<div class="card-body">
<h5 class="card-title">Layout</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div><div class="card">
<div class="card-body">
<h5 class="card-title">Layout</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Card > Header and Footer
<div class="card">
<div class="card-header">
<h5 class="card-title">Layout</h5>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div><div class="card">
<div class="card-header">
<h5 class="card-title">Layout</h5>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Card > Grid
<div class="container py-5">
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Layout</h5>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Layout</h5>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Layout</h5>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Layout</h5>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div><div class="container py-5">
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Layout</h5>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Layout</h5>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Layout</h5>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Layout</h5>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>Layout
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
| xs<576px | sm≥576px | md≥768px | lg≥992px | xl≥1200px | xxl≥1400px | |
|---|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Grid system > Equal width
<div class="container">
<div class="row">
<div class="col border">.col (6/12)</div>
<div class="col border">.col (6/12)</div>
</div>
</div><div class="container">
<div class="row">
<div class="col border">.col (6/12)</div>
<div class="col border">.col (6/12)</div>
</div>
</div>Grid system > Column width - .col-{width}
<div class="container">
<div class="row">
<div class="col-3 border">.col-3 (3/12)</div>
<div class="col-9 border">.col-9 (9/12)</div>
</div>
</div><div class="container">
<div class="row">
<div class="col-3 border">.col-3 (3/12)</div>
<div class="col-9 border">.col-9 (9/12)</div>
</div>
</div>Grid system > Responsive - .col-{breakpoint}-{width}, breakpoing: sm, md, lg, xl, xxl
<div class="container">
<div class="row">
<div class="col col-md-3 border">col col-md-3</div>
<div class="col col-md-9 border">col col-md-9</div>
</div>
<div class="mt-4 row">
<div class="col-12 col-lg-6 border">col-12 col-lg-6</div>
<div class="col-12 col-lg-6 border">col-12 col-lg-6</div>
</div>
</div><div class="container">
<div class="row">
<div class="col col-md-3 border">col col-md-3</div>
<div class="col col-md-9 border">col col-md-9</div>
</div>
<div class="mt-4 row">
<div class="col-12 col-lg-6 border">col-12 col-lg-6</div>
<div class="col-12 col-lg-6 border">col-12 col-lg-6</div>
</div>
</div>Grid system > Row columns
<div class="container">
<p>.row-cols-2</p>
<div class="row row-cols-2">
<div class="col border">Column</div>
<div class="col border">Column</div>
<div class="col border">Column</div>
<div class="col border">Column</div>
</div>
<p>.row-cols-3</p>
<div class="row row-cols-3">
<div class="col border">Column</div>
<div class="col border">Column</div>
<div class="col border">Column</div>
<div class="col border">Column</div>
</div>
</div><div class="container">
<p>.row-cols-2</p>
<div class="row row-cols-2">
<div class="col border">Column</div>
<div class="col border">Column</div>
<div class="col border">Column</div>
<div class="col border">Column</div>
</div>
<p>.row-cols-3</p>
<div class="row row-cols-3">
<div class="col border">Column</div>
<div class="col border">Column</div>
<div class="col border">Column</div>
<div class="col border">Column</div>
</div>
</div>Referências
- Documentação
- Templates
- VSCode
- Inspirações de Componentes