Bootstrap Integration

The RobTop Games Web project is built on Bootstrap 5.3.6, providing a solid foundation for responsive design, pre-built components, and utility classes.

Bootstrap Version

The project uses Bootstrap 5.3.6, loaded locally from the public assets directory:

src/layouts/Layout.astro

<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
<script is:inline src="/assets/bootstrap/js/bootstrap.min.js"></script>

Why Local Bootstrap?

Faster load times (no CDN dependency)
Works offline during development
No external dependencies
Better caching control

Bootstrap is loaded as a minified file. For customization, you’ll need to override styles using custom CSS rather than modifying the source SCSS files.

Bootstrap Icons

The project includes Bootstrap Icons 1.13.1 from the official CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

Using Icons

<!-- Basic icon -->
<i class="bi bi-heart"></i>

<!-- Icon with size -->
<i class="bi bi-heart" style="font-size: 2rem;"></i>

<!-- Icon as button -->
<button class="btn btn-primary">
  <i class="bi bi-download"></i> Download
</button>

<!-- Colored icon -->
<i class="bi bi-star-fill text-warning"></i>

Popular Icons

bi-house - Home
bi-play-fill - Play button
bi-download - Download
bi-heart - Heart
bi-star-fill - Filled star
bi-github - GitHub logo
bi-youtube - YouTube logo
bi-twitter - Twitter logo

Browse all Bootstrap Icons →

Grid System

Bootstrap’s 12-column grid system is the foundation for layouts:

Basic Grid

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- Half width on medium+ screens -->
    </div>
    <div class="col-md-6">
      <!-- Half width on medium+ screens -->
    </div>
  </div>
</div>

Responsive Columns

<div class="container">
  <div class="row">
    <!-- Stack on mobile, 3 columns on desktop -->
    <div class="col-12 col-lg-4">Column 1</div>
    <div class="col-12 col-lg-4">Column 2</div>
    <div class="col-12 col-lg-4">Column 3</div>
  </div>
</div>

Grid Breakpoints

Breakpoint	Class Infix	Dimensions
Extra small	(none)	< 576px
Small	`sm`	≥ 576px
Medium	`md`	≥ 768px
Large	`lg`	≥ 992px
Extra large	`xl`	≥ 1200px
XXL	`xxl`	≥ 1400px

Container Types

<!-- Responsive container (default) -->
<div class="container"></div>

<!-- Full width container -->
<div class="container-fluid"></div>

<!-- Responsive at specific breakpoint -->
<div class="container-lg"></div>

Bootstrap Components

The project leverages several Bootstrap components:

Navigation & Header

Bootstrap navbar is used in the Header component:

<nav class="navbar navbar-expand-lg navbar-light">
  <div class="container">
    <a class="navbar-brand" href="/">Logo</a>
    <button class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Cards

Bootstrap cards for content display:

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

Card variations:

<!-- Card with header -->
<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">...</div>
</div>

<!-- Horizontal card -->
<div class="card mb-3">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

Buttons

Bootstrap button styles:

<!-- Color variants -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

<!-- Outline buttons -->
<button class="btn btn-outline-primary">Outline</button>

<!-- Sizes -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>

<!-- Block button (full width) -->
<button class="btn btn-primary w-100">Block Button</button>

Modals

Bootstrap modals for dialogs and overlays:

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="modal" 
        data-bs-target="#exampleModal">
  Launch Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="btn-close" 
                data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Modal content goes here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" 
                data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Utility Classes

Bootstrap provides extensive utility classes for rapid development:

Spacing

<!-- Margin -->
<div class="m-3">Margin on all sides</div>
<div class="mt-4">Margin top</div>
<div class="mb-2">Margin bottom</div>
<div class="mx-auto">Center horizontally</div>

<!-- Padding -->
<div class="p-3">Padding on all sides</div>
<div class="pt-4">Padding top</div>
<div class="pb-2">Padding bottom</div>

Spacing scale: 0, 1, 2, 3, 4, 5 (0 = 0, 1 = 0.25rem, 2 = 0.5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem)

Colors

<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-white">White text</p>
<p class="text-muted">Muted text</p>

<!-- Background colors -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-light">Light background</div>
<div class="bg-dark text-white">Dark background</div>

Display

<!-- Show/hide at breakpoints -->
<div class="d-none d-md-block">Hidden on mobile, visible on tablet+</div>
<div class="d-block d-md-none">Visible on mobile, hidden on tablet+</div>

<!-- Flexbox -->
<div class="d-flex justify-content-between align-items-center">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- Grid -->
<div class="d-grid gap-2">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
</div>

Typography

<!-- Font size -->
<p class="fs-1">Extra large text</p>
<p class="fs-6">Small text</p>

<!-- Font weight -->
<p class="fw-bold">Bold text</p>
<p class="fw-normal">Normal text</p>
<p class="fw-light">Light text</p>

<!-- Text alignment -->
<p class="text-start">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned</p>

