Bootstrap starter
Bootstrap 5: responsive layout, components, and utilities from the CDN.
Open in editor Free. No install, no sign-up.
- bootstrap
The code
Three files, exactly what you get in the editor.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap starter</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
defer
></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
<div class="container">
<a
class="navbar-brand d-flex align-items-center gap-2"
href="https://getbootstrap.com"
target="_blank"
>
<svg class="brand-logo" role="img" viewBox="0 0 128 128">
<defs>
<linearGradient
id="a"
x1="76.079"
x2="523.48"
y1="10.798"
y2="365.95"
gradientTransform="translate(1.11 14.613) scale(.24566)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#9013fe" />
<stop offset="1" stop-color="#6610f2" />
</linearGradient>
<linearGradient
id="b"
x1="193.51"
x2="293.51"
y1="109.74"
y2="278.87"
gradientTransform="translate(0 52)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fff" />
<stop offset="1" stop-color="#f1e5fc" />
</linearGradient>
<filter
id="c"
width="197"
height="249"
x="161.9"
y="135.46"
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset dy="4" />
<feGaussianBlur stdDeviation="8" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
</defs>
<path
fill="url(#a)"
d="M14.985 27.712c-.237-6.815 5.072-13.099 12.249-13.099h73.54c7.177 0 12.486 6.284 12.249 13.099-.228 6.546.068 15.026 2.202 21.94 2.141 6.936 5.751 11.319 11.664 11.883v6.387c-5.913.564-9.523 4.947-11.664 11.883-2.134 6.914-2.43 15.394-2.202 21.94.237 6.815-5.072 13.098-12.249 13.098h-73.54c-7.177 0-12.486-6.284-12.249-13.098.228-6.546-.068-15.026-2.203-21.94-2.14-6.935-5.76-11.319-11.673-11.883v-6.387c5.913-.563 9.533-4.947 11.673-11.883 2.135-6.914 2.43-15.394 2.203-21.94z"
/>
<path
fill="url(#b)"
d="M267.1 364.46c47.297 0 75.798-23.158 75.798-61.355 0-28.873-20.336-49.776-50.532-53.085v-1.203c22.185-3.609 39.594-24.211 39.594-47.219 0-32.783-25.882-54.138-65.322-54.138h-88.74v217zm-54.692-189.48h45.911c24.958 0 39.131 11.128 39.131 31.279 0 21.505-16.484 33.535-46.372 33.535h-38.67zm0 161.96v-71.431h45.602c32.661 0 49.608 12.03 49.608 35.49 0 23.459-16.484 35.941-47.605 35.941z"
filter="url(#c)"
transform="translate(1.494 2.203) scale(.24566)"
/>
</svg>
Bootstrap
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav"
aria-controls="nav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
<li class="nav-item">
<a class="nav-link" href="https://getbootstrap.com/docs/5.3/" target="_blank">Docs</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container py-5">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<h1 class="display-5 fw-bold">Hello, world!</h1>
<p class="col-md-8 fs-5">
Build fast, responsive sites with Bootstrap. Everything on this page uses its grid,
components, and utility classes.
</p>
<button
class="btn btn-primary btn-lg"
type="button"
data-bs-toggle="modal"
data-bs-target="#hello"
>
Open a modal
</button>
</div>
<div class="row g-4" id="features">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h2 class="h5 card-title">Grid</h2>
<p class="card-text">A mobile-first, twelve-column flexbox grid.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h2 class="h5 card-title">Components</h2>
<p class="card-text">Navbars, cards, modals, and more, ready to use.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h2 class="h5 card-title">Utilities</h2>
<p class="card-text">Spacing, colors, and flex helpers for quick tweaks.</p>
</div>
</div>
</div>
</div>
</main>
<div
class="modal fade"
id="hello"
tabindex="-1"
aria-labelledby="hello-title"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="hello-title">Hello from Bootstrap</h2>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">This modal is powered by Bootstrap's JavaScript bundle.</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Nice</button>
</div>
</div>
</div>
</div>
</body>
</html>
Questions
Can I use Bootstrap without a build step?
Yes. This starter loads Bootstrap straight from a CDN, so it runs in the browser with no npm install, bundler, or config.
How do I start a Bootstrap project online?
Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.
Is it free?
Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.
Can I share or embed my Bootstrap demo?
Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.