Bootstrap Components

Bootstrap Component Usage

Navbar Configuration

• Use Bootstrap navbar for responsive navigation
• Mobile hamburger menu with collapse
• Sticky or fixed positioning for persistent navigation
• Dark/light variants for theming

Example structure:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    </ul>
  </div>
</nav>

Card Components

• Bootstrap card for uniform layouts
• Combines well with grid for responsive galleries
• Use card-deck for equal-height cards
• Custom footer for CTA buttons

Example:

<div class="card">
  <img class="card-img-top" src="image.jpg" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Description text</p>
    <a href="#" class="btn btn-primary">Learn More</a>
  </div>
</div>

Button Styling

• Use Bootstrap button classes: btn, btn-primary, btn-secondary
• Size variants: btn-sm, btn-lg
• State management: active, disabled, loading states
• Custom hover colors with CSS variables

Form Components

• Use Bootstrap form groups
• Validation states (is-valid, is-invalid)
• Floating labels for modern UI
• Accessible input types and labels

Example:

<form>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Grid System

• 12-column Bootstrap grid
• Responsive classes: col-xs, col-sm, col-md, col-lg, col-xl
• Utilities: gutter spacing, alignment
• Nesting for complex layouts

Example:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">Column 1</div>
    <div class="col-md-6 col-lg-4">Column 2</div>
    <div class="col-md-12 col-lg-4">Column 3</div>
  </div>
</div>

Modal Components

• Use Bootstrap modals for overlays
• Fade animation for smooth transitions
• Centered or scrollable variants
• Proper accessibility (aria-labelledby, aria-hidden)

Custom Bootstrap Overrides

• Override Bootstrap variables before importing
• Use CSS variables for runtime theming
• Add custom classes alongside Bootstrap classes
• Avoid !important - use more specific selectors instead