Bootstrap is a free and open-source CSS framework developed by Twitter for designing responsive and mobile-first websites. It provides pre-styled components and a powerful grid system, making it perfect for fast prototyping.
Why use Bootstrap?
- No need to write custom CSS for every element.
- Built-in responsive breakpoints.
- Includes ready-to-use components like buttons, cards, modals, navbars, and alerts.
- Good browser compatibility.
Getting started:
- Add Bootstrap via CDN: htmlКопироватьРедактировать
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> - Use Bootstrap classes: htmlКопироватьРедактировать
<div class="container"> <h1 class="text-center">Welcome</h1> <button class="btn btn-primary">Click Me</button> </div>
Useful components:
- Grid system:
.container,.row,.col-md-6 - Forms:
.form-control,.form-group - Buttons:
.btn,.btn-outline-* - Navigation:
.navbar,.nav-tabs - Modals, Toasts, Spinners
Customization:
You can override styles using custom CSS or use Bootstrap’s Sass variables to tailor themes.
Bootstrap is ideal for mockups, admin panels, and corporate websites where quick results and cross-device compatibility matter most.