### Adding Bootstrap Gem to Gemfile (Ruby) Source: https://github.com/twbs/bootstrap-rubygem/blob/main/README.md This snippet adds the Bootstrap gem to a Ruby on Rails application's Gemfile, specifying version 5.3.3. This is the first step to include Bootstrap assets in the project, requiring a `bundle install` afterwards. ```Ruby gem 'bootstrap', '~> 5.3.3' ``` -------------------------------- ### Precompiling Importmap Assets (Ruby) Source: https://github.com/twbs/bootstrap-rubygem/blob/main/README.md This Ruby snippet, placed in `config/initializers/assets.rb`, adds Bootstrap and Popper.js JavaScript files to the asset precompilation list. This ensures that these assets are compiled and available in production environments when using Importmaps. ```Ruby # config/initializers/assets.rb Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js) ``` -------------------------------- ### Pinning Bootstrap and Popper.js with Importmaps (Ruby) Source: https://github.com/twbs/bootstrap-rubygem/blob/main/README.md This Ruby snippet, used in `config/importmap.rb`, pins Bootstrap and Popper.js for use with Importmaps. It specifies the JavaScript files to be loaded and preloaded, enabling modern JavaScript asset management in Rails. ```Ruby pin "bootstrap", to: "bootstrap.min.js", preload: true pin "@popperjs/core", to: "popper.js", preload: true ``` -------------------------------- ### Importing Bootstrap Styles in SCSS (SCSS) Source: https://github.com/twbs/bootstrap-rubygem/blob/main/README.md This SCSS snippet imports the Bootstrap stylesheet into `app/assets/stylesheets/application.scss`. It's crucial to ensure the file has a `.scss` extension and that custom Bootstrap variables are defined or imported before this line for proper theming. ```SCSS // Custom bootstrap variables must be set or imported *before* bootstrap. @import "bootstrap"; ``` -------------------------------- ### Renaming Application Stylesheet to SCSS (Console) Source: https://github.com/twbs/bootstrap-rubygem/blob/main/README.md This console command renames the default `application.css` file to `application.scss`. This is necessary when migrating a new Rails app to use Sass for Bootstrap, allowing `@import` statements to function correctly instead of `*= require` directives. ```Console $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss ``` -------------------------------- ### Adding jQuery Rails Gem to Gemfile (Ruby) Source: https://github.com/twbs/bootstrap-rubygem/blob/main/README.md This snippet adds the `jquery-rails` gem to the Gemfile for Rails 5.1+ projects. This gem provides jQuery, which is an optional dependency for some Bootstrap JavaScript components like tooltips and popovers. ```Ruby gem 'jquery-rails' ``` -------------------------------- ### Requiring Concatenated Bootstrap with Sprockets (JavaScript) Source: https://github.com/twbs/bootstrap-rubygem/blob/main/README.md This JavaScript snippet, similar to the previous one, uses Sprockets directives to require jQuery, Popper.js, and the concatenated Bootstrap JavaScript file. This alternative offers faster compilation compared to requiring individual components, suitable for production environments. ```JavaScript //= require jquery3 //= require popper //= require bootstrap ``` -------------------------------- ### Requiring Bootstrap with Sprockets (JavaScript) Source: https://github.com/twbs/bootstrap-rubygem/blob/main/README.md This JavaScript snippet, typically found in `app/assets/javascripts/application.js`, uses Sprockets directives to require jQuery, Popper.js, and individual Bootstrap JavaScript components. This approach provides granular control and ease of debugging for Bootstrap's JavaScript functionalities. ```JavaScript //= require jquery3 //= require popper //= require bootstrap-sprockets ``` -------------------------------- ### Importing Custom Bootstrap Components in Sass Source: https://github.com/twbs/bootstrap-rubygem/blob/main/README.md This snippet demonstrates how to import a custom Bootstrap Sass file, `_bootstrap-custom.scss`, into your application. This approach allows developers to selectively include or exclude Bootstrap components by modifying the `_bootstrap-custom.scss` file, providing finer control over the final CSS output and reducing file size. ```scss @import 'bootstrap-custom'; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.