# Bootstrap Usage Guide
This guide establishes consistent patterns for using Bootstrap 5 classes throughout the Gyrinx codebase.
## Core Principles
1. **Mobile-first**: Design for mobile, scale up to desktop
2. **Prefer utility stacks**: Use `hstack`/`vstack` over `d-flex` for most layouts
3. **Consistent spacing**: Use gap utilities instead of margin classes within stacks
4. **Minimal card usage**: Reserve cards primarily for fighter cards in list grids
5. **Semantic HTML**: Use appropriate HTML elements with Bootstrap utilities
## Layout Patterns
### Horizontal and Vertical Stacks
**DO**: Use `hstack` and `vstack` for simple layouts
```html
Label:Value
```
**DON'T**: Use `d-flex` for simple layouts
```html
...
```
**EXCEPTION**: Use `d-flex` only for complex responsive layouts
```html
...
```
### Spacing
**DO**: Use gap utilities on stacks
```html
Item 1
Item 2
```
**DON'T**: Use margin classes inside stacks
```html
Item 1
Item 2
```
**EXCEPTION**: Use `mb-0` on headings to remove default margins
```html
Title
```
### Standard Header Pattern
For list/campaign detail pages:
```html
Page Title
Active
Metadata
```
## Component Usage
### Cards
**DO**: Use cards for fighter cards in list grids
```html
...
...
```
**DON'T**: Use cards for general content sections
```html
Section Title
Content...
```
### Buttons
All buttons should use the small size for consistency:
* Primary actions: `btn btn-primary btn-sm`
* Secondary actions: `btn btn-secondary btn-sm`
* Danger actions: `btn btn-danger btn-sm`
* Outline variants: `btn btn-outline-secondary btn-sm`
```html
View Details
```
### Messages and Alerts
**DO**: Use simple text for informational messages
```html
No fighters in this list yet.
Optional helper text
```
**DON'T**: Use Bootstrap alerts for simple messages
```html
No fighters in this list yet.
```
**DO**: Use bordered divs for important callouts
```html
Important information here
```
### Links
Use consistent link styling:
```html
Link text
```
## Responsive Patterns
### Responsive Column Classes
Both grid systems are acceptable for different use cases:
* `g-col-12 g-col-md-6`: CSS Grid (for grid layouts)
* `col-12 col-md-6`: Flexbox Grid (for row/column layouts)
### Responsive Utilities
Use responsive utility classes for different screen sizes:
```html
```
## Migration Checklist
When updating existing templates:
1. Replace `d-flex` with `hstack`/`vstack` where appropriate
2. Remove redundant margin classes inside stacks
3. Ensure all buttons use `btn-sm`
4. Replace `alert` divs with simpler text or bordered divs
5. Add consistent `p-2` padding to card headers
6. Use gap utilities instead of individual margins
7. Apply responsive utility classes for mobile-first design
## Testing
After making Bootstrap changes:
1. Test on mobile viewport (375px)
2. Test on tablet viewport (768px)
3. Test on desktop viewport (1200px)
4. Verify interactive elements are touch-friendly
5. Check for consistent spacing and alignment
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://gyrinx.gitbook.io/gyrinx/how-to-guides/bootstrap-usage-guide.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.