bs5 0.0.15 → 0.0.20

data/app/views/bs5/examples/buttons/button_to/default/snippet.html.erb

@@ -1,11 +1,11 @@
 <div class="d-grid gap-2 d-md-flex">
   <%= bs5_button_to('New', 'http://www.example.com') %>
 
-  <%= bs5_button_to('http://www.example.com', style: :success) do %>
+  <%= bs5_button_to('http://www.example.com', color: :success) do %>
     Make happy <strong>John Doe</strong>
   <%- end %>
 
-  <%= bs5_button_to('New', 'http://www.example.com', style: :dark, outline: true, size: :large, form_class: 'new-thing') %>
+  <%= bs5_button_to('New', 'http://www.example.com', color: :dark, outline: true, size: :large, form_class: 'new-thing') %>
 
-  <%= bs5_button_to('Destroy', 'http://www.example.com', style: :danger, method: "delete", remote: true, data: { confirm: 'Are you sure?', disable_with: 'loading...' }) %>
+  <%= bs5_button_to('Destroy', 'http://www.example.com', color: :danger, method: "delete", remote: true, data: { confirm: 'Are you sure?', disable_with: 'loading...' }) %>
 </div>

data/app/views/bs5/examples/list_group/actionable/button.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item, active: true) do %><%= button_tag 'Cras justo odio' %><% end %>
-  <% lg.slot(:item) do %><%= button_tag 'Dapibus ac facilisis in' %><% end %>
-  <% lg.slot(:item) do %><%= button_tag 'Morbi leo risus' %><% end %>
-  <% lg.slot(:item) do %><%= button_tag 'Porta ac consectetur ac' %><% end %>
-  <% lg.slot(:item, disabled: true) do %><%= button_tag 'Vestibulum at eros' %><% end %>
+  <% lg.item(active: true) do %><%= button_tag 'Cras justo odio' %><% end %>
+  <% lg.item do %><%= button_tag 'Dapibus ac facilisis in' %><% end %>
+  <% lg.item do %><%= button_tag 'Morbi leo risus' %><% end %>
+  <% lg.item do %><%= button_tag 'Porta ac consectetur ac' %><% end %>
+  <% lg.item(disabled: true) do %><%= button_tag 'Vestibulum at eros' %><% end %>
 <%- end %>

data/app/views/bs5/examples/list_group/actionable/snippet.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item, active: true) do %><%= link_to 'Cras justo odio', '#' %><% end %>
-  <% lg.slot(:item) do %><%= link_to 'Dapibus ac facilisis in', '#' %><% end %>
-  <% lg.slot(:item) do %><%= link_to 'Morbi leo risus', '#' %><% end %>
-  <% lg.slot(:item) do %><%= link_to 'Porta ac consectetur ac', '#' %><% end %>
-  <% lg.slot(:item, disabled: true) do %><%= link_to 'Vestibulum at eros', '#' %><% end %>
+  <% lg.item(active: true) do %><%= link_to 'Cras justo odio', '#' %><% end %>
+  <% lg.item do %><%= link_to 'Dapibus ac facilisis in', '#' %><% end %>
+  <% lg.item do %><%= link_to 'Morbi leo risus', '#' %><% end %>
+  <% lg.item do %><%= link_to 'Porta ac consectetur ac', '#' %><% end %>
+  <% lg.item(disabled: true) do %><%= link_to 'Vestibulum at eros', '#' %><% end %>
 <%- end %>

data/app/views/bs5/examples/list_group/active/snippet.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item, active: true) do %>Cras justo odio<% end %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item) do %>Morbi leo risus<% end %>
-  <% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
-  <% lg.slot(:item) do %>Vestibulum at eros<% end %>
+  <% lg.item(active: true) do %>Cras justo odio<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item do %>Porta ac consectetur ac<% end %>
+  <% lg.item do %>Vestibulum at eros<% end %>
 <%- end %>

data/app/views/bs5/examples/list_group/checkboxes_and_radios/default.html.erb

