twitter-bootstrap-rails 5.3.0 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (194) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +81 -0
  3. data/README.md +128 -628
  4. data/app/assets/javascripts/twitter/bootstrap/bootstrap.min.js +3 -3
  5. data/app/assets/stylesheets/twitter-bootstrap-static/bootstrap.css +3 -3
  6. data/lib/generators/bootstrap/badge/badge_generator.rb +13 -0
  7. data/lib/generators/bootstrap/breadcrumb/breadcrumb_generator.rb +13 -0
  8. data/lib/generators/bootstrap/button/button_generator.rb +13 -0
  9. data/lib/generators/bootstrap/cdn/cdn_generator.rb +39 -0
  10. data/lib/generators/bootstrap/cdn_tags.rb +43 -0
  11. data/lib/generators/bootstrap/dropdown/dropdown_generator.rb +13 -0
  12. data/lib/generators/bootstrap/features/features_generator.rb +13 -0
  13. data/lib/generators/bootstrap/footer/footer_generator.rb +13 -0
  14. data/lib/generators/bootstrap/header/header_generator.rb +13 -0
  15. data/lib/generators/bootstrap/hero/hero_generator.rb +13 -0
  16. data/lib/generators/bootstrap/install/install_generator.rb +120 -61
  17. data/lib/generators/bootstrap/install/templates/application.js +1 -1
  18. data/lib/generators/bootstrap/install/templates/bootstrap.js +10 -3
  19. data/lib/generators/bootstrap/install/templates/bootstrap_and_overrides.css +2 -2
  20. data/lib/generators/bootstrap/jumbotron/jumbotron_generator.rb +13 -0
  21. data/lib/generators/bootstrap/layout/layout_generator.rb +65 -1
  22. data/lib/generators/bootstrap/layout/templates/layout.html.erb +14 -9
  23. data/lib/generators/bootstrap/layout/templates/layout.html.haml +28 -43
  24. data/lib/generators/bootstrap/layout/templates/layout.html.slim +25 -40
  25. data/lib/generators/bootstrap/list_group/list_group_generator.rb +13 -0
  26. data/lib/generators/bootstrap/modal/modal_generator.rb +13 -0
  27. data/lib/generators/bootstrap/sidebar/sidebar_generator.rb +13 -0
  28. data/lib/generators/bootstrap/snippets/snippet_base.rb +126 -0
  29. data/lib/generators/bootstrap/snippets/snippet_catalog.rb +134 -0
  30. data/lib/generators/bootstrap/snippets/templates/badges/pills.html.erb +10 -0
  31. data/lib/generators/bootstrap/snippets/templates/badges/subtle.html.erb +10 -0
  32. data/lib/generators/bootstrap/snippets/templates/badges/subtle_bordered.html.erb +20 -0
  33. data/lib/generators/bootstrap/snippets/templates/badges/with_avatar.html.erb +34 -0
  34. data/lib/generators/bootstrap/snippets/templates/badges/with_avatar_divider.html.erb +66 -0
  35. data/lib/generators/bootstrap/snippets/templates/badges/with_icons.html.erb +26 -0
  36. data/lib/generators/bootstrap/snippets/templates/breadcrumbs/basic.html.erb +9 -0
  37. data/lib/generators/bootstrap/snippets/templates/breadcrumbs/chevron.html.erb +18 -0
  38. data/lib/generators/bootstrap/snippets/templates/breadcrumbs/custom.html.erb +18 -0
  39. data/lib/generators/bootstrap/snippets/templates/breadcrumbs/with_icons.html.erb +18 -0
  40. data/lib/generators/bootstrap/snippets/templates/buttons/circle.html.erb +20 -0
  41. data/lib/generators/bootstrap/snippets/templates/buttons/grid.html.erb +6 -0
  42. data/lib/generators/bootstrap/snippets/templates/buttons/loading.html.erb +10 -0
  43. data/lib/generators/bootstrap/snippets/templates/buttons/pills.html.erb +11 -0
  44. data/lib/generators/bootstrap/snippets/templates/buttons/with_icons.html.erb +14 -0
  45. data/lib/generators/bootstrap/snippets/templates/dropdowns/calendar.html.erb +156 -0
  46. data/lib/generators/bootstrap/snippets/templates/dropdowns/mega_menu.html.erb +140 -0
  47. data/lib/generators/bootstrap/snippets/templates/dropdowns/simple.html.erb +20 -0
  48. data/lib/generators/bootstrap/snippets/templates/dropdowns/with_icons.html.erb +88 -0
  49. data/lib/generators/bootstrap/snippets/templates/dropdowns/with_search.html.erb +64 -0
  50. data/lib/generators/bootstrap/snippets/templates/features/columns_with_icons.html.erb +46 -0
  51. data/lib/generators/bootstrap/snippets/templates/features/custom_cards.html.erb +79 -0
  52. data/lib/generators/bootstrap/snippets/templates/features/hanging_icons.html.erb +41 -0
  53. data/lib/generators/bootstrap/snippets/templates/features/icon_grid.html.erb +77 -0
  54. data/lib/generators/bootstrap/snippets/templates/features/with_title.html.erb +50 -0
  55. data/lib/generators/bootstrap/snippets/templates/footers/columns.html.erb +43 -0
  56. data/lib/generators/bootstrap/snippets/templates/footers/simple.html.erb +15 -0
  57. data/lib/generators/bootstrap/snippets/templates/footers/with_brand.html.erb +22 -0
  58. data/lib/generators/bootstrap/snippets/templates/footers/with_nav.html.erb +12 -0
  59. data/lib/generators/bootstrap/snippets/templates/footers/with_newsletter.html.erb +62 -0
  60. data/lib/generators/bootstrap/snippets/templates/headers/centered.html.erb +15 -0
  61. data/lib/generators/bootstrap/snippets/templates/headers/dark_double.html.erb +66 -0
  62. data/lib/generators/bootstrap/snippets/templates/headers/dark_search.html.erb +25 -0
  63. data/lib/generators/bootstrap/snippets/templates/headers/double.html.erb +28 -0
  64. data/lib/generators/bootstrap/snippets/templates/headers/grid_dropdown.html.erb +47 -0
  65. data/lib/generators/bootstrap/snippets/templates/headers/light_search.html.erb +34 -0
  66. data/lib/generators/bootstrap/snippets/templates/headers/nav_pills.html.erb +11 -0
  67. data/lib/generators/bootstrap/snippets/templates/headers/with_auth_buttons.html.erb +22 -0
  68. data/lib/generators/bootstrap/snippets/templates/heroes/centered.html.erb +13 -0
  69. data/lib/generators/bootstrap/snippets/templates/heroes/centered_screenshot.html.erb +17 -0
  70. data/lib/generators/bootstrap/snippets/templates/heroes/cropped_image.html.erb +17 -0
  71. data/lib/generators/bootstrap/snippets/templates/heroes/dark.html.erb +14 -0
  72. data/lib/generators/bootstrap/snippets/templates/heroes/signup_form.html.erb +26 -0
  73. data/lib/generators/bootstrap/snippets/templates/heroes/with_image.html.erb +17 -0
  74. data/lib/generators/bootstrap/snippets/templates/icons/_bootstrap_icons.html.erb +134 -0
  75. data/lib/generators/bootstrap/snippets/templates/jumbotrons/basic.html.erb +10 -0
  76. data/lib/generators/bootstrap/snippets/templates/jumbotrons/full_width.html.erb +12 -0
  77. data/lib/generators/bootstrap/snippets/templates/jumbotrons/placeholder.html.erb +13 -0
  78. data/lib/generators/bootstrap/snippets/templates/jumbotrons/with_icon.html.erb +22 -0
  79. data/lib/generators/bootstrap/snippets/templates/list-groups/checkable.html.erb +24 -0
  80. data/lib/generators/bootstrap/snippets/templates/list-groups/checkboxes.html.erb +45 -0
  81. data/lib/generators/bootstrap/snippets/templates/list-groups/checkboxes_expanded.html.erb +52 -0
  82. data/lib/generators/bootstrap/snippets/templates/list-groups/radios.html.erb +32 -0
  83. data/lib/generators/bootstrap/snippets/templates/list-groups/with_avatars.html.erb +36 -0
  84. data/lib/generators/bootstrap/snippets/templates/modals/confirm.html.erb +18 -0
  85. data/lib/generators/bootstrap/snippets/templates/modals/sheet.html.erb +19 -0
  86. data/lib/generators/bootstrap/snippets/templates/modals/signup.html.erb +44 -0
  87. data/lib/generators/bootstrap/snippets/templates/modals/whats_new.html.erb +41 -0
  88. data/lib/generators/bootstrap/snippets/templates/sidebars/collapsible.html.erb +90 -0
  89. data/lib/generators/bootstrap/snippets/templates/sidebars/dark.html.erb +67 -0
  90. data/lib/generators/bootstrap/snippets/templates/sidebars/icon_only.html.erb +59 -0
  91. data/lib/generators/bootstrap/snippets/templates/sidebars/light.html.erb +67 -0
  92. data/lib/generators/bootstrap/snippets/templates/sidebars/list_group.html.erb +94 -0
  93. data/lib/generators/bootstrap/starter/starter_generator.rb +37 -0
  94. data/lib/generators/bootstrap/starter/templates/starter.html.erb +13 -0
  95. data/lib/twitter/bootstrap/rails/bootstrap.rb +1 -0
  96. data/lib/twitter/bootstrap/rails/config.rb +54 -0
  97. data/lib/twitter/bootstrap/rails/engine.rb +0 -8
  98. data/lib/twitter/bootstrap/rails/version.rb +28 -1
  99. data/lib/twitter-bootstrap-rails.rb +0 -1
  100. data/spec/lib/generators/cdn_generator_spec.rb +42 -0
  101. data/spec/lib/generators/install_generator_spec.rb +148 -0
  102. data/spec/lib/generators/layout_generator_spec.rb +124 -0
  103. data/spec/lib/generators/no_hardcoded_versions_spec.rb +45 -0
  104. data/spec/lib/generators/snippet_generators_spec.rb +201 -0
  105. data/spec/lib/generators/starter_generator_spec.rb +54 -0
  106. data/spec/spec_helper.rb +5 -0
  107. data/spec/support/generator_spec_helper.rb +87 -0
  108. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap.bundle.min.js +3 -3
  109. data/vendor/assets/stylesheets/twitter/bootstrap/bootstrap.min.css +3 -3
  110. metadata +99 -123
  111. data/app/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  112. data/app/assets/fonts/glyphicons-halflings-regular.svg +0 -288
  113. data/app/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  114. data/app/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  115. data/app/assets/fonts/glyphicons-halflings-regular.woff2 +0 -0
  116. data/app/helpers/glyph_helper.rb +0 -23
  117. data/lib/generators/bootstrap/install/templates/bootstrap.coffee +0 -3
  118. data/lib/generators/bootstrap/install/templates/bootstrap_and_overrides.less +0 -21
  119. data/spec/lib/twitter_bootstrap_rails/glyph_helper_spec.rb +0 -24
  120. data/vendor/assets/stylesheets/twitter-bootstrap-static/bootstrap.css.erb +0 -6684
  121. data/vendor/static-source/bootstrap.less +0 -1
  122. data/vendor/static-source/sprites.less +0 -6
  123. data/vendor/toolkit/twitter/bootstrap/alerts.less +0 -73
  124. data/vendor/toolkit/twitter/bootstrap/badges.less +0 -66
  125. data/vendor/toolkit/twitter/bootstrap/bootstrap.less +0 -55
  126. data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +0 -26
  127. data/vendor/toolkit/twitter/bootstrap/button-groups.less +0 -244
  128. data/vendor/toolkit/twitter/bootstrap/buttons.less +0 -166
  129. data/vendor/toolkit/twitter/bootstrap/carousel.less +0 -270
  130. data/vendor/toolkit/twitter/bootstrap/close.less +0 -34
  131. data/vendor/toolkit/twitter/bootstrap/code.less +0 -69
  132. data/vendor/toolkit/twitter/bootstrap/component-animations.less +0 -33
  133. data/vendor/toolkit/twitter/bootstrap/dropdowns.less +0 -216
  134. data/vendor/toolkit/twitter/bootstrap/forms.less +0 -613
  135. data/vendor/toolkit/twitter/bootstrap/glyphicons.less +0 -305
  136. data/vendor/toolkit/twitter/bootstrap/grid.less +0 -84
  137. data/vendor/toolkit/twitter/bootstrap/input-groups.less +0 -171
  138. data/vendor/toolkit/twitter/bootstrap/jumbotron.less +0 -54
  139. data/vendor/toolkit/twitter/bootstrap/labels.less +0 -64
  140. data/vendor/toolkit/twitter/bootstrap/list-group.less +0 -130
  141. data/vendor/toolkit/twitter/bootstrap/media.less +0 -66
  142. data/vendor/toolkit/twitter/bootstrap/mixins/alerts.less +0 -14
  143. data/vendor/toolkit/twitter/bootstrap/mixins/background-variant.less +0 -9
  144. data/vendor/toolkit/twitter/bootstrap/mixins/border-radius.less +0 -18
  145. data/vendor/toolkit/twitter/bootstrap/mixins/buttons.less +0 -65
  146. data/vendor/toolkit/twitter/bootstrap/mixins/center-block.less +0 -7
  147. data/vendor/toolkit/twitter/bootstrap/mixins/clearfix.less +0 -22
  148. data/vendor/toolkit/twitter/bootstrap/mixins/forms.less +0 -85
  149. data/vendor/toolkit/twitter/bootstrap/mixins/gradients.less +0 -59
  150. data/vendor/toolkit/twitter/bootstrap/mixins/grid-framework.less +0 -91
  151. data/vendor/toolkit/twitter/bootstrap/mixins/grid.less +0 -122
  152. data/vendor/toolkit/twitter/bootstrap/mixins/hide-text.less +0 -21
  153. data/vendor/toolkit/twitter/bootstrap/mixins/image.less +0 -33
  154. data/vendor/toolkit/twitter/bootstrap/mixins/labels.less +0 -12
  155. data/vendor/toolkit/twitter/bootstrap/mixins/list-group.less +0 -30
  156. data/vendor/toolkit/twitter/bootstrap/mixins/nav-divider.less +0 -10
  157. data/vendor/toolkit/twitter/bootstrap/mixins/nav-vertical-align.less +0 -9
  158. data/vendor/toolkit/twitter/bootstrap/mixins/opacity.less +0 -8
  159. data/vendor/toolkit/twitter/bootstrap/mixins/pagination.less +0 -24
  160. data/vendor/toolkit/twitter/bootstrap/mixins/panels.less +0 -24
  161. data/vendor/toolkit/twitter/bootstrap/mixins/progress-bar.less +0 -10
  162. data/vendor/toolkit/twitter/bootstrap/mixins/reset-filter.less +0 -8
  163. data/vendor/toolkit/twitter/bootstrap/mixins/reset-text.less +0 -18
  164. data/vendor/toolkit/twitter/bootstrap/mixins/resize.less +0 -6
  165. data/vendor/toolkit/twitter/bootstrap/mixins/responsive-visibility.less +0 -15
  166. data/vendor/toolkit/twitter/bootstrap/mixins/size.less +0 -10
  167. data/vendor/toolkit/twitter/bootstrap/mixins/tab-focus.less +0 -9
  168. data/vendor/toolkit/twitter/bootstrap/mixins/table-row.less +0 -28
  169. data/vendor/toolkit/twitter/bootstrap/mixins/text-emphasis.less +0 -9
  170. data/vendor/toolkit/twitter/bootstrap/mixins/text-overflow.less +0 -8
  171. data/vendor/toolkit/twitter/bootstrap/mixins/vendor-prefixes.less +0 -227
  172. data/vendor/toolkit/twitter/bootstrap/mixins.less +0 -40
  173. data/vendor/toolkit/twitter/bootstrap/modals.less +0 -150
  174. data/vendor/toolkit/twitter/bootstrap/navbar.less +0 -660
  175. data/vendor/toolkit/twitter/bootstrap/navs.less +0 -242
  176. data/vendor/toolkit/twitter/bootstrap/normalize.less +0 -424
  177. data/vendor/toolkit/twitter/bootstrap/pager.less +0 -54
  178. data/vendor/toolkit/twitter/bootstrap/pagination.less +0 -89
  179. data/vendor/toolkit/twitter/bootstrap/panels.less +0 -271
  180. data/vendor/toolkit/twitter/bootstrap/popovers.less +0 -131
  181. data/vendor/toolkit/twitter/bootstrap/print.less +0 -101
  182. data/vendor/toolkit/twitter/bootstrap/progress-bars.less +0 -87
  183. data/vendor/toolkit/twitter/bootstrap/responsive-embed.less +0 -35
  184. data/vendor/toolkit/twitter/bootstrap/responsive-utilities.less +0 -194
  185. data/vendor/toolkit/twitter/bootstrap/scaffolding.less +0 -161
  186. data/vendor/toolkit/twitter/bootstrap/tables.less +0 -234
  187. data/vendor/toolkit/twitter/bootstrap/theme.less +0 -291
  188. data/vendor/toolkit/twitter/bootstrap/thumbnails.less +0 -36
  189. data/vendor/toolkit/twitter/bootstrap/tooltip.less +0 -101
  190. data/vendor/toolkit/twitter/bootstrap/type.less +0 -302
  191. data/vendor/toolkit/twitter/bootstrap/utilities.less +0 -55
  192. data/vendor/toolkit/twitter/bootstrap/variables.less +0 -1751
  193. data/vendor/toolkit/twitter/bootstrap/wells.less +0 -29
  194. data/vendor/toolkit/twitter/bootstrap_base.less +0 -2
