skills.rest
afonsolelis
afonsolelisCOMMUNITY
Explore all skills by this author →
GitHub

bootstrap-guidelines

Enforce Bootstrap 5.3.0 conventions and prohibit custom CSS in HTML.

Updated Dec 19, 2025
Search Tags:#ui#guidelines#bootstrap#grid#responsivo#componentes
One-click install
npx skills add https://github.com/afonsolelis/laudo_cards --skill bootstrap-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bootstrap-guidelines
Source: https://github.com/afonsolelis/laudo_cards/tree/main/.claude/skills/bootstrap-guidelines
Command: npx skills add https://github.com/afonsolelis/laudo_cards --skill bootstrap-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bootstrap 5 Guidelines garante o uso correto do Bootstrap 5.3.0, seguindo o princípio ZERO CSS customizado do projeto.

Core Features & Use Cases

  • Guia de grid e componentes: como usar container, row, col, cards, badges, alerts, etc.
  • Princípio de zero CSS: só Bootstrap, sem CSS customizado.
  • Práticas de acessibilidade: uso de ARIA básico e componentes Bootstrap acessíveis.

Quick Start

  • Use as classes Bootstrap para estruturar páginas (grid, cards, badges, modals).
  • Evite CSS customizado; opte por utilitários (margem, padding, cores) do Bootstrap.

Frequently Asked Questions about bootstrap-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a responsive layout using Bootstrap 5 grid?▼

Bootstrap 5 grid uses container, row, and col classes to create responsive layouts. Containers define max-width breakpoints, rows hold columns, and col classes stack responsively across screen sizes using its 12-column system and breakpoint prefixes (sm, md, lg, xl, xxl).

Can I use custom CSS with Bootstrap 5, or should I stick to utility classes?▼

Stick to Bootstrap 5 utility classes for styling and layout—no custom CSS. Bootstrap provides utilities for spacing, colors, display, sizing, and positioning that achieve styling goals without writing additional stylesheets.

What Bootstrap 5 components should I use for common UI patterns?▼

Bootstrap 5 offers cards for content containers, badges for labels, alerts for messaging, modals for dialogs, and many others. Each component follows Bootstrap's design system and includes accessibility features built-in.

How do I make Bootstrap 5 components accessible?▼

Bootstrap 5 components include basic ARIA attributes and semantic HTML. Use proper heading hierarchy, label form inputs, add alt text to images, and leverage Bootstrap's accessibility features in modals, alerts, and navigation components.

Does Bootstrap 5 work well for responsive design across all devices?▼

Yes, Bootstrap 5 is built for mobile-first responsive design. Its grid system, breakpoint utilities, and components automatically adjust layouts and behavior across phones, tablets, and desktops using CSS media queries.

What happens if I need styling Bootstrap doesn't provide?▼

Within Bootstrap 5 guidelines, use only its utility classes and component variations. If Bootstrap utilities don't cover your need, the constraint is to work within Bootstrap's design system rather than add custom CSS.

Related Skills

Explore More Software Engineering Skills→
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Static Web Development

Build accessible, responsive static websites with semantic HTML and CSS.

Official
Intermediate
FAeN399FAeN399

html-static-design

Design semantic, accessible static HTML/CSS pages with responsive mobile-first styling.

Community
Basic
Dokkabei97Dokkabei97
3

flow-scaffolding

Generate Claude Code plugin component skeletons with standardized templates.

Community
Basic
snake-dev-teamsnake-dev-team

ck:ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Official
Intermediate