@@ -1,21 +1,21 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
     Cras justo odio
   <% end %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
     Dapibus ac facilisis in
   <% end %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
     Morbi leo risus
   <% end %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
     Porta ac consectetur ac
   <% end %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
     Vestibulum at eros
   <% end %>

data/app/views/bs5/examples/list_group/checkboxes_and_radios/with_labels.html.erb

@@ -1,29 +1,29 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= label_tag do %>
       <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
       Cras justo odio
     <% end %>
   <% end %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= label_tag do %>
       <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
       Dapibus ac facilisis in
     <% end %>
   <% end %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= label_tag do %>
       <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
       Morbi leo risus
     <% end %>
   <% end %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= label_tag do %>
       <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
       Porta ac consectetur ac
     <% end %>
   <% end %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= label_tag do %>
       <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
       Vestibulum at eros

data/app/views/bs5/examples/list_group/custom_content/default.html.erb

@@ -1,5 +1,5 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item, active: true) do %>
+  <% lg.item(active: true) do %>
     <%= link_to '#' do %>
       <div class="d-flex w-100 justify-content-between">
         <h5 class="mb-1">List group item heading</h5>
@@ -9,7 +9,7 @@
       <small>Donec id elit non mi porta.</small>
     <% end %>
   <% end %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= link_to '#' do %>
       <div class="d-flex w-100 justify-content-between">
         <h5 class="mb-1">List group item heading</h5>
@@ -19,7 +19,7 @@
       <small class="text-muted">Donec id elit non mi porta.</small>
     <% end %>
   <% end %>
-  <% lg.slot(:item) do %>
+  <% lg.item do %>
     <%= link_to '#' do %>
       <div class="d-flex w-100 justify-content-between">
         <h5 class="mb-1">List group item heading</h5>

data/app/views/bs5/examples/list_group/default/snippet.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item) do %>Cras justo odio<% end %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item) do %>Morbi leo risus<% end %>
-  <% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
-  <% lg.slot(:item) do %>Vestibulum at eros<% end %>
+  <% lg.item do %>Cras justo odio<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item do %>Porta ac consectetur ac<% end %>
+  <% lg.item do %>Vestibulum at eros<% end %>
 <%- end %>

data/app/views/bs5/examples/list_group/disabled/snippet.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item, disabled: true) do %>Cras justo odio<% end %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item) do %>Morbi leo risus<% end %>
-  <% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
-  <% lg.slot(:item) do %>Vestibulum at eros<% end %>
+  <% lg.item(disabled: true) do %>Cras justo odio<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item do %>Porta ac consectetur ac<% end %>
+  <% lg.item do %>Vestibulum at eros<% end %>
 <%- end %>

data/app/views/bs5/examples/list_group/flush/snippet.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group(flush: true) do |lg| %>
-  <% lg.slot(:item) do %>Cras justo odio<% end %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item) do %>Morbi leo risus<% end %>
-  <% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
-  <% lg.slot(:item) do %>Vestibulum at eros<% end %>
+  <% lg.item do %>Cras justo odio<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item do %>Porta ac consectetur ac<% end %>
+  <% lg.item do %>Vestibulum at eros<% end %>
 <%- end %>

data/app/views/bs5/examples/list_group/horizontal/snippet.html.erb

@@ -1,30 +1,30 @@
 <%= bs5_list_group(horizontal: true) do |lg| %>
-  <% lg.slot(:item) do %>Cras justo odio<% end %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+  <% lg.item do %>Cras justo odio<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item do %>Morbi leo risus<% end %>
 <%- end %>
 <%= bs5_list_group(horizontal: :sm) do |lg| %>
-  <% lg.slot(:item) do %>Cras justo odio<% end %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+  <% lg.item do %>Cras justo odio<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item do %>Morbi leo risus<% end %>
 <%- end %>
 <%= bs5_list_group(horizontal: :md) do |lg| %>
-  <% lg.slot(:item) do %>Cras justo odio<% end %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+  <% lg.item do %>Cras justo odio<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item do %>Morbi leo risus<% end %>
 <%- end %>
 <%= bs5_list_group(horizontal: :lg) do |lg| %>
