BootCamp by Dr.Angela
1. What is Bootstrap?
- CSS Frameworks: Bootstrap, Foundation, MUI, Tailwind, etc.
- When to use vs not to use
- Use: for fast, responsive, mobile-first development
- Avoid: for very simple projects or highly customized/complex designs
- How to use Bootstrap (CDN; Content Delivery Network)
- Official website: https://getbootstrap.com/
- CSS (inside ) :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> - min → minified file (faster loading, no unnecessary spaces)
- JavaScript (before ) :
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
2. Bootstrap Layout
- 12-column system : Uses container → row → col(items)
- Auto fit : Columns automatically adjust based on available space
- Containers : .container, .container-sm(mobile)/md(iPad)/lg(laptop)/xl(desktop)/xxl(TV)/fluid(full-width)
- Sized columns
- ex.
<div class="container"> <div class="row"> <div class="col-2">Hello</div> <div class="col-4">Hello</div> <div class="col-6">Hello</div> </div> </div>
- ex.
- Breakpoints : <576px, ≥576px, ≥768px, ≥992px, ≥1200px, ≥1400px
- Multiple breakpoints
- ex.
<div class="col-sm-12 col-md-8 col-lg-4"></div>
3. Bootstrap Components
- Common components: card, button, carousel, navbar, etc.
- Navbar : Can include icons using SVG
- Download and use : ex.
<img src="./briefcase.svg" alt="briefcase" height="30"> - Or copy SVG directly: ex.
<svg ~ > ~ </svg>
- Download and use : ex.
- Snippets (Pre-built sections) : Heroes, Features, Footers, ...
- How to use : Inspect → copy → paste → customize
- Carousel : Use inside a .container for responsive layout
- ex.
<div class="container"> <!-- carousel here --> </div>
- ex.
- Spacing(ex. mb-2)
- Structure
- Property: m (margin), p (padding)
- Side: t (top), b (bottom), s (start), e (end), x, y
- Size: 0 / 1 / 2 / 3 / 4 / 5 / auto
- Dark Mode : ex.
<html lang="en" data-bs-theme="dark"> - Jumbotron-style : Used for highlighting user feedback(Testimonials) or important content
Top comments (0)