bootstrap-components

name	bootstrap-components
description	Guides proper usage of Bootstrap 4.5.2 components (navbar, cards, buttons, modals, forms). Use when styling navigation, creating card layouts, building forms, or customizing Bootstrap components. Includes override patterns for custom styling.
allowed-tools	Read, Grep

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="[e-mail]">
  </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