-  <% lg.slot(:item) do %>Cras justo odio<% end %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+  <% lg.item do %>Cras justo odio<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item do %>Morbi leo risus<% end %>
 <%- end %>
 <%= bs5_list_group(horizontal: :xl) do |lg| %>
-  <% lg.slot(:item) do %>Cras justo odio<% end %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+  <% lg.item do %>Cras justo odio<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item do %>Morbi leo risus<% end %>
 <%- end %>
 <%= bs5_list_group(horizontal: :xxl) do |lg| %>
-  <% lg.slot(:item) do %>Cras justo odio<% end %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+  <% lg.item do %>Cras justo odio<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item do %>Morbi leo risus<% end %>
 <%- end %>

data/app/views/bs5/examples/list_group/style/actionable.html.erb

@@ -1,11 +1,11 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item) do %><%= link_to 'Dapibus ac facilisis in', '#' %><% end %>
-  <% lg.slot(:item, style: :primary) do %><%= link_to 'A simple primary list group item', '#' %><% end %>
-  <% lg.slot(:item, style: :secondary) do %><%= link_to 'A simple secondary list group item', '#' %><% end %>
-  <% lg.slot(:item, style: :success) do %><%= link_to 'A simple success list group item', '#' %><% end %>
-  <% lg.slot(:item, style: :danger) do %><%= link_to 'A simple danger list group item', '#' %><% end %>
-  <% lg.slot(:item, style: :warning) do %><%= link_to 'A simple warning list group item', '#' %><% end %>
-  <% lg.slot(:item, style: :info) do %><%= link_to 'A simple info list group item', '#' %><% end %>
-  <% lg.slot(:item, style: :light) do %><%= link_to 'A simple light list group item', '#' %><% end %>
-  <% lg.slot(:item, style: :dark) do %><%= link_to 'A simple dark list group item', '#' %><% end %>
+  <% lg.item do %><%= link_to 'Dapibus ac facilisis in', '#' %><% end %>
+  <% lg.item(color: :primary) do %><%= link_to 'A simple primary list group item', '#' %><% end %>
+  <% lg.item(color: :secondary) do %><%= link_to 'A simple secondary list group item', '#' %><% end %>
+  <% lg.item(color: :success) do %><%= link_to 'A simple success list group item', '#' %><% end %>
+  <% lg.item(color: :danger) do %><%= link_to 'A simple danger list group item', '#' %><% end %>
+  <% lg.item(color: :warning) do %><%= link_to 'A simple warning list group item', '#' %><% end %>
+  <% lg.item(color: :info) do %><%= link_to 'A simple info list group item', '#' %><% end %>
+  <% lg.item(color: :light) do %><%= link_to 'A simple light list group item', '#' %><% end %>
+  <% lg.item(color: :dark) do %><%= link_to 'A simple dark list group item', '#' %><% end %>
 <%- end %>

data/app/views/bs5/examples/list_group/style/default.html.erb

@@ -1,11 +1,11 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
-  <% lg.slot(:item, style: :primary) do %>A simple primary list group item<% end %>
-  <% lg.slot(:item, style: :secondary) do %>A simple secondary list group item<% end %>
-  <% lg.slot(:item, style: :success) do %>A simple success list group item<% end %>
-  <% lg.slot(:item, style: :danger) do %>A simple danger list group item<% end %>
-  <% lg.slot(:item, style: :warning) do %>A simple warning list group item<% end %>
-  <% lg.slot(:item, style: :info) do %>A simple info list group item<% end %>
-  <% lg.slot(:item, style: :light) do %>A simple light list group item<% end %>
-  <% lg.slot(:item, style: :dark) do %>A simple dark list group item<% end %>
+  <% lg.item do %>Dapibus ac facilisis in<% end %>
+  <% lg.item(color: :primary) do %>A simple primary list group item<% end %>
+  <% lg.item(color: :secondary) do %>A simple secondary list group item<% end %>
+  <% lg.item(color: :success) do %>A simple success list group item<% end %>
+  <% lg.item(color: :danger) do %>A simple danger list group item<% end %>
+  <% lg.item(color: :warning) do %>A simple warning list group item<% end %>
+  <% lg.item(color: :info) do %>A simple info list group item<% end %>
+  <% lg.item(color: :light) do %>A simple light list group item<% end %>
+  <% lg.item(color: :dark) do %>A simple dark list group item<% end %>
 <%- end %>

