Bootstrap for Beginners
Bootstrap is a CSS framework that makes building responsive websites easy. Follow these steps to set it up and use it—no teacher needed!
1. Getting Started with Bootstrap
Add Bootstrap to your HTML using a CDN (Content Delivery Network).
Steps:
- Create a new HTML file (e.g.,
index.html
). - Copy the CSS link into the
.
- Copy the JS script before the closing
.
link
or script
and press Tab (Mac: Tab, Windows: Tab) to auto-generate these tags.
2. Basic Bootstrap Template
Start with this simple template to ensure Bootstrap works.
Hello, Bootstrap!
!
and press Tab (Mac: Tab, Windows: Tab) to generate a basic HTML structure, then add Bootstrap links.
3. Containers
Use .container
or .container-fluid
to center and pad your content.
This is centered with padding.
This spans the full width.
Try it: Click to toggle a container!
4. Grid System
Bootstrap’s 12-column grid uses .row
and .col
classes.
5. Buttons
Bootstrap offers various button styles using .btn
with different classes for colors and purposes.
Try them: Here are all Bootstrap button types in action!
When to Use:
btn-primary
: Main actions (e.g., "Submit")btn-secondary
: Secondary actions (e.g., "Cancel")btn-success
: Positive actions (e.g., "Save")btn-danger
: Destructive actions (e.g., "Delete")btn-warning
: Caution actions (e.g., "Proceed with Care")btn-info
: Informational actions (e.g., "Learn More")btn-light
: Minimal style (e.g., light backgrounds)btn-dark
: High contrast (e.g., dark backgrounds)btn-link
: Looks like a link but behaves like a button
6. Navbar
Create a responsive navigation bar (like this site’s!) with .navbar
.
7. Troubleshooting
Common issues and fixes when setting up Bootstrap:
- Not Working? Check if the CDN links are correct and in the right place.
- JS Features Fail? Ensure the script is before