Claude Code Plugins

Community-maintained marketplace

Feedback

Bootstrap 5 with Rails

@sjnims/iron-chef-claude-rails
1
0

This skill should be used when the user asks about "Bootstrap", "Bootstrap 5", "styling Rails", "SASS", "responsive design", "CSS framework", or integrating Bootstrap with Rails. Load this skill when working with Bootstrap in Rails applications.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name Bootstrap 5 with Rails
description This skill should be used when the user asks about "Bootstrap", "Bootstrap 5", "styling Rails", "SASS", "responsive design", "CSS framework", or integrating Bootstrap with Rails. Load this skill when working with Bootstrap in Rails applications.
version 0.1.0

Bootstrap 5 with Rails

Bootstrap 5 provides a professional CSS framework for Rails applications. This skill covers Bootstrap integration, customization, and Rails-specific patterns.

Installation

Add gem:

bundle add bootstrap

Import in application.scss:

// app/assets/stylesheets/application.scss
@import "bootstrap";

Add JavaScript (if needed):

// app/javascript/application.js
import * as bootstrap from "bootstrap"

Grid System

Responsive layout:

<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

Common Components

Navigation:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <%= link_to "MyApp", root_path, class: "navbar-brand" %>
  </div>
</nav>

Cards:

<div class="card">
  <div class="card-body">
    <h5 class="card-title"><%= @post.title %></h5>
    <p class="card-text"><%= @post.summary %></p>
    <%= link_to "Read More", @post, class: "btn btn-primary" %>
  </div>
</div>

Forms:

<%= form_with model: @post, class: "row g-3" do |f| %>
  <div class="col-12">
    <%= f.label :title, class: "form-label" %>
    <%= f.text_field :title, class: "form-control" %>
  </div>
  <div class="col-12">
    <%= f.submit class: "btn btn-primary" %>
  </div>
<% end %>

Customization

Custom variables:

// app/assets/stylesheets/application.scss

// Custom colors
$primary: #your-brand-color;
$success: #custom-green;

// Import Bootstrap
@import "bootstrap";

// Custom styles
.card-custom {
  border-radius: 1rem;
}

Utility Classes

Spacing: m-3, p-4, mt-2, mb-3 Text: text-center, text-muted, fw-bold Display: d-none, d-md-block, d-flex Colors: bg-primary, text-danger

Responsive Design

Breakpoints:

  • sm: ≥576px
  • md: ≥768px
  • lg: ≥992px
  • xl: ≥1200px
  • xxl: ≥1400px

Bootstrap makes Rails apps look professional quickly.

Additional Resources

Example Files

Working examples in examples/:

  • examples/common-components.html.erb - Bootstrap 5 components for Rails including navbar, flash messages, cards, forms, tables, pagination, and modals

External Resources