CODEWITHSUNDEEP
ruby-on-railsbootstrap-modal
Orsay
Orsay

Reputation: 1130

How to use bootstrap modal with rails?

I would like to implement a boostrap modal in my rails application. The button is displaying but when I click on it nothing appears :

/ Trigger the modal with a button
%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button"} Open Modal
/ Modal
#myModal.modal.fade{:role => "dialog"}
  .modal-dialog
    / Modal content
    .modal-content
      .modal-header
        %button.close{"data-dismiss" => "modal", :type => "button"} ×
        %h4.modal-title Modal Header
      .modal-body
        %p Some text in the modal.
      .modal-footer
        %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close

I think I miss something. Those are my gems installed :

source 'https://rubygems.org'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
gem 'haml', '~> 4.0', '>= 4.0.7'
gem 'foundation'
gem 'rails', '4.2.6'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
...

my application layout :

!!!
%html
  %head
    %title HealthyBox
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags

application.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

Upvotes: 0

Views: 2445

Answers (1)

hgsongra
hgsongra

Reputation: 1484

Make sure you followed the below steps

Add below lines to app/assets/stylesheets/application.scss

@import "bootstrap-sprockets"; 
@import "bootstrap";

Note: Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead

And below line to app/assets/javascripts/application.js

//= require bootstrap-sprockets

It will works fine.

Upvotes: 2

Related Questions