<!-- Text transform -->
<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

Borders & Rounding

<!-- Borders -->
<div class="border">All borders</div>
<div class="border-top">Top border only</div>
<div class="border-0">No border</div>

<!-- Border radius -->
<div class="rounded">Rounded corners</div>
<div class="rounded-circle">Circle (for square elements)</div>
<div class="rounded-pill">Pill shape</div>
<div class="rounded-0">No rounding</div>

Customizing Bootstrap

Since Bootstrap is loaded as a minified CSS file, customization is done through CSS overrides:

Override CSS Variables

Bootstrap 5 uses CSS custom properties that can be overridden:

public/assets/css/bss-overrides.css

:root,
[data-bs-theme="light"] {
  /* Override body font */
  --bs-body-font-family: "ABeeZee", sans-serif;
  
  /* Override colors */
  --bs-primary: #0281C6;
  --bs-primary-rgb: 2, 129, 198;
  
  /* Override spacing */
  --bs-gutter-x: 2rem;
  
  /* Override border radius */
  --bs-border-radius: 0.5rem;
}

Override Component Styles

/* Customize buttons */
.btn {
  border-radius: 25px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Customize cards */
.card {
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Customize navbar */
.navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
}

Use !important sparingly. It’s better to increase specificity with additional class names or selectors.

Create Custom Bootstrap Variants

/* Custom button color */
.btn-custom {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0281C6;
  --bs-btn-border-color: #0281C6;
  --bs-btn-hover-bg: #026ca3;
  --bs-btn-hover-border-color: #026ca3;
  --bs-btn-active-bg: #01577f;
  --bs-btn-active-border-color: #01577f;
}

Usage:

<button class="btn btn-custom">Custom Button</button>

JavaScript Components

Bootstrap’s JavaScript is included for interactive components:

<script is:inline src="/assets/bootstrap/js/bootstrap.min.js"></script>

The is:inline directive prevents Astro from processing the script.

Using JavaScript Components

// Initialize tooltip
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => 
  new bootstrap.Tooltip(tooltipTriggerEl)
)

// Show modal programmatically
const myModal = new bootstrap.Modal(document.getElementById('myModal'))
myModal.show()

// Listen to modal events
document.getElementById('myModal').addEventListener('shown.bs.modal', function () {
  console.log('Modal is now visible')
})

Best Practices

Use Utility Classes First: Before writing custom CSS, check if Bootstrap utilities can achieve your goal
Mobile First: Design for mobile devices first, then add larger breakpoints
Semantic HTML: Use proper HTML5 elements with Bootstrap classes
Accessibility: Bootstrap components are accessible by default; maintain this in customizations
Performance: Load only the Bootstrap features you need (consider custom builds for production)
Consistency: Stick to Bootstrap’s design patterns for a cohesive experience

Common Patterns

Centered Content

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <!-- Centered content, max 8 columns wide -->
    </div>
  </div>
</div>

Card Grid

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">...</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">...</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">...</div>
    </div>
  </div>
</div>

Hero Section

<section class="py-5 text-center">
  <div class="container">
    <h1 class="display-4 fw-bold">Hero Title</h1>
    <p class="lead">Subtitle or description</p>
    <button class="btn btn-primary btn-lg">Call to Action</button>
  </div>
</section>

Styling

Bootstrap Version

Why Local Bootstrap?

Bootstrap Icons

Using Icons

Popular Icons

Grid System

Basic Grid

Responsive Columns

Container Types

Bootstrap Components

Utility Classes

Spacing

Colors

Display

Typography

Borders & Rounding

Customizing Bootstrap

Override CSS Variables

Override Component Styles

Create Custom Bootstrap Variants

JavaScript Components

Using JavaScript Components

Best Practices

Common Patterns

Centered Content

Card Grid

Hero Section

Build docs developers (and LLMs) love

Styling

​Bootstrap Version

​Why Local Bootstrap?

​Bootstrap Icons

​Using Icons

​Popular Icons

​Grid System

​Basic Grid

​Responsive Columns

​Container Types

​Bootstrap Components

​Utility Classes

​Spacing

​Colors

​Display

​Typography

​Borders & Rounding

​Customizing Bootstrap

​Override CSS Variables

​Override Component Styles

​Create Custom Bootstrap Variants

​JavaScript Components

​Using JavaScript Components

​Best Practices

​Common Patterns

​Centered Content

​Card Grid

​Hero Section

Build docs developers (and LLMs) love

Bootstrap Version

Why Local Bootstrap?

Bootstrap Icons

Using Icons

Popular Icons

Grid System

Basic Grid

Responsive Columns

Container Types

Bootstrap Components

Utility Classes

Spacing

Colors

Display

Typography

Borders & Rounding

Customizing Bootstrap

Override CSS Variables

Override Component Styles

Create Custom Bootstrap Variants

JavaScript Components

Using JavaScript Components

Best Practices

Common Patterns

Centered Content

Card Grid

Hero Section