data/README.md CHANGED
@@ -1,700 +1,200 @@
1
1
  # twitter-bootstrap-rails
2
2
 
3
- Bootstrap is a toolkit from Twitter designed to kickstart development of web apps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
4
-
5
- twitter-bootstrap-rails project integrates Bootstrap 5 CSS toolkit for Rails Asset Pipeline (Rails 8, Rails 7, Rails 6, Rails 5 and Rails 4.x versions are supported)
6
-
7
3
  [![Gem Version](https://badge.fury.io/rb/twitter-bootstrap-rails.svg)](http://badge.fury.io/rb/twitter-bootstrap-rails)
8
- [![Coverage Status](https://coveralls.io/repos/seyhunak/twitter-bootstrap-rails/badge.svg?branch=master)](https://coveralls.io/repos/seyhunak/twitter-bootstrap-rails/badge.svg?branch=master)
9
4
  [![GitHub stars](https://img.shields.io/github/stars/seyhunak/twitter-bootstrap-rails.svg)](https://github.com/seyhunak/twitter-bootstrap-rails/stargazers)
10
5
  [![GitHub forks](https://img.shields.io/github/forks/seyhunak/twitter-bootstrap-rails.svg)](https://github.com/seyhunak/twitter-bootstrap-rails/network)
11
6
  [![GitHub issues](https://img.shields.io/github/issues/seyhunak/twitter-bootstrap-rails.svg)](https://github.com/seyhunak/twitter-bootstrap-rails/issues)
12
7
 
13
- ## Backers and Sponsors
14
- [![OpenCollective](https://opencollective.com/twitter-bootstrap-rails/backers/badge.svg)](#backers)
15
- [![OpenCollective](https://opencollective.com/twitter-bootstrap-rails/sponsors/badge.svg)](#sponsors)
16
-
17
- ## Screencasts
18
- #### Installing twitter-bootstrap-rails, generators, usage and more
19
-
20
- Screencasts provided by <a href="http://railscasts.com">RailsCasts</a> (Ryan Bates)
21
-
22
- [Twitter Bootstrap Basics](http://railscasts.com/episodes/328-twitter-bootstrap-basics "Twitter Bootstrap Basics")
23
- in this episode you will learn how to include Bootstrap into Rails application with the twitter-bootstrap-rails gem.
24
-
25
- [More on Twitter Bootstrap](http://railscasts.com/episodes/329-more-on-twitter-bootstrap "More on Twitter Bootstrap")
26
- in this episode continues on the Bootstrap project showing how to display flash messages, add form validations with SimpleForm, customise layout with variables, and switch to using Sass.
27
- (Note: This episode is pro episode)
28
-
29
- ## Installing the Gem
8
+ Integrates Bootstrap 5.3.8 into Rails Asset Pipeline. Supports Rails 8, 7, 6, 5.
30
9
 
31
- The [Twitter Bootstrap Rails gem](http://rubygems.org/gems/twitter-bootstrap-rails) can provide the Bootstrap stylesheets in two ways.
32
-
33
- The plain CSS way is how Bootstrap is provided on [the official website](http://twbs.github.io/bootstrap/).
34
-
35
- The [Less](http://lesscss.org/) way provides more customisation options, like changing theme colors and provides useful Less mixins for your code, but requires the
36
- Less gem and the Ruby Racer Javascript runtime (not available on Microsoft Windows).
37
-
38
- ### Installing the Less stylesheets
39
-
40
- To use Less stylesheets, you'll need the [less-rails gem](http://rubygems.org/gems/less-rails), and one of [JavaScript runtimes supported by CommonJS](https://github.com/cowboyd/commonjs.rb#supported-runtimes).
41
-
42
- Include these lines in the Gemfile to install the gems from [RubyGems.org](http://rubygems.org):
10
+ ## Install
43
11
 
44
12
  ```ruby
45
- gem "therubyracer"
46
- gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
13
+ # Gemfile
47
14
  gem "twitter-bootstrap-rails"
48
15
  ```
49
16
 
50
- or you can install from latest build;
51
-
52
- ```ruby
53
- gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
17
+ ```bash
18
+ bundle install
19
+ rails generate bootstrap:install static
54
20
  ```
55
21
 
56
- Then run `bundle install` from the command line:
57
-
58
- bundle install
59
-
60
- Then run the bootstrap generator to add Bootstrap includes into your assets:
61
-
62
- rails generate bootstrap:install less
63
-
64
- If you need to skip coffeescript replacement into app generators, use:
65
-
66
- rails generate bootstrap:install --no-coffeescript
22
+ ## Generators
67
23
 
68
- ### Installing the CSS stylesheets (Recommended)
24
+ Every code snippet on the
25
+ [Bootstrap 5.3 Introduction page](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
26
+ is reproducible from a command:
69
27
 
70
- This is the recommended way to use Bootstrap. It uses pre-compiled static CSS and JavaScript files.
28
+ | Docs snippet | Command |
29
+ |---|---|
30
+ | Starter template | `rails g bootstrap:starter` |
31
+ | CDN CSS `<link>` | `rails g bootstrap:cdn --css` |
32
+ | CDN JS bundle `<script>` | `rails g bootstrap:cdn --js` |
33
+ | Popper + `bootstrap.js` separately | `rails g bootstrap:cdn --separate-popper` |
34
+ | Important globals (doctype, `lang`, viewport) | baked into every generated layout and the starter template |
71
35
 
72
- ```ruby
73
- gem "twitter-bootstrap-rails"
74
- ```
36
+ ```bash
37
+ # Install Bootstrap assets into the asset pipeline
38
+ rails g bootstrap:install static
75
39
 
76
- After running `bundle install`, run the generator:
40
+ # ...or load Bootstrap from the jsDelivr CDN instead
41
+ rails g bootstrap:install cdn
77
42
 
78
- rails generate bootstrap:install static
43
+ # Generate a Bootstrap layout
44
+ rails g bootstrap:layout application
79
45
 
80
- If your Rails server is running, make sure to restart it.
46
+ # ...linking Bootstrap from the CDN, with Subresource Integrity
47
+ rails g bootstrap:layout application --cdn
81
48
 
82
- ### Installing the Less stylesheets
49
+ # ...using Popper and bootstrap.js separately rather than the bundle
50
+ rails g bootstrap:layout application --cdn --separate-popper
83
51
 
84
- To use Less stylesheets for customization, you'll need the [less-rails gem](http://rubygems.org/gems/less-rails), and one of [JavaScript runtimes supported by CommonJS](https://github.com/cowboyd/commonjs.rb#supported-runtimes).
52
+ # Write the starter template from the Bootstrap docs
53
+ rails g bootstrap:starter # -> public/bootstrap-starter.html
54
+ rails g bootstrap:starter --path=public/demo.html
85
55
 
86
- Include these lines in the Gemfile:
56
+ # Print CDN tags to paste into a layout you already own (writes nothing)
57
+ rails g bootstrap:cdn
87
58
 
88
- ```ruby
89
- gem "therubyracer"
90
- gem "less-rails"
91
- gem "twitter-bootstrap-rails"
59
+ # Generate themed views for scaffold
60
+ rails g scaffold Task title:string done:boolean
61
+ rails db:migrate
62
+ rails g bootstrap:themed Tasks
92
63
  ```
93
64
 
94
- Then run:
65
+ `bootstrap:install cdn` records the choice in `config/initializers/bootstrap.rb`,
66
+ so `bootstrap:layout` emits CDN tags by default afterwards. Pass `--cdn` or
67
+ `--no-cdn` to override it per run.
95
68
 
96
- bundle install
97
- rails generate bootstrap:install less
69
+ Both asset pipelines are supported. On **Sprockets**, `static` adds `require`
70
+ directives to your manifests. On **Propshaft** (the Rails 8 default) there are no
71
+ directives to add, so the generated layout links the vendored files directly —
72
+ run `rails g bootstrap:layout` after `bootstrap:install static` either way.
98
73
 
99
- ## Generators
74
+ The Bootstrap version and its CDN URLs and integrity hashes live in one place,
75
+ `Twitter::Bootstrap::Rails::BOOTSTRAP_CDN`. No template hardcodes them.
100
76
 
101
- This gem provides several generators:
77
+ ## Snippets
102
78
 
103
- ### bootstrap:install
104
-
105
- Installs Bootstrap assets to your Rails application.
79
+ Every snippet published at
80
+ [getbootstrap.com/docs/5.3/examples](https://getbootstrap.com/docs/5.3/examples/)
81
+ 62 of them across 12 categories — is a command. Each writes an `.html.erb`
82
+ partial into `app/views/shared/`:
106
83
 
107
84
  ```bash
108
- rails generate bootstrap:install static # Use pre-compiled CSS (recommended)
109
- rails generate bootstrap:install less # Use Less stylesheets for customization
110
- ```
111
-
112
- Options:
113
- - `--no-coffeescript` - Skip CoffeeScript replacement
114
-
115
- ### bootstrap:layout
116
-
117
- Generates a Bootstrap-compatible layout with navigation navbar.
85
+ rails g bootstrap:header # the first variant, "centered"
86
+ rails g bootstrap:header dark_search # a specific variant
87
+ rails g bootstrap:header --list # what's available, with descriptions
88
+ ```
89
+
90
+ | Command | Variants |
91
+ |---|---|
92
+ | `rails g bootstrap:header` | `centered`, `nav_pills`, `with_auth_buttons`, `dark_search`, `light_search`, `grid_dropdown`, `double`, `dark_double` |
93
+ | `rails g bootstrap:hero` | `centered`, `centered_screenshot`, `with_image`, `signup_form`, `cropped_image`, `dark` |
94
+ | `rails g bootstrap:features` | `columns_with_icons`, `hanging_icons`, `custom_cards`, `icon_grid`, `with_title` |
95
+ | `rails g bootstrap:sidebar` | `dark`, `light`, `icon_only`, `collapsible`, `list_group` |
96
+ | `rails g bootstrap:footer` | `simple`, `with_brand`, `with_nav`, `columns`, `with_newsletter` |
97
+ | `rails g bootstrap:dropdown` | `simple`, `with_search`, `with_icons`, `calendar`, `mega_menu` |
98
+ | `rails g bootstrap:list_group` | `with_avatars`, `checkboxes`, `checkboxes_expanded`, `checkable`, `radios` |
99
+ | `rails g bootstrap:modal` | `sheet`, `confirm`, `whats_new`, `signup` |
100
+ | `rails g bootstrap:badge` | `pills`, `subtle`, `subtle_bordered`, `with_avatar`, `with_icons`, `with_avatar_divider` |
101
+ | `rails g bootstrap:breadcrumb` | `basic`, `with_icons`, `chevron`, `custom` |
102
+ | `rails g bootstrap:button` | `pills`, `grid`, `with_icons`, `loading`, `circle` |
103
+ | `rails g bootstrap:jumbotron` | `with_icon`, `placeholder`, `full_width`, `basic` |
104
+
105
+ Variants are listed in the order they appear on the docs page, so the first one
106
+ in each row is the first example Bootstrap shows.
107
+
108
+ Options, on every snippet command:
109
+
110
+ | Option | Effect |
111
+ |---|---|
112
+ | `--list` | Print the variants with descriptions and exit, writing nothing |
113
+ | `--as=NAME` | Partial name to write (default: the generator name) |
114
+ | `--path=DIR` | Where to write it (default: `app/views/shared`) |
115
+ | `--no-icons` | Skip installing the shared icon sprite |
118
116
 
119
117
  ```bash
120
- rails generate bootstrap:layout application
118
+ rails g bootstrap:footer columns --as=site_footer --path=app/views/layouts
119
+ # -> app/views/layouts/_site_footer.html.erb
121
120
  ```
122
121
 
123
- ### bootstrap:themed
124
-
125
- Generates Bootstrap-themed CRUD views for a resource. Run after creating your scaffold.
122
+ ### Placeholder images
126
123
 
127
- ```bash
128
- rails generate scaffold Post title:string body:text
129
- rails db:migrate
130
- rails generate bootstrap:themed Posts
131
- ```
124
+ Five snippets (`hero centered`, `hero centered_screenshot`, `hero with_image`,
125
+ `hero cropped_image`, `features custom_cards`) reference placeholder images that
126
+ only exist on Bootstrap's docs site, so they 404 until you point them at your own
127
+ assets. The generator warns you when you pick one.
132
128
 
133
- ### bootstrap:partial
129
+ ### Icons
134
130
 
135
- Generates Bootstrap partials (navbar, navbar-devise, carousel).
131
+ 36 of the 62 snippets use Bootstrap Icons through an SVG sprite. Those commands
132
+ also write `_bootstrap_icons.html.erb` next to the partial. Render it **once**,
133
+ near the top of `<body>` in your layout, or those icons come out as empty boxes:
136
134
 
137
- ```bash
138
- rails generate bootstrap:partial navbar
135
+ ```erb
136
+ <%= render "shared/bootstrap_icons" %>
139
137
  ```
140
138
 
141
139
  ## Quick Start
142
140
 
143
141
  ```bash
144
- # Create a new Rails app
145
142
  rails new myapp
146
143
  cd myapp
147
-
148
- # Add to Gemfile
149
- gem "twitter-bootstrap-rails"
150
-
151
- # Install dependencies
144
+ echo 'gem "twitter-bootstrap-rails"' >> Gemfile
152
145
  bundle install
153
-
154
- # Install Bootstrap assets
155
146
  rails generate bootstrap:install static
156
-
157
- # Generate a scaffold
158
147
  rails generate scaffold Task title:string description:text completed:boolean
159
-
160
- # Run migrations
161
148
  rails db:migrate
162
-
163
- # Apply Bootstrap theming
164
149
  rails generate bootstrap:themed Tasks
165
-
166
- # Generate layout
167
150
  rails generate bootstrap:layout application
168
-
169
- # Start server
170
151
  rails server
171
152
  ```
172
153
 
173
- Visit http://localhost:3000/tasks to see your Bootstrap-themed app!
174
-
154
+ Run `bootstrap:layout` even if you already have a layout — that step is what puts
155
+ Bootstrap's CSS and JS on the page.
175
156
 
176
- rails g bootstrap:themed [RESOURCE_NAME]
157
+ ## Upgrading to 5.4.0
177
158
 
159
+ 5.4.0 is a breaking release:
178
160
 
179
- Example:
161
+ - **Less is gone.** `rails g bootstrap:install less` no longer exists; the
162
+ argument is now `static` (default) or `cdn`. Bootstrap 5 has no Less build, and
163
+ the `less-rails` and `execjs` dependencies have been dropped.
164
+ - **Glyphicons are gone**, including the `glyph` helper. Bootstrap dropped them in
165
+ v4. The snippet generators ship Bootstrap Icons instead.
166
+ - **CoffeeScript support is gone**, along with `--no-coffeescript`.
167
+ - The gem version no longer tracks the Bootstrap version.
168
+ `Twitter::Bootstrap::Rails::BOOTSTRAP_VERSION` says which Bootstrap ships.
180
169
 
170
+ If you are on Rails 8, note that `bootstrap:install static` previously left
171
+ Propshaft apps with no Bootstrap at all — that is fixed here. See the
172
+ [CHANGELOG](CHANGELOG.md) for the full list.
181
173
 
182
- rails g scaffold Post title:string description:text
183
- rake db:migrate
184
- rails g bootstrap:themed Posts
174
+ ## Buy me a Coffee
175
+ ## ☕ Support the Project
185
176
 
186
- Notice the plural usage of the resource to generate bootstrap:themed.
177
+ [![Buy Me A Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-FFDD00?style=for-the-badge&logo=buymeacoffee&logoColor=000000)](https://www.buymeacoffee.com/seyhunak)
187
178
 
188
- ## Using with Less
179
+ ## Contributors
189
180
 
190
- Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.
181
+ Thanks to all contributors who are helping to make better.
191
182
 
192
- ## Using stylesheets with Less
183
+ <a href="https://github.com/seyhunak/twitter-bootstrap-rails/graphs/contributors">
184
+ <img src="https://contrib.rocks/image?repo=seyhunak/twitter-bootstrap-rails" />
185
+ </a>
193
186
 
194
- You have to require Bootstrap LESS (bootstrap_and_overrides.css.less) in your application.css
187
+ ### Star History
195
188
 
196
- ```css
197
- /*
198
- *= require bootstrap_and_overrides
199
- */
200
-
201
- /* Your stylesheets goes here... */
202
- ```
203
-
204
- To use individual components from bootstrap, your bootstrap_and_overrides.less could look like this:
205
-
206
- ```less
207
- // Core variables and mixins
208
- @import "twitter/bootstrap/variables.less";
209
- @import "twitter/bootstrap/mixins.less";
210
-
211
- // Reset and dependencies
212
- @import "twitter/bootstrap/normalize.less";
213
- @import "twitter/bootstrap/print.less";
214
- //@import "twitter/bootstrap/glyphicons.less"; // Excludes glyphicons
215
-
216
- // Core CSS
217
- @import "twitter/bootstrap/scaffolding.less";
218
- @import "twitter/bootstrap/type.less";
219
- @import "twitter/bootstrap/code.less";
220
- @import "twitter/bootstrap/grid.less";
221
- @import "twitter/bootstrap/tables.less";
222
- @import "twitter/bootstrap/forms.less";
223
- @import "twitter/bootstrap/buttons.less";
224
-
225
- // Components
226
- @import "twitter/bootstrap/component-animations.less";
227
- @import "twitter/bootstrap/dropdowns.less";
228
- @import "twitter/bootstrap/button-groups.less";
229
- @import "twitter/bootstrap/input-groups.less";
230
- @import "twitter/bootstrap/navs.less";
231
- @import "twitter/bootstrap/navbar.less";
232
- @import "twitter/bootstrap/breadcrumbs.less";
233
- @import "twitter/bootstrap/pagination.less";
234
- @import "twitter/bootstrap/pager.less";
235
- @import "twitter/bootstrap/labels.less";
236
- @import "twitter/bootstrap/badges.less";
237
- @import "twitter/bootstrap/jumbotron.less";
238
- @import "twitter/bootstrap/thumbnails.less";
239
- @import "twitter/bootstrap/alerts.less";
240
- @import "twitter/bootstrap/progress-bars.less";
241
- @import "twitter/bootstrap/media.less";
242
- @import "twitter/bootstrap/list-group.less";
243
- @import "twitter/bootstrap/panels.less";
244
- @import "twitter/bootstrap/responsive-embed.less";
245
- @import "twitter/bootstrap/wells.less";
246
- @import "twitter/bootstrap/close.less";
247
-
248
- // Components w/ JavaScript
249
- @import "twitter/bootstrap/modals.less";
250
- @import "twitter/bootstrap/tooltip.less";
251
- @import "twitter/bootstrap/popovers.less";
252
- @import "twitter/bootstrap/carousel.less";
253
-
254
- // Utility classes
255
- @import "twitter/bootstrap/utilities.less";
256
- @import "twitter/bootstrap/responsive-utilities.less";
257
- ```
258
-
259
- If you'd like to alter Bootstrap's own variables, or define your LESS
260
- styles inheriting Bootstrap's mixins, you can do so inside bootstrap_and_overrides.css.less:
261
-
262
-
263
- ```less
264
- @link-color: #ff0000;
265
- ```
266
-
267
- ### SASS
268
-
269
- If you are using SASS to compile your application.css (e.g. your manifest file is application.css.sass or application.css.scss) you may get this:
270
-
271
- ```
272
- Invalid CSS after "*": expected "{", was "= require twitt..."
273
- (in app/assets/stylesheets/application.css)
274
- (sass)
275
- ```
276
-
277
- If this is the case, you **must** use @import instead of `*=` in your manifest file, or don't compile your manifest with SASS.
278
-
279
- ### Icons
280
-
281
- By default, this gem (when using less generator) won't enable standard Bootstraps's Glyphicons.
282
-
283
- If you would like to restore the default Glyphicons, inside the generated `bootstrap_and_overrides.css.less` uncomment these lines:
284
-
285
- ```less
286
- // Glyphicons are not required by default, uncomment the following lines to enable them.
287
- @glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot");
288
- @glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix");
289
- @glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff");
290
- @glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf");
291
- @glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular");
292
-
293
- @import "twitter/bootstrap/glyphicons.less";
294
- ```
295
-
296
- This gem was used to bundle the excellent [Font-Awesome](http://fortawesome.github.io/Font-Awesome/) library.
297
- However that was another maintenance effort that is not worth to do here.
298
-
299
- For Rails projects that need it there is the [font-awesome-rails gem](https://github.com/bokmann/font-awesome-rails) that
300
- provides same functionality that this gems was used to provide and it also have some other interesting features (e.g. view helpers).
301
-
302
- ## Using JavaScript
303
-
304
- Require Bootstrap JS (bootstrap.js) in your application.js
305
-
306
- ```js
307
- //= require twitter/bootstrap
308
-
309
- $(function(){
310
- /* Your JavaScript goes here... */
311
- });
312
- ```
313
-
314
- If you want to customize what is loaded, your application.js would look something like this
315
-
316
- ```js
317
- #= require jquery
318
- #= require jquery_ujs
319
- #= require twitter/bootstrap/transition
320
- #= require twitter/bootstrap/alert
321
- #= require twitter/bootstrap/modal
322
- #= require twitter/bootstrap/button
323
- #= require twitter/bootstrap/collapse
324
- ```
325
-
326
- ...and so on for each bootstrap js component.
327
-
328
- ## Using CoffeeScript (optionally)
329
-
330
- Using Bootstrap with the CoffeeScript is easy.
331
- twitter-bootstrap-rails generates a "bootstrap.js.coffee" file for you
332
- to /app/assets/javascripts/ folder.
333
-
334
- ```coffee
335
- jQuery ->
336
- $("a[rel~=popover], .has-popover").popover()
337
- $("a[rel~=tooltip], .has-tooltip").tooltip()
338
- ```
339
-
340
- ## Using Helpers
341
-
342
- ### Modal Helper
343
- You can create modals easily using the following example. The header, body, and footer all accept content_tag or plain html.
344
- The href of the button to launch the modal must match the id of the modal dialog. It also accepts a block for the header, body, and footer. If you are getting a complaint about the modal_helper unable to merge a hash it is due to this.
345
-
346
- ```erb
347
- <%= content_tag :a, "Modal", href: "#modal", class: 'btn', data: {toggle: 'modal'} %>
348
- <%= modal_dialog id: "modal",
349
- header: { show_close: true, dismiss: 'modal', title: 'Modal header' },
350
- body: { content: 'This is the body' },
351
- footer: { content: content_tag(:button, 'Save', class: 'btn') } %>
352
- ```
353
-
354
- ### Navbar Helper
355
- It should let you write things like:
356
-
357
- ```erb
358
- <%= nav_bar fixed: :top, brand: "Fashionable Clicheizr 2.0", responsive: true do %>
359
- <%= menu_group do %>
360
- <%= menu_item "Home", root_path %>
361
- <%= menu_divider %>
362
- <%= drop_down "Products" do %>
363
- <%= menu_item "Things you can't afford", expensive_products_path %>
364
- <%= menu_item "Things that won't suit you anyway", harem_pants_path %>
365
- <%= menu_item "Things you're not even cool enough to buy anyway", hipster_products_path %>
366
- <% if current_user.lives_in_hackney? %>
367
- <%= menu_item "Bikes", fixed_wheel_bikes_path %>
368
- <% end %>
369
- <% end %>
370
- <%= menu_item "About Us", about_us_path %>
371
- <%= menu_item "Contact", contact_path %>
372
- <% end %>
373
- <%= menu_group pull: :right do %>
374
- <% if current_user %>
375
- <%= menu_item "Log Out", log_out_path %>
376
- <% else %>
377
- <%= form_for @user, url: session_path(:user), html => {class: "navbar-form pull-right"} do |f| -%>
378
- <p><%= f.text_field :email %></p>
379
- <p><%= f.password_field :password %></p>
380
- <p><%= f.submit "Sign in" %></p>
381
- <% end -%>
382
- <% end %>
383
- <% end %>
384
- <% end %>
385
- ```
386
-
387
- ### Navbar scaffolding
388
-
389
- In your view file (most likely application.html.erb) to get a basic navbar set up you need to do this:
390
-
391
- ```erb
392
- <%= nav_bar %>
393
- ```
394
-
395
- Which will render:
396
-
397
- ```html
398
- <div class="navbar">
399
- <div class="container">
400
- </div>
401
- </div>
402
- ```
189
+ <a href="https://www.star-history.com/#seyhunak/twitter-bootstrap-rails&Date">
190
+ <picture>
191
+ <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=seyhunak/twitter-bootstrap-rails&type=Date&theme=dark" />
192
+ <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=seyhunak/twitter-bootstrap-rails&type=Date" />
193
+ <img alt="Star history of seyhunak/twitter-bootstrap-rails over time" src="https://api.star-history.com/svg?repos=seyhunak/twitter-bootstrap-rails&type=Date" />
194
+ </picture>
195
+ </a>
403
196
 
404
- ### Fixed navbar
405
-
406
- If you want the navbar to stick to the top of the screen, pass in the option like this:
407
-
408
- ```erb
409
- <%= nav_bar fixed: :top %>
410
- ```
411
-
412
- To render:
413
-
414
- ```html
415
- <div class="navbar navbar-fixed-top">
416
- <div class="container">
417
- </div>
418
- </div>
419
- ```
420
-
421
- ### Static navbar
422
-
423
- If you want a full-width navbar that scrolls away with the page, pass in the option like this:
424
-
425
- ```erb
426
- <%= nav_bar static: :top %>
427
- ```
428
-
429
- To render:
430
-
431
- ```html
432
- <div class="navbar navbar-static-top">
433
- <div class="container">
434
- </div>
435
- </div>
436
- ```
437
-
438
- ### Brand name
439
-
440
- Add the name of your site on the left hand edge of the navbar. By default, it will link to root_url. Passing a brand_link option will set the url to whatever you want.
441
-
442
- ```erb
443
- <%= nav_bar brand: "We're sooo web 2.0alizr", brand_link: account_dashboard_path %>
444
- ```
445
-
446
- Which will render:
447
-
448
- ```html
449
- <div class="navbar">
450
- <div class="container">
451
- <a class="navbar-brand" href="/accounts/dashboard">
452
- We're sooo web 2.0alizr
453
- </a>
454
- </div>
455
- </div>
456
- ```
457
-
458
- ### Optional responsive variation
459
-
460
- If you want the responsive version of the navbar to work (One that shrinks down on mobile devices etc.), you need to pass this option:
461
-
462
- ```erb
463
- <%= nav_bar responsive: true %>
464
- ```
465
-
466
- Which renders the html quite differently:
467
-
468
- ```html
469
- <div class="navbar">
470
- <div class="container">
471
- <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
472
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
473
- <span class="icon-bar"></span>
474
- <span class="icon-bar"></span>
475
- <span class="icon-bar"></span>
476
- </button>
477
- <!-- Everything in here gets hidden at 940px or less -->
478
- <div class="navbar-collapse collapse">
479
- <!-- menu items gets rendered here instead -->
480
- </div>
481
- </div>
482
- </div>
483
- ```
484
-
485
- ### Nav links
486
-
487
- This is the 'meat' of the code where you define your menu items.
488
-
489
- You can group menu items in theoretical boxes which you can apply logic to - e.g. show different collections for logged in users/logged out users, or simply right align a group.
490
-
491
- The active menu item will be inferred from the link for now.
492
-
493
- The important methods here are menu_group and menu_item.
494
-
495
- menu_group only takes one argument - :pull - this moves the group left or right when passed :left or :right.
496
-
497
- menu_item generates a link wrapped in an li tag. It takes two arguments and an options hash. The first argument is the name (the text that will appear in the menu), and the path (which defaults to "#" if left blank). The rest of the options are passed straight through to the link_to helper, so that you can add classes, ids, methods or data tags etc.
498
-
499
- ```erb
500
- <%= nav_bar fixed: :top, brand: "Ninety Ten" do %>
501
- <%= menu_group do %>
502
- <%= menu_item "Home", root_path %>
503
- <%= menu_item "About Us", about_us_path %>
504
- <%= menu_item "Contact", contact_path %>
505
- <% end %>
506
- <% if current_user %>
507
- <%= menu_item "Log Out", log_out_path %>
508
- <% else %>
509
- <%= menu_group pull: :right do %>
510
- <%= menu_item "Sign Up", registration_path %>
511
- <%= form_for @user, url: session_path(:user) do |f| -%>
512
- <p><%= f.text_field :email %></p>
513
- <p><%= f.password_field :password %></p>
514
- <p><%= f.submit "Sign in" %></p>
515
- <% end -%>
516
- <% end %>
517
- <% end %>
518
- <% end %>
519
- ```
520
-
521
- ### Dropdown menus
522
-
523
- For multi-level list options, where it makes logical sense to group menu items, or simply to save space if you have a lot of pages, you can group menu items into drop down lists like this:
524
-
525
- ```erb
526
- <%= nav_bar do %>
527
- <%= menu_item "Home", root_path %>
528
- <%= drop_down "Products" do %>
529
- <%= menu_item "Latest", latest_products_path %>
530
- <%= menu_item "Top Sellers", popular_products_path %>
531
- <%= drop_down_divider %>
532
- <%= menu_item "Discount Items", discounted_products_path %>
533
- <% end %>
534
- <%= menu_item "About Us", about_us_path %>
535
- <%= menu_item "Contact", contact_path %>
536
- <% end %>
537
- ```
538
-
539
- ### Dividers
540
-
541
- Dividers are just vertical bars that visually separate logically disparate groups of menu items
542
-
543
- ```erb
544
- <%= nav_bar fixed: :bottom do %>
545
- <%= menu_item "Home", root_path %>
546
- <%= menu_item "About Us", about_us_path %>
547
- <%= menu_item "Contact", contact_path %>
548
- <%= menu_divider %>
549
- <%= menu_item "Edit Profile", edit_user_path(current_user) %>
550
- <%= menu_item "Account Settings", edit_user_account_path(current_user, @account) %>
551
- <%= menu_item "Log Out", log_out_path %>
552
- <% end %>
553
- ```
554
-
555
- ### Forms in navbar
556
-
557
- At the moment - this is just a how to...
558
-
559
- You need to add this class to the form itself (Different form builders do this in different ways - please check out the relevant docs)
560
-
561
- ```css
562
- .navbar-form
563
- ```
564
- To pull the form left or right, add either of these classes:
565
- ```css
566
- .pull-left
567
- .pull-right
568
- ```
569
-
570
- If you want the Bootstrap search box (I think it just rounds the corners), use:
571
- ```css
572
- .navbar-search
573
- ```
574
- Instead of:
575
- ```css
576
- .navbar-form
577
- ```
578
-
579
- To change the size of the form fields, use .span2 (or however many span widths you want) to the input itself.
580
-
581
- ### Component alignment
582
-
583
- You can shift things to the left or the right across the nav bar. It's easiest to do this on grouped menu items:
584
-
585
- ```erb
586
- <%= nav_bar fixed: :bottom do %>
587
- <% menu_group do %>
588
- <%= menu_item "Home", root_path %>
589
- <%= menu_item "About Us", about_us_path %>
590
- <%= menu_item "Contact", contact_path %>
591
- <% end %>
592
- <% menu_group pull: :right do %>
593
- <%= menu_item "Edit Profile", edit_user_path(current_user) %>
594
- <%= menu_item "Account Settings", edit_user_account_path(current_user, @account) %>
595
- <%= menu_item "Log Out", log_out_path %>
596
- <% end %>
597
- <% end %>
598
- ```
599
-
600
- ### Text in the navbar
601
-
602
- If you want to put regular plain text in the navbar anywhere, you do it like this:
603
-
604
- ```erb
605
- <%= nav_bar brand: "Apple" do %>
606
- <%= menu_text "We make shiny things" %>
607
- <%= menu_item "Home", root_path %>
608
- <%= menu_item "About Us", about_us_path %>
609
- <% end %>
610
- ```
611
-
612
- It also takes the :pull option to drag it to the left or right.
613
-
614
- ### Flash helper
615
-
616
- Add flash helper `<%= bootstrap_flash %>` to your layout (built-in with layout generator).
617
- You can pass the attributes you want to add to the main div returned: `<%= bootstrap_flash(class: "extra-class", id: "your-id") %>`
618
-
619
-
620
- ### Breadcrumbs Helpers
621
-
622
- *Notice* If your application is using [breadcrumbs-on-rails](https://github.com/weppos/breadcrumbs_on_rails) you will have a namespace collision with the add_breadcrumb method. For this reason if breadcrumbs-on-rails is detected in `Gemfile` gem methods will be accessible using `boostrap` prefix, i.e. `render_bootstrap_breadcrumbs` and `add_bootstrap_breadcrumb`
623
-
624
- Usually you do not need to use these breadcrumb gems since this gem provides the same functionality out of the box without the additional dependency.
625
-
626
- However if there are some `breadcrumbs-on-rails` features you need to keep you can still use them and use this gem with the prefixes explained above.
627
-
628
- Add breadcrumbs helper `<%= render_breadcrumbs %>` to your layout.
629
- You can also specify a divider for it like this: `<%= render_breadcrumbs('>') %>` (default divider is `/`).
630
- If you do not need dividers at all you can use `nil`: `<%= render_breadcrumbs(nil) %>`.
631
-
632
- Full example:
633
- ```ruby
634
-
635
- render_breadcrumbs(" / ", { class: '', item_class: '', divider_class: '', active_class: 'active' })
636
-
637
- ```
638
-
639
- ```ruby
640
- class ApplicationController
641
- add_breadcrumb :root # 'root_path' will be used as url
642
- end
643
- ```
644
-
645
- ```ruby
646
- class ExamplesController < ApplicationController
647
- add_breadcrumb :index, :examples_path
648
-
649
- def edit
650
- @example = Example.find params[:id]
651
- add_breadcrumb @example # @example.to_s as name, example_path(@example) as url
652
- add_breadcrumb :edit, edit_example_path(@example)
653
- end
654
- end
655
- ```
656
- All symbolic names translated with I18n. See [I18n Internationalization Support](#i18n-internationalization-support)
657
- section.
658
-
659
- ### Element utility helpers
660
-
661
- Badge:
662
- ```erb
663
- <%= badge(12, :warning) %> <span class="badge badge-warning">12</span>
664
- ```
665
-
666
- Label:
667
- ```erb
668
- <%= tag_label('Good!', :success) %> <span class="label label-success">Good!</span>
669
- ```
670
-
671
- Glyph:
672
- ```erb
673
- <%= glyph(:pencil) %> <i class="icon-pencil"></i>
674
- <%= glyph(:pencil, {tag: :span}) %> <span class="icon-pencil"></span>
675
- <%= glyph(:pencil, {class: 'foo'}) %> <i class="icon-pencil foo"></i>
676
- ```
677
-
678
- ### I18n Internationalization Support
679
- The installer creates an English translation file for you and copies it to config/locales/en.bootstrap.yml
680
-
681
- NOTE: If you are using Devise in your project, you must have a devise locale file
682
- for handling flash messages, even if those messages are blank. See https://github.com/plataformatec/devise/wiki/I18n
683
-
684
- ## Changelog
685
- Please see CHANGELOG.md for more details
686
-
687
- ## Contributors & Patches & Forks
688
- Please see CONTRIBUTERS.md for contributors list
689
-
690
- ## Thanks
691
- Bootstrap and all twitter-bootstrap-rails contributors
692
- http://twbs.github.io/bootstrap
693
197
 
694
198
  ## License
695
- Copyright (c) 2026 (since 2012) by Seyhun Akyürek
696
-
697
- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
698
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
699
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
700
199
 
200
+ MIT