data/app/views/bs5/examples/list_group/with_badges/default.html.erb

@@ -1,14 +1,14 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.slot(:item, class: 'd-flex justify-content-between align-items-center') do %>
+  <% lg.item(class: 'd-flex justify-content-between align-items-center') do %>
     Cras justo odio
-    <%= bs5_badge(text: 14, style: :primary, pill: true) %>
+    <%= bs5_badge(text: 14, color: :primary, pill: true) %>
   <% end %>
-  <% lg.slot(:item, class: 'd-flex justify-content-between align-items-center') do %>
+  <% lg.item(class: 'd-flex justify-content-between align-items-center') do %>
     Dapibus ac facilisis in
-    <%= bs5_badge(text: 2, style: :primary, pill: true) %>
+    <%= bs5_badge(text: 2, color: :primary, pill: true) %>
   <% end %>
-  <% lg.slot(:item, class: 'd-flex justify-content-between align-items-center') do %>
+  <% lg.item(class: 'd-flex justify-content-between align-items-center') do %>
     Morbi leo risus
-    <%= bs5_badge(text: 1, style: :primary, pill: true) %>
+    <%= bs5_badge(text: 1, color: :primary, pill: true) %>
   <% end %>
 <%- end %>

data/app/views/bs5/examples/popovers/default/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Example</h2>
+<%= bs5_example(snippet: 'popovers/default/snippet') %>

data/app/views/bs5/examples/popovers/default/snippet.html.erb

@@ -0,0 +1 @@
+<%= bs5_button_tag('Click to toggle popover', bs5_popover(title: 'Popover title', content: "And here's some amazing content. It's very engaging. Right?").merge(type: 'button', color: :danger, size: :large)) %>

data/app/views/bs5/examples/popovers/disabled_elements/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Disabled elements</h2>
+<%= bs5_example(snippet: 'popovers/disabled_elements/snippet') %>

data/app/views/bs5/examples/popovers/disabled_elements/snippet.html.erb

@@ -0,0 +1,3 @@
+<%= tag.span(bs5_popover(content: 'Disabled popover').merge(class: 'd-inline-block')) do %>
+  <%= bs5_button_tag('Disabled button', disabled: true) %>
+<% end %>

data/app/views/bs5/examples/popovers/dismissable_on_next_click/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Dismissable on next click</h2>
+<%= bs5_example(snippet: 'popovers/dismissable_on_next_click/snippet') %>

data/app/views/bs5/examples/popovers/dismissable_on_next_click/snippet.html.erb

@@ -0,0 +1 @@
+<%= tag.a 'Dismissible popover', bs5_popover(title: 'Dismissible popover', content: "And here's some amazing content. It's very engaging. Right?", trigger: :focus).merge(class: 'btn btn-lg btn-danger', role: :button, tabindex: 0) %>

data/app/views/bs5/examples/popovers/four_directions/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Four directions</h2>
+<%= bs5_example(snippet: 'popovers/four_directions/snippet') %>

