twitter-bootstrap-rails 5.3.0 → 5.4.0

data/lib/generators/bootstrap/layout/templates/layout.html.haml

@@ -1,50 +1,35 @@
-!!! 5
-%html(lang="en")
+!!!
+%html{:lang => "en"}
   %head
-    %meta(charset="utf-8")
-    %meta(http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1")
-    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
+    %meta{:charset => "utf-8"}
+    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1"}
     %title= content_for?(:title) ? yield(:title) : "<%= app_name %>"
     = csrf_meta_tags
-    = stylesheet_link_tag "application", :media => "all"
-    = favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144'
-    = favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114'
-    = favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72'
-    = favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png'
-    = favicon_link_tag 'favicon.ico', :rel => 'shortcut icon'
-    = javascript_include_tag "application"
-    / Le HTML5 shim, for IE6-8 support of HTML elements
-    /[if lt IE 9]
-      = javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"
-
+<% if cdn? -%>
+<%= indent_tags(css_tag, "    ") %>
+<% else -%>
+    = stylesheet_link_tag <%= stylesheet_arguments %>, :media => "all"
+<% end -%>
 
   %body
-    .navbar.navbar-default.navbar-static-top
+    %nav.navbar.navbar-expand-lg.navbar-dark.bg-primary
       .container
-        %button.navbar-toggle(type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse")
-          %span.icon-bar
-          %span.icon-bar
-          %span.icon-bar
-        %a.navbar-brand(href="#") <%= app_name %>
-        .navbar-collapse.collapse.navbar-responsive-collapse
-          %ul.nav.navbar-nav
-            %li= link_to "Link 1", "/path1"
-            %li= link_to "Link 2", "/path2"
-            %li= link_to "Link 3", "/path3"
-            %li= link_to "Link 3", "/path3"
+        %a.navbar-brand{:href => "/"} <%= app_name %>
+        %button.navbar-toggler{:type => "button", "data-bs-toggle" => "collapse", "data-bs-target" => "#navbarNav", "aria-controls" => "navbarNav", "aria-expanded" => "false", "aria-label" => "Toggle navigation"}
+          %span.navbar-toggler-icon
+        #navbarNav.collapse.navbar-collapse
+          %ul.navbar-nav
+            %li.nav-item= link_to "Home", "/", :class => "nav-link"
+
+    .container.mt-4
+      = bootstrap_flash
+      = yield
+
+      %footer.mt-5.py-3.border-top
+        %p.text-body-secondary &copy; Company #{Time.current.year}
 
-    .container
-      .row
-        .col-lg-9
-          = bootstrap_flash
-          = yield
-        .col-lg-3
-          .well.sidebar-nav
-            %h3 Sidebar
-            %ul.nav.nav-list
-              %li.nav-header Sidebar
-              %li= link_to "Link 1", "/path1"
-              %li= link_to "Link 2", "/path2"
-              %li= link_to "Link 3", "/path3"
-      %footer
-        %p &copy; Company <%= Date.today.year %>
+<% if cdn? -%>
+<%= indent_tags(script_tags, "    ") %>
+<% else -%>
+    = javascript_include_tag <%= javascript_arguments %>
+<% end -%>

data/lib/generators/bootstrap/layout/templates/layout.html.slim

@@ -2,49 +2,34 @@ doctype html
 html lang="en"
   head
     meta charset="utf-8"
-    meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"
-    meta name="viewport" content="width=device-width, initial-scale=1.0"
+    meta name="viewport" content="width=device-width, initial-scale=1"
     title= content_for?(:title) ? yield(:title) : "<%= app_name %>"
     = csrf_meta_tags
-    = stylesheet_link_tag "application", :media => "all"
-    = favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144'
-    = favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114'
-    = favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72'
-    = favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png'
-    = favicon_link_tag 'favicon.ico', :rel => 'shortcut icon'
-    = javascript_include_tag "application"
-    /! Le HTML5 shim, for IE6-8 support of HTML elements
-    /[if lt IE 9]
-      = javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"
-
+<% if cdn? -%>
+<%= slim_tags(css_tag, "    ") %>
+<% else -%>
+    = stylesheet_link_tag <%= stylesheet_arguments %>, :media => "all"
+<% end -%>
 
   body
-    .navbar.navbar-default.navbar-static-top
-        .container
-          button.navbar-toggle type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"
-            span.icon-bar
-            span.icon-bar
-            span.icon-bar
-          a.navbar-brand href="#"<%= app_name %>
-          .navbar-collapse.collapse.navbar-responsive-collapse
-            ul.nav.navbar-nav
-              li= link_to "Link 1", "/path1"
-              li= link_to "Link 2", "/path2"
-              li= link_to "Link 3", "/path3"
+    nav.navbar.navbar-expand-lg.navbar-dark.bg-primary
+      .container
+        a.navbar-brand href="/" <%= app_name %>
+        button.navbar-toggler type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"
+          span.navbar-toggler-icon
+        #navbarNav.collapse.navbar-collapse
+          ul.navbar-nav
+            li.nav-item= link_to "Home", "/", class: "nav-link"
+
+    .container.mt-4
+      = bootstrap_flash
+      = yield
 
-    .container
-      .row
-        .col-lg-9
-          = bootstrap_flash
-          = yield
-        .col-lg-3
-          .well.sidebar-nav
-            h3 Sidebar
-            ul.nav.nav-list
-              li.nav-header Sidebar
-              li= link_to "Link 1", "/path1"
-              li= link_to "Link 2", "/path2"
-              li= link_to "Link 3", "/path3"
+      footer.mt-5.py-3.border-top
+        p.text-body-secondary &copy; Company #{Time.current.year}
 
-      footer
-        p &copy; Company <%= Date.today.year %>
+<% if cdn? -%>
+<%= slim_tags(script_tags, "    ") %>
+<% else -%>
+    = javascript_include_tag <%= javascript_arguments %>
+<% end -%>

data/lib/generators/bootstrap/list_group/list_group_generator.rb

@@ -0,0 +1,13 @@
+require 'generators/bootstrap/snippets/snippet_base'
+
+module Bootstrap
+  module Generators
+    # List groups from https://getbootstrap.com/docs/5.3/examples/list-groups/
+    class ListGroupGenerator < SnippetBase
+      snippet_category "list-groups"
+
+      desc "Copies a Bootstrap list groups snippet into your views. " \
+           "Run with --list to see the variants."
+    end
+  end
+end

data/lib/generators/bootstrap/modal/modal_generator.rb

@@ -0,0 +1,13 @@
+require 'generators/bootstrap/snippets/snippet_base'
+
+module Bootstrap
+  module Generators
+    # Modals from https://getbootstrap.com/docs/5.3/examples/modals/
+    class ModalGenerator < SnippetBase
+      snippet_category "modals"
+
+      desc "Copies a Bootstrap modals snippet into your views. " \
+           "Run with --list to see the variants."
+    end
+  end
+end

data/lib/generators/bootstrap/sidebar/sidebar_generator.rb

@@ -0,0 +1,13 @@
+require 'generators/bootstrap/snippets/snippet_base'
+
+module Bootstrap
+  module Generators
+    # Sidebars from https://getbootstrap.com/docs/5.3/examples/sidebars/
+    class SidebarGenerator < SnippetBase
+      snippet_category "sidebars"
+
+      desc "Copies a Bootstrap sidebars snippet into your views. " \
+           "Run with --list to see the variants."
+    end
+  end
+end

data/lib/generators/bootstrap/snippets/snippet_base.rb

@@ -0,0 +1,126 @@
+require 'rails/generators'
+require 'twitter/bootstrap/rails/version'
+require 'generators/bootstrap/snippets/snippet_catalog'
+
+module Bootstrap
+  module Generators
+    # Shared behaviour for the per-category snippet generators (bootstrap:header,
+    # bootstrap:hero, ...). Each subclass only declares which docs category it
+    # serves; everything else lives here.
+    class SnippetBase < ::Rails::Generators::Base
+      ICONS_PARTIAL = 'bootstrap_icons'.freeze
+
+      argument :requested_variant, :type => :string, :required => false,
+               :default => nil, :banner => 'VARIANT'
+
+      class_option :as, :type => :string,
+                   :desc => 'Partial name to write (defaults to the generator name)'
+      class_option :path, :type => :string, :default => 'app/views/shared',
+                   :desc => 'Directory to write the partial into'
+      class_option :list, :type => :boolean, :default => false,
+                   :desc => 'List the available variants and exit'
+      class_option :icons, :type => :boolean, :default => true,
+                   :desc => 'Also install the shared Bootstrap Icons sprite when the snippet needs it'
+
+      # Subclasses call `snippet_category "headers"`.
+      def self.snippet_category(category = nil)
+        @snippet_category = category if category
+        @snippet_category
+      end
+
+      def self.source_root
+        File.expand_path("../templates", __FILE__)
+      end
+
+      def self.banner
+        "rails generate #{namespace} [VARIANT] [options]"
+      end
+
+      def list_variants
+        return unless options[:list]
+
+        say "#{category} variants:\n\n"
+        SnippetCatalog.variants(category).each do |v|
+          say format("  %-22s %s%s", v[:name], v[:description], v[:icons] ? " (uses icons)" : "")
+        end
+        say "\nDefault: #{SnippetCatalog.default_variant(category)}"
+      end
+
+      def copy_snippet
+        return if options[:list]
+
+        copy_file "#{category}/#{variant_name}.html.erb", partial_path
+      end
+
+      def copy_icons
+        return if options[:list]
+        return unless variant[:icons] && options[:icons]
+
+        copy_file "icons/_#{ICONS_PARTIAL}.html.erb",
+                  File.join(options[:path], "_#{ICONS_PARTIAL}.html.erb")
+      end
+
+      def report
+        return if options[:list]
+
+        say "\nRender it with:  <%= render \"#{render_path}\" %>"
+        if variant[:icons] && options[:icons]
+          say "The snippet uses Bootstrap Icons; render the sprite once in your layout:"
+          say "                 <%= render \"#{icons_render_path}\" %>"
+        end
+        if variant[:images]
+          say_status :warn,
+            "This snippet references placeholder images from the Bootstrap docs site " \
+            "(e.g. bootstrap-docs.png). They will 404 until you point them at your own assets.",
+            :yellow
+        end
+      end
+
+      private
+
+      def category
+        self.class.snippet_category
+      end
+
+      # The variant argument, or the category's first variant.
+      def variant_name
+        name = (requested_variant || SnippetCatalog.default_variant(category)).to_s.tr('-', '_')
+
+        unless SnippetCatalog.variant(category, name)
+          raise ::Rails::Generators::Error,
+            "Unknown #{category} variant #{name.inspect}. Available: " \
+            "#{SnippetCatalog.variant_names(category).join(', ')}. " \
+            "Run `rails g #{self.class.namespace} --list` for descriptions."
+        end
+
+        name
+      end
+
+      def variant
+        SnippetCatalog.variant(category, variant_name)
+      end
+
+      def partial_name
+        options[:as] || self.class.generator_name
+      end
+
+      def partial_path
+        File.join(options[:path], "_#{partial_name}.html.erb")
+      end
+
+      # "app/views/shared/_header.html.erb" -> "shared/header"
+      def render_path
+        strip_view_path(partial_name)
+      end
+
+      def icons_render_path
+        strip_view_path(ICONS_PARTIAL)
+      end
+
+      def strip_view_path(name)
+        dir = options[:path].sub(%r{\Aapp/views/}, '')
+        dir.empty? ? name : File.join(dir, name)
+      end
+    end
+  end
+end

data/lib/generators/bootstrap/snippets/snippet_catalog.rb

@@ -0,0 +1,134 @@
+module Bootstrap
+  module Generators
+    # Every snippet published at https://getbootstrap.com/docs/5.3/examples/
+    # Variants are listed in the order they appear on each docs page.
+    module SnippetCatalog
+      # generator name => docs category
+      GENERATORS = {
+        "header" => "headers",
+        "hero" => "heroes",
+        "features" => "features",
+        "sidebar" => "sidebars",
+        "footer" => "footers",
+        "dropdown" => "dropdowns",
+        "list_group" => "list-groups",
+        "modal" => "modals",
+        "badge" => "badges",
+        "breadcrumb" => "breadcrumbs",
+        "button" => "buttons",
+        "jumbotron" => "jumbotrons",
+      }.freeze
+
+      VARIANTS = {
+        "headers" => [
+          { :name => "centered", :description => "Brand and centered nav pills with a bottom border", :icons => true, :images => false },
+          { :name => "nav_pills", :description => "Bare centered nav pills", :icons => false, :images => false },
+          { :name => "with_auth_buttons", :description => "Brand, nav, and Login / Sign-up buttons", :icons => true, :images => false },
+          { :name => "dark_search", :description => "Dark bar with search box and user dropdown", :icons => true, :images => false },
+          { :name => "light_search", :description => "Light bar with search box and user dropdown", :icons => true, :images => false },
+          { :name => "grid_dropdown", :description => "Full-width grid header with a brand dropdown and search", :icons => true, :images => false },
+          { :name => "double", :description => "Two-row header: utility links above, brand and nav below", :icons => true, :images => false },
+          { :name => "dark_double", :description => "Dark two-row header with nav and search", :icons => true, :images => false },
+        ],
+        "heroes" => [
+          { :name => "centered", :description => "Centered hero with heading, lead text, and buttons", :icons => false, :images => true },
+          { :name => "centered_screenshot", :description => "Centered hero with a screenshot below the fold", :icons => false, :images => true },
+          { :name => "with_image", :description => "Responsive left-aligned hero with an image", :icons => false, :images => true },
+          { :name => "signup_form", :description => "Vertically centered hero with a sign-up form", :icons => false, :images => false },
+          { :name => "cropped_image", :description => "Bordered hero with a cropped image and shadows", :icons => false, :images => true },
+          { :name => "dark", :description => "Dark colour hero", :icons => false, :images => false },
+        ],
+        "features" => [
+          { :name => "columns_with_icons", :description => "Three columns each led by an icon", :icons => true, :images => false },
+          { :name => "hanging_icons", :description => "Rows with icons hanging to the left of the text", :icons => true, :images => false },
+          { :name => "custom_cards", :description => "Feature cards with background images", :icons => true, :images => true },
+          { :name => "icon_grid", :description => "Compact grid of icons with short descriptions", :icons => true, :images => false },
+          { :name => "with_title", :description => "Left-aligned section title beside a feature grid", :icons => true, :images => false },
+        ],
+        "sidebars" => [
+          { :name => "dark", :description => "Dark sidebar with nav and a user dropdown", :icons => true, :images => false },
+          { :name => "light", :description => "Light sidebar with nav and a user dropdown", :icons => true, :images => false },
+          { :name => "icon_only", :description => "Narrow icon-only sidebar", :icons => true, :images => false },
+          { :name => "collapsible", :description => "Sidebar with collapsible nav sections", :icons => true, :images => false },
+          { :name => "list_group", :description => "Sidebar built from a scrollable list group", :icons => true, :images => false },
+        ],
+        "footers" => [
+          { :name => "simple", :description => "Copyright on the left, nav links on the right", :icons => true, :images => false },
+          { :name => "with_brand", :description => "Brand mark, copyright, and social icons", :icons => true, :images => false },
+          { :name => "with_nav", :description => "Centered nav above a centered copyright line", :icons => false, :images => false },
+          { :name => "columns", :description => "Five columns of links with a brand column", :icons => true, :images => false },
+          { :name => "with_newsletter", :description => "Link columns plus a newsletter sign-up form", :icons => true, :images => false },
+        ],
+        "dropdowns" => [
+          { :name => "simple", :description => "Menu of plain items with a divider", :icons => false, :images => false },
+          { :name => "with_search", :description => "Menu with a dark header and a search field", :icons => false, :images => false },
+          { :name => "with_icons", :description => "Menu items each led by an icon", :icons => true, :images => false },
+          { :name => "calendar", :description => "Date picker rendered inside a dropdown", :icons => true, :images => false },
+          { :name => "mega_menu", :description => "Wide multi-column menu with descriptions", :icons => true, :images => false },
+        ],
+        "list-groups" => [
+          { :name => "with_avatars", :description => "Items with an avatar, heading, text, and timestamp", :icons => false, :images => false },
+          { :name => "checkboxes", :description => "Checkbox items with supporting text", :icons => false, :images => false },
+          { :name => "checkboxes_expanded", :description => "Checkbox items that reveal more content when checked", :icons => true, :images => false },
+          { :name => "checkable", :description => "Borderless checkable cards", :icons => false, :images => false },
+          { :name => "radios", :description => "Radio cards with a selected state", :icons => false, :images => false },
+        ],
+        "modals" => [
+          { :name => "sheet", :description => "Bottom-docked modal sheet with a list of actions", :icons => false, :images => false },
+          { :name => "confirm", :description => "Small confirmation dialog with two buttons", :icons => false, :images => false },
+          { :name => "whats_new", :description => "\"What's new\" dialog listing recent features", :icons => true, :images => false },
+          { :name => "signup", :description => "Sign-up dialog with a form and third-party buttons", :icons => true, :images => false },
+        ],
+        "badges" => [
+          { :name => "pills", :description => "Solid pill badges in every theme colour", :icons => false, :images => false },
+          { :name => "subtle", :description => "Subtle background pill badges", :icons => false, :images => false },
+          { :name => "subtle_bordered", :description => "Subtle pill badges with a matching border", :icons => false, :images => false },
+          { :name => "with_avatar", :description => "Badges leading with a small round avatar", :icons => false, :images => false },
+          { :name => "with_icons", :description => "Badges with a trailing icon", :icons => true, :images => false },
+          { :name => "with_avatar_divider", :description => "Avatar badges split by a vertical divider", :icons => true, :images => false },
+        ],
+        "breadcrumbs" => [
+          { :name => "basic", :description => "Breadcrumb on a tinted, rounded background", :icons => false, :images => false },
+          { :name => "with_icons", :description => "Breadcrumb whose first crumb is a home icon", :icons => true, :images => false },
+          { :name => "chevron", :description => "Chevron separators instead of slashes", :icons => true, :images => false },
+          { :name => "custom", :description => "Arrow-shaped crumbs joined edge to edge", :icons => true, :images => false },
+        ],
+        "buttons" => [
+          { :name => "pills", :description => "Pill buttons in every theme colour", :icons => false, :images => false },
+          { :name => "grid", :description => "Full-width stacked buttons in a grid", :icons => false, :images => false },
+          { :name => "with_icons", :description => "Buttons with a trailing icon", :icons => true, :images => false },
+          { :name => "loading", :description => "Buttons with a spinner in the loading state", :icons => false, :images => false },
+          { :name => "circle", :description => "Round icon-only buttons", :icons => true, :images => false },
+        ],
+        "jumbotrons" => [
+          { :name => "with_icon", :description => "Jumbotron led by a large SVG icon", :icons => true, :images => false },
+          { :name => "placeholder", :description => "Faded jumbotron for placeholder content", :icons => true, :images => false },
+          { :name => "full_width", :description => "Edge-to-edge jumbotron with a contained body", :icons => false, :images => false },
+          { :name => "basic", :description => "Simple jumbotron inside a container", :icons => false, :images => false },
+        ],
+      }.freeze
+
+      module_function
+
+      def category_for(generator_name)
+        GENERATORS.fetch(generator_name)
+      end
+
+      def variants(category)
+        VARIANTS.fetch(category)
+      end
+
+      def variant(category, name)
+        variants(category).find { |v| v[:name] == name }
+      end
+
+      def variant_names(category)
+        variants(category).map { |v| v[:name] }
+      end
+
+      def default_variant(category)
+        variants(category).first[:name]
+      end
+    end
+  end
+end

data/lib/generators/bootstrap/snippets/templates/badges/pills.html.erb

@@ -0,0 +1,10 @@
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge text-bg-primary rounded-pill">Primary</span>
+  <span class="badge text-bg-secondary rounded-pill">Secondary</span>
+  <span class="badge text-bg-success rounded-pill">Success</span>
+  <span class="badge text-bg-danger rounded-pill">Danger</span>
+  <span class="badge text-bg-warning rounded-pill">Warning</span>
+  <span class="badge text-bg-info rounded-pill">Info</span>
+  <span class="badge text-bg-light rounded-pill">Light</span>
+  <span class="badge text-bg-dark rounded-pill">Dark</span>
+</div>

data/lib/generators/bootstrap/snippets/templates/badges/subtle.html.erb

@@ -0,0 +1,10 @@
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill">Primary</span>
+  <span class="badge bg-secondary-subtle text-secondary-emphasis rounded-pill">Secondary</span>
+  <span class="badge bg-success-subtle text-success-emphasis rounded-pill">Success</span>
+  <span class="badge bg-danger-subtle text-danger-emphasis rounded-pill">Danger</span>
+  <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill">Warning</span>
+  <span class="badge bg-info-subtle text-info-emphasis rounded-pill">Info</span>
+  <span class="badge bg-light-subtle text-light-emphasis rounded-pill">Light</span>
+  <span class="badge bg-dark-subtle text-dark-emphasis rounded-pill">Dark</span>
+</div>

data/lib/generators/bootstrap/snippets/templates/badges/subtle_bordered.html.erb

@@ -0,0 +1,20 @@
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge bg-primary-subtle border border-primary-subtle text-primary-emphasis rounded-pill">
+    Primary
+  </span>
+  <span class="badge bg-secondary-subtle border border-secondary-subtle text-secondary-emphasis rounded-pill">
+    Secondary
+  </span>
+  <span class="badge bg-success-subtle border border-success-subtle text-success-emphasis rounded-pill">
+    Success
+  </span>
+  <span class="badge bg-danger-subtle border border-danger-subtle text-danger-emphasis rounded-pill">
+    Danger
+  </span>
+  <span class="badge bg-warning-subtle border border-warning-subtle text-warning-emphasis rounded-pill">
+    Warning
+  </span>
+  <span class="badge bg-info-subtle border border-info-subtle text-info-emphasis rounded-pill">Info</span>
+  <span class="badge bg-light-subtle border border-light-subtle text-light-emphasis rounded-pill">Light</span>
+  <span class="badge bg-dark-subtle border border-dark-subtle text-dark-emphasis rounded-pill">Dark</span>
+</div>

data/lib/generators/bootstrap/snippets/templates/badges/with_avatar.html.erb

@@ -0,0 +1,34 @@
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Primary
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Secondary
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Success
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Danger
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Warning
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Info
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Light
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Dark
+  </span>
+</div>

data/lib/generators/bootstrap/snippets/templates/badges/with_avatar_divider.html.erb

@@ -0,0 +1,66 @@
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Primary
+    <span class="vr mx-2"></span>
+    <a href="#" aria-label="Delete primary">
+      <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"></use></svg>
+    </a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Secondary
+    <span class="vr mx-2"></span>
+    <a href="#" aria-label="Delete secondary">
+      <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"></use></svg>
+    </a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Success
+    <span class="vr mx-2"></span>
+    <a href="#" aria-label="Delete success">
+      <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"></use></svg>
+    </a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Danger
+    <span class="vr mx-2"></span>
+    <a href="#" aria-label="Delete danger">
+      <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"></use></svg>
+    </a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Warning
+    <span class="vr mx-2"></span>
+    <a href="#" aria-label="Delete warning">
+      <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"></use></svg>
+    </a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Info
+    <span class="vr mx-2"></span>
+    <a href="#" aria-label="Delete info">
+      <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"></use></svg>
+    </a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Light
+    <span class="vr mx-2"></span>
+    <a href="#" aria-label="Delete light">
+      <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"></use></svg>
+    </a>
+  </span>
+  <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
+    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
+    Dark
+    <span class="vr mx-2"></span>
+    <a href="#" aria-label="Delete dark">
+      <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"></use></svg>
+    </a>
+  </span>
+</div>

data/lib/generators/bootstrap/snippets/templates/badges/with_icons.html.erb

@@ -0,0 +1,26 @@
+<div class="d-flex gap-2 justify-content-center py-5">
+  <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
+    <span class="px-1">Primary 1</span>
+    <a href="#" aria-label="Delete primary 1">
+      <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
+        <use xlink:href="#x-circle-fill"></use>
+      </svg>
+    </a>
+  </span>
+  <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
+    <span class="px-1">Primary 2</span>
+    <a href="#" aria-label="Delete primary 2">
+      <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
+        <use xlink:href="#x-circle-fill"></use>
+      </svg>
+    </a>
+  </span>
+  <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
+    <span class="px-1">Primary 3</span>
+    <a href="#" aria-label="Delete primary 3">
+      <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
+        <use xlink:href="#x-circle-fill"></use>
+      </svg>
+    </a>
+  </span>
+</div>