Introduction to Bootstrap
Learn what Bootstrap is, why developers use it, its key features, how to add it via CDN, and explore the most commonly used components — all with working code examples.
- What is Bootstrap?
- Why Use Bootstrap?
- Key Features
- How to Add Bootstrap
- First Bootstrap Page
- Common Components
- Pros & Cons
- Versions
- Common Mistakes
- Try It
- FAQ
What is Bootstrap?
Bootstrap is a free and open-source front-end CSS framework used to design responsive and mobile-first websites quickly. It provides ready-made CSS styles, a layout system, pre-built UI components, and JavaScript plugins — so developers do not have to build everything from scratch.
Bootstrap was originally developed by engineers at Twitter and released as an open-source project in 2011. Since then it has become one of the most widely used frameworks in web development, used by millions of websites worldwide.
Think of Bootstrap as a giant toolbox of pre-built website pieces. Instead of writing hundreds of lines of CSS to style a button or create a responsive layout, you just add a class name and Bootstrap handles all the styling for you.
12-Column Grid
Divide any row into up to 12 equal columns for any responsive layout you need.
UI Components
Buttons, cards, alerts, modals, navbars — dozens of ready-to-use components.
Utility Classes
Quick styling with text-center, mt-3, d-flex and hundreds more.
Mobile-First
Designed to work on small screens first, then scale up to tablets and desktops.
Why Use Bootstrap?
There are many CSS frameworks available but Bootstrap remains the most popular for good reasons:
Responsive Design
Automatically adjusts layouts for mobile, tablet, and desktop using breakpoints.
Faster Development
Ready-made components save hours of coding time on every project.
Consistency
Uniform styling across all pages without extra effort or custom CSS.
Cross-Browser
Works on Chrome, Firefox, Safari, and Edge without browser-specific fixes.
Customizable
Override Bootstrap's defaults to match your brand colors, fonts, and layout.
Key Features of Bootstrap
Bootstrap's power comes from three core pillars: the grid system, utility classes, and responsive breakpoints.
Grid System
Bootstrap uses a 12-column grid to create layouts. Three columns of equal width each take 4 of the 12 grid spaces:
<div class="container"> <div class="row"> <div class="col-4">Column 1</div> <div class="col-4">Column 2</div> <div class="col-4">Column 3</div> </div> </div>
Utility Classes
Utility classes let you style elements instantly without writing any custom CSS:
Responsive Breakpoints
Bootstrap uses breakpoint suffixes to control layouts at different screen sizes. Add the breakpoint to any column class:
<!-- Full width on mobile, half on md+, third on lg+ --> <div class="col-12 col-md-6 col-lg-4"> Responsive column </div>
How to Add Bootstrap
There are two ways to include Bootstrap. CDN is the easiest and fastest for beginners.
Method 1 — CDN (Recommended)
Add the Bootstrap CSS <link> inside <head> and the JS bundle <script> just before </body>. No download needed.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Bootstrap Page</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- Your content here --> <!-- Bootstrap JS just before </body> --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Method 2 — Download Locally
Go to getbootstrap.com, download the Bootstrap package, extract the files, and link them from your project folder. Best for production projects that work offline.
<!-- CSS in <head> --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- JS before </body> --> <script src="js/bootstrap.bundle.min.js"></script>
Your First Bootstrap Page
Here is a complete working Bootstrap page using a container, centered heading, and a styled button:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Bootstrap Page</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="bg-light"> <div class="container mt-5"> <h1 class="text-center text-primary">Welcome to Bootstrap!</h1> <p class="text-center text-muted">This is my first Bootstrap page.</p> <div class="text-center mt-3"> <button class="btn btn-success px-4">Get Started</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Common Bootstrap Components
Bootstrap includes dozens of ready-to-use components. Here are the most commonly used ones:
Navbar
<nav class="navbar navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#">MySite</a> </div> </nav>
Card
<div class="card" style="width:18rem;"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">Quick example text inside the card.</p> <a href="#" class="btn btn-primary">Learn More</a> </div> </div>
Buttons & Alerts
<!-- Buttons --> <button class="btn btn-primary">Primary</button> <button class="btn btn-success">Success</button> <button class="btn btn-danger">Danger</button> <!-- Alert --> <div class="alert alert-warning mt-3"> This is a warning alert message! </div>
Pros & Cons
- Very easy to learn for beginners
- Mobile-first responsive design built in
- Large community and excellent documentation
- Dozens of ready-made UI components
- Cross-browser compatible out of the box
- Saves significant development time
- Sites look similar without customization
- Larger file size than hand-written CSS
- Requires learning Bootstrap class names
- Overkill for very small, simple pages
- Unused CSS can add bloat if not purged
Bootstrap Versions
Bootstrap has gone through several major releases since 2011:
Bootstrap 5 is the most important update — it removed the dependency on jQuery, making it significantly faster and more lightweight. It uses vanilla JavaScript for all its interactive components and introduced many new utility classes and improved grid options.
Common Mistakes
Without <meta name="viewport" content="width=device-width, initial-scale=1">, Bootstrap's responsive behavior won't work on mobile devices. The page will appear zoomed out and columns won't stack properly. This tag must be in every Bootstrap page.
Bootstrap columns must always go inside a .row div, and rows must go inside a .container. Writing col-6 directly inside the body or a container without a row will break the grid alignment completely.
Each row has exactly 12 column units. If you add three col-5 columns (15 total), the third one wraps to a new row. Always make sure your column numbers add up to 12 (or less) within a row.
Questions About Bootstrap
The most common questions beginners ask when starting with Bootstrap:
col-4 to make an element span 4 out of 12 columns, or col-md-6 to span 6 columns on medium screens and above. Always place columns inside a row div and rows inside a container div. The grid automatically stacks columns vertically on small screens.