data/app/views/bs5/examples/popovers/four_directions/snippet.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_button_tag('Popover on top', bs5_popover(content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", container: :body, placement: :top).merge(type: 'button', color: :secondary)) %>
+
+<%= bs5_button_tag('Popover on right', bs5_popover(content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", container: :body, placement: :right).merge(type: 'button', color: :secondary)) %>
+
+<%= bs5_button_tag('Popover on bottom', bs5_popover(content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", container: :body, placement: :bottom).merge(type: 'button', color: :secondary)) %>
+
+<%= bs5_button_tag('Popover on left', bs5_popover(content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", container: :body, placement: :left).merge(type: 'button', color: :secondary)) %>

data/app/views/bs5/examples/spinners/border/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Border spinner</h2>
+<%= bs5_example(snippet: 'spinners/border/snippet') %>

data/app/views/bs5/examples/spinners/border/snippet.html.erb

@@ -0,0 +1 @@
+<%= bs5_spinner(text: 'Loading...') %>

data/app/views/bs5/examples/spinners/buttons/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Buttons</h2>
+<%= bs5_example(snippet: 'spinners/buttons/snippet') %>

data/app/views/bs5/examples/spinners/buttons/snippet.html.erb

@@ -0,0 +1,15 @@
+<%= bs5_button_tag(disabled: true) do %>
+  <%= bs5_spinner(text: 'Loading...', size: :small) %>
+<% end %>
+
+<%= bs5_button_tag(disabled: true) do %>
+  <%= bs5_spinner(size: :small) %> Loading...
+<% end %>
+
+<%= bs5_button_tag(disabled: true) do %>
+  <%= bs5_spinner(text: 'Loading...', grow: true, size: :small) %>
+<% end %>
+
+<%= bs5_button_tag(disabled: true) do %>
+  <%= bs5_spinner(grow: true,  size: :small) %> Loading...
+<% end %>

data/app/views/bs5/examples/spinners/colors/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Colors</h2>
+<%= bs5_example(snippet: 'spinners/colors/snippet') %>

data/app/views/bs5/examples/spinners/colors/snippet.html.erb

@@ -0,0 +1,16 @@
+<%= bs5_spinner(text: 'Loading...', color: :primary) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :secondary) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :success) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :danger) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :warning) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :info) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :light) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :dark) %>
+

data/app/views/bs5/examples/spinners/growing/_example.html.erb

@@ -0,0 +1,3 @@
+<h2>Growing spinner</h2>
+<%= bs5_example(snippet: 'spinners/growing/snippet') %>
+<%= bs5_example(snippet: 'spinners/growing/colors') %>

data/app/views/bs5/examples/spinners/growing/colors.html.erb

@@ -0,0 +1,16 @@
+<%= bs5_spinner(text: 'Loading...', color: :primary, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :secondary, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :success, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :danger, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :warning, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :info, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :light, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :dark, grow: true) %>
+

data/app/views/bs5/examples/spinners/growing/snippet.html.erb

@@ -0,0 +1 @@
+<%= bs5_spinner(text: 'Loading...', grow: true) %>

data/app/views/bs5/examples/spinners/options/_example.html.erb

@@ -0,0 +1,10 @@
+<h2>Alignment</h2>
+<h3>Margin</h3>
+<%= bs5_example(snippet: 'spinners/options/margin') %>
+<h3>Placement</h3>
+<h4>Flex</h4>
+<%= bs5_example(snippet: 'spinners/options/placement_flex1') %>
+<%= bs5_example(snippet: 'spinners/options/placement_flex2') %>
+<h4>Floats</h4>
+<%= bs5_example(snippet: 'spinners/options/floats') %>
+<%= bs5_example(snippet: 'spinners/options/text_align') %>

data/app/views/bs5/examples/spinners/options/floats.html.erb

@@ -0,0 +1,3 @@
+<div class="clearfix">
+  <%= bs5_spinner(class: 'float-end', text: 'Loading...') %>
+</div>

data/app/views/bs5/examples/spinners/options/margin.html.erb

@@ -0,0 +1 @@
+<%= bs5_spinner(text: 'Loading...', class: 'm-5') %>

data/app/views/bs5/examples/spinners/options/placement_flex1.html.erb

@@ -0,0 +1,3 @@
+<div class="d-flex justify-content-center">
+  <%= bs5_spinner(text: 'Loading...') %>
+</div>

data/app/views/bs5/examples/spinners/options/placement_flex2.html.erb

@@ -0,0 +1,4 @@
+<div class="d-flex align-items-center">
+  <strong>Loading...</strong>
+  <%= bs5_spinner(class: 'ms-auto', aria: { hidden: true }) %>
+</div>

data/app/views/bs5/examples/spinners/options/text_align.html.erb

@@ -0,0 +1,3 @@
+<div class="text-center">
+  <%= bs5_spinner(text: 'Loading...') %>
+</div>