What Bootstrap is and how to add it.
✍️ 3 exercises + code challenge in this lessonBootstrap is a free front-end framework with ready-made CSS and JavaScript components. It helps you build responsive, mobile-first websites quickly.
Include its CSS in the <head> and its JavaScript bundle before </body> from a CDN, or install it with npm install bootstrap.
Bootstrap works by adding classes to your HTML, such as container, btn btn-primary or text-center.
Mastering Bootstrap Introduction helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container py-4">
<h1 class="text-primary">Hello, Bootstrap!</h1>
<p class="lead">This page is styled only with Bootstrap classes.</p>
<button class="btn btn-success">A Bootstrap button</button>
</div>Check what you learned in “Bootstrap Introduction”.
Give the button Bootstrap's primary style.
<button class="btn ">Save</button>
How do you use Bootstrap styles?
Add a button with the classes "btn btn-success" and the text "Go".
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services