I have to include Bootstrap DateTimePicker to my university project but I've tried and nothing happened. I used this documentation and did:
added gem 'bootstrap-datetimepicker-rails' to Gemfile and run bundle install
added //= require bootstrap-datetimepicker to application.js
Wiev:
<div id="container">
<center>
<p>
<strong>First name:</strong>
<%= Doctor.find(session[:current_doctor_id2]).first_name%>
</p>
<p>
<strong>Last name:</strong>
<%= Doctor.find(session[:current_doctor_id]).last_name%>
</p>
<p>
<strong>Doctor spec:</strong>
<%= Doctor.find(session[:current_doctor_id]).spec%>
</p>
<input type="text" data-behaviour='datepicker' >
<%= submit_tag "Check", :name => nil %>
</center>
</div>
Now I see only input on my site, there is no calendar button which allow me to choose date and time.
application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-datepicker
//= require_tree .
$(document).on("click","[data-behaviour~=datepicker]",function(){
$(this).datepicker();
});
LayOut(Here was an error ):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<%= favicon_link_tag 'favicon.ico' %>
<title>Student - Zaklad Opieki Zdrowotnej</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<%= stylesheet_link_tag 'application',media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
</head>
<body id="top">
<div class="wrapper">
<!-- ####################################################################################################### -->
<div id="header">
<div class="fl_left">
<h1>ZOZ Student</h1>
<p>Twoja najblizsza i ulubiona przychodnia</p>
<p>Latwe zarzadzanie poprzez Internet!</p>
</div>
<div class="fl_right"><img src="/images/demo/banner.gif" alt="" /></div>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<div id="topbar">
<div class="fl_left">
<p>Adres: Rzeszow, ul. Wincentego Pola 17/1</p>
<p>Tel: +48 175534322 | Mail: kontakt#zoz.pl</p>
</div>
<div id="topnav">
<ul>
<li><%= link_to 'O nas', welcome_index_path %></li>
<li><%= link_to 'Nasze poradnie oraz przychodnie', welcome_index2_path %></li>
<li>Panel zarzadzania dla lekarzy i pracownikow
<ul>
<%= render 'welcome/form' %>
</ul>
</li>
</ul>
</div>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<div id="container">
<%= yield %>
</div>
<!-- ####################################################################################################### -->
<div id="homecontent">
<ul>
<li>
<h2>System zarzadzania juz otwarty</h2>
<img class="imgl" src="/images/demo/x1.gif" alt="" />
<p>Dzieki internetowemu systemowi zarzadzania nasi lekarze w latwy sposob moga kontrolowowac, tworzyc i edytowac rejestracje, wizyty a co za tym idzie pacjenci poinformowani sa o wszystkim na biezaco droga elektroniczna. Ulatwi to z pewnoscia kontakt z pacjentami jak i usprawni funkcjonowanie calego systemu.<p>
</li>
<li>
<h2>Nowo otwarte przychodnie</h2>
<img class="imgl" src="/images/demo/x2.gif" alt="" />
<p>Jest nam bardzo milo poinformowac, ze nasz Zaklad Opieki Zdrowotnej podpisal umowe z trzema nowymi przychodniami. Co za tym idzie pacjenci moga skorzystac u nas z uslug wykwalifikowanych stomatologow, neurologow oraz psychologow.<p>
</li>
<li class="last">
<h2>Liczba pacjentow rosnie!</h2>
<img class="imgl" src="/images/demo/x3.gif" alt="" />
<p>Cieszymy sie, ze z naszych uslug korzysta coraz wiecej pacjentow. Swiadczy to o naszej profesjonalnej kadrze oraz wykwalifikowanych specjalistach. Wciaz staramy sie zwiekszyc zakres naszych uslug aby kazdy znalazl u nas to czego potrzebuje. Wkrotce otwarcie nowych przychodni!</p>
</li>
</ul>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<div id="imageline">
<ul>
<li><img src="/images/demo/1.gif" alt="" /></li>
<li><img src="/images/demo/2.gif" alt="" /></li>
<li><img src="/images/demo/3.gif" alt="" /></li>
<li><img src="/images/demo/4.gif" alt="" /></li>
<li class="last"><img src="/images/demo/5.gif" alt="" /></li>
</ul>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<!-- ####################################################################################################### -->
<div id="copyright">
<p class="fl_left">Copyright © 2014 - L15 Team</p>
<p class="fl_right">Strona przygotowana na potrzeby projektu</p>
<br class="clear" />
</div>
<!-- ####################################################################################################### -->
<br class="clear" />
</div>
</body>
</html>
Lets go through the steps of using bootstrap-datetimepicker-rails
a. Add gem 'bootstrap-datetimepicker-rails' inside your gemfile and then do bundle install.
b. Add this line to app/assets/stylesheets/application.css.scss
#import 'bootstrap';
#import 'bootstrap-datetimepicker';
c. Add this line to app/assets/javascripts/application.js
//= require bootstrap-datetimepicker
d. How to use it inside your form or wherever you want to use:
Add an input field to show your calendar like:
<input type="text" data-behaviour='datepicker' >
and then call js on this input field by:
Add this code at the bottom of your application.js
$(document).on("click","[data-behaviour~=datepicker]",function(){
$(this).datetimepicker();
});
Edit
As per discussion you have not included javascript tag inside your layout file. You need to solve it by adding
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
b. Add this line to app/assets/stylesheets/application.css.sass
...
*= require bootstrap-datetimepicker
*= require_tree .
and at the bottom of this
#import "bootstrap-sprockets"
#import "bootstrap"
Related
I am newbie with Rails and here is my problem
I created a rails program by this command
rails new freelancer -d=postgresql --javascript=webpack
And I had no problem
I wanted to use bulma extension in my rails program and I added these line to the gemfile
gem 'bulma-rails', '~> 0.9.4'
gem 'bulma-extensions-rails', '~> 1.0.30'
and these lines to the app -> assets -> stylesheets -> application.css
#import 'bulma';
#import 'bulma-extensions';
then I ran these commands
bundle install;
yarn add jquery;
and I had no error.
I created a rails page by this command
rails g controller pages home
and add the bulma code to the app -> views -> layouts -> application.html.erb file
Here is my application.html.erb file
<!DOCTYPE html>
<html>
<head>
<title>Freelancer</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<%= yield %>
</body>
</html>
I thought that my home page must be the design as here
https://bulma.io/documentation/components/navbar/
, but it liked this
my problem
I did not know why it became like this ? Could you please give me some advice for my problem ? Here is my code, if you need for reference
https://github.com/nguyencuc2586/freelancer01
Thank you in advance!
I cloned your repo locally and it seems that you're using SASS directives while the app is configured for CSS only.
I fixed the issue by replacing application.css content with:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*= require bulma
*= require bulma-extensions
*/
Here is the result:
I have a ruby on rails application which I am building using bootstrap which looks great when running locally:
I commit my code to master branch on git and then push to my heroku master. When I visit my heroku URL I get this page :
https://whats-on-today.herokuapp.com/
Not so great. I can see there are some 404 errors:
HTTP 404 - GET https://whats-on-today.herokuapp.com/assets/application-96ded6f70c682e6f9f3a1ae3eb283ae0.js
whats-on-today.herokuapp.com/:16
HTTP 404 - GET https://whats-on-today.herokuapp.com/assets/application-2b56caae7bd0b485593c1fca2397cc26.css
I have no idea what these css files are and why they exist. My application layout code looks like this :
<!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">
<title><%= content_for?(:title) ? yield(:title) : "DemoApp" %></title>
<%= csrf_meta_tags %>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<!-- For third-generation iPad with high-resolution Retina display: -->
<!-- Size should be 144 x 144 pixels -->
<%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
<!-- For iPhone with high-resolution Retina display: -->
<!-- Size should be 114 x 114 pixels -->
<%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
<!-- For first- and second-generation iPad: -->
<!-- Size should be 72 x 72 pixels -->
<%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<!-- Size should be 57 x 57 pixels -->
<%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
<!-- For all other devices -->
<!-- Size should be 32 x 32 pixels -->
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
<%= javascript_include_tag "application" %>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">DemoApp</a>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "Link1", "/path1" %></li>
<li><%= link_to "Link2", "/path2" %></li>
<li><%= link_to "Link3", "/path3" %></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-9">
<%= bootstrap_flash %>
<%= yield %>
</div>
<div class="col-lg-3">
<div class="well sidebar-nav">
<h3>Sidebar</h3>
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li><%= link_to "Link1", "/path1" %></li>
<li><%= link_to "Link2", "/path2" %></li>
<li><%= link_to "Link3", "/path3" %></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div><!--/row-->
<footer>
<p>© Company 2014</p>
</footer>
</div> <!-- /container -->
</body>
</html>
Can anybody explain why the code when deployed to heroku looks like this :
Use a gem for rails 4 on production
gem 'rails_serve_static_assets', group: :production
or use a rails_12factor gem (This gem adds two other gems rails_serve_static_assets and rails_stdout_logging)
gem 'rails_12factor', group: :production
When i try to run the sample Starter template from the Twitter Bootstrap 2.3.2 get started page and i try to collapse the page to smaller size the navbar items don't collapse into the corner like they should in the demo but stay as pulled down pulldown.
i am using Rails with
gem 'bootstrap-sass' and
gem 'sass-rails', '~> 3.2.3' [in assets]
my application.js file includes:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
and my boostrap_and_overides.css.scss file includes:
#import "bootstrap";
body { padding-top: 60px; }
#import "bootstrap-responsive";
i love the idea of responsive bootstrap but cant get it to work
here is the main code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<h1>Hello, world!</h1
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</body>
</html>
I figured out what the problem was. For the record, i was using the gem 'rails', '3.2.7' and when i updated to gem 'rails', '3.2.13' the problem was resolved.
I am sure this is something really silly, regarding where to put the files, but here goes:
I am trying Foundation 4 using the gem (zurb-foundation), rails 3, ruby 1.9.3 and I am trying to get the joyride feature to work.
Here is what I have so far:
<body>
<h1>Listing products</h1>
<div id="firstStop" class="panel">Some awesome part of your site!</div>
<table>
<tr>
<th> <h2 id="numero1" class="so-awesome">Name</h2></th>
<th><h3 id="numero2">Price</h3></th>
<th></th>
<th></th>
<th></th>
</tr>
<% #products.each do |product| %>
<tr>
<td><%= product.name %></td>
<td><%= product.price %></td>
<td><%= link_to 'Show', product %></td>
<td><%= link_to 'Edit', edit_product_path(product) %></td>
<td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</table>
<br />
<%= link_to 'New Product', new_product_path, class: "button radius" %>
<ol class="list_index_tour" data-joyride>
<li data-id="firstStop" data-text="Next">
<p>Hello and welcome to the Joyride documentation page.</p>
</li>
<li data-id="numero1" data-class="custom so-awesome" data-text="Next">
<h4>Stop #1</h4>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
<h4>Stop #2</h4>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="Next">
<h4>Stop #4</h4>
<p>It works as a modal too!</p>
</li>
</ol>
<script>
$(window).load(function() {
$("#list_index_tour").joyride({
});
});
</script>
On my application.html.erb:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Uncomment to make IE8 render like IE7 -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> -->
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/custom.modernizr" %>
<%= csrf_meta_tags %>
<!-- /* Attach the Joyride CSS file */ -->
<link rel=" stylesheet" type="text/css" href="jquery.joyride-2.0.css">
<!--/* jQuery needs to be attached */ -->
<script src="jquery-1.8.3.min.js"></script>
<!--/* Then attach the Joyride plugin */ -->
<script src="jquery.joyride-2.0.3.js"></script>
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><%= link_to "Awesome Store", products_path %></a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li><%= link_to "Browse Products", products_path %></li>
<li class="divider"></li>
<li><%= link_to "Price List" %></li>
<li class="divider"></li>
<li><%= link_to "Contact Us" %></li>
<li class="divider"></li>
<li><%= link_to "Cart" %></li>
</ul>
</div>
</nav>
<div class="row">
<div class="small-8 columns"><%= yield %></div>
<div class="small-4 columns">
<h2 class="subheader">About Us</h2>
yatta yatta yatta
</div>
</div>
<%= javascript_include_tag "application" %>
</body>
</html>
And on my application.js
//= require jquery
//= require jquery_ujs
//= require foundation
//= require jquery.joyride-2.0.3
//= require modernizr.mq
//= require jquery.cookie
//= require_tree .
$(function(){ $(document).foundation(); });
Application.css
*= require_self
*= require foundation_and_overrides
*= require joyride-2.0.3
*= require_tree .
*/
I placed the files jquery.joyride-2.0.3.js, modernizr, and so on under the directory app/assets/javascripts/
All I get is a sad looking list :-(
I did try to follow the suggestions from this question here, but to no avail.
Help?
Samantha,
The first issue with your code is that your jQuery selector is using the # symbol, which means it's looking for a DOM element with that ID. However, your HTML markup of the <ol> for the tour doesn't have an ID specified, only a class.
So, the first fix for you would be to simply update your <ol>
FROM:
<ol class="list_index_tour" data-joyride>
TO:
<ol id="list_index_tour" data-joyride>
However, I ran into a similar issue even when my selector was right and figured it out - see more below. Sadly Zurb's own instructions for setup are misleading. They say you can use whatever ID you want for your <ol> list that holds the steps of your guided tour, but you actually can't out of the box.
Zurb's code for joyride is dependent upon a specific ID between the CSS/Javascript. This ID and the relevant code is located within the included joyride.css file. The ID used there is "joyRideTipContent." I've pasted the relevant couple lines of code from the joyride.css file (they're near the very top):
#joyRideTipContent { display: none; }
.joyRideTipContent { display: none; }
If you would prefer to use a different ID, simply change the above code in the css file as follows and then it will work (I've included the name from your code snippet above):
#list_index_tour{ display: none; }
.list_index_tour{ display: none; }
Alternatively, you could just change the ID and selector of your <ol> to be joyRideTipContent and it would work right out of the box.
Lastly, your code references are fine for Rails for including the relevant Javascript and CSS files. You may have been trying to cover all your bases when the plugin wasn't working. However, your code isn't DRY in that it's duplicitous to use Sprockets to the joyride js and css files and ALSO to have JS and CSS stylesheet tags in your application.html.erb.
Outside of sheer duplication, this approach can cause problems over time as you maintain your app when you change out files and forget to update it in both places. It also can cause conflicts depending on the ordering of your includes.
Because Rails Sprockets and the Asset Pipeline are very powerful included tools of the framework, I'd recommend just sticking with that and removing the duplicate references from your application.html.erb.
So for the duplicate tags aspect...Keep these:
Application.js
//= require jquery.joyride-2.0.3
Application.css
*= require joyride-2.0.3
And Remove the references from here:
Application.html.erb
I just started ruby on rails a few weeks ago, I'm currently building a blog using rails composer ( which uses twitter-bootstrap-rails gem ). I want to add the bootstrap carousel to my application view ( ie to my application.html.erb)
I already tried to add the classic html code from the twitter bootstrap documentation but I just get the right and left controller buttons with no pictures displayed.
Does somebody have the solution for me ?
PS : I currently use Sass for my bootstrap design.
EDIT 02-11-2013 => Here's my code hope you can find what my mistake is
<div class="container">
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<a><img src="assets/images/1.jpg" alt="Antennae Galaxies" /></a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a><img src="assets/images/2.jpg" alt="Carina Caterpillar" /></a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p>Hubblesite.org »</p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
<script>
$(function(){
$('#this-carousel-id').carousel();
});
</script>
</body>
</html>
EDIT 2 : And this is how it looks like on Chrome : http://s7.postimage.org/kvp5cq4tn/Capture_d_cran_11_02_13_18_46_2.png
instead of
img src="assets/images/1.jpg" alt="Antennae Galaxies",
Use the following image tag for rails:
link_to image_tag("1.jpg", :alt => "Slide1"), {:class => "img-responsive", :alt => "Responsive image"}
and there is no need to specify "assets/images" for showing the image folder. the 1.jpg is enough!
Does your app/assets/javascripts/application.js contain a reference to bootstrap?
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
My carousel as a reference:
<div class="span8 welcome-image">
<div id="myCarousel"
class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/pictures/1.png">
</div>
<div class="item">
<img src="/pictures/2.png">
</div>
<div class="item">
<img src="/pictures/3.png">
</div>
<div class="item">
<img src="/pictures/4.png">
</div>
<div class="item">
<img src="/pictures/WordcloudInsight.png">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Bootstrap Carousel in Rails suddenly stopped working
check above link, also did you add this + is jquery loading
<script>
$(function(){
$('#myCarousel').carousel();
});
</script>