I am trying to load the gem from bootstrap and display a navbar on my page but it doesn't seem to work.
gemfile code
source 'https://rubygems.org'
gem 'rails', '4.2.4'
gem 'sqlite3'
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'
gem 'bootstrap-sass'
group :doc do
gem 'sdoc', require: false
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
application.css.scss
#import 'bootstrap';
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Etsydemo</title>
<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'shared/navbar' %>
<div class= "container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
_navbar.html.erb
<nav class="navbar navbar-default navbar-fixed-top">
Toggle navigation
Etsydemo
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Contact</li>
<li>About</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
application.js
//= require jquery_ujs
//= require bootstrap
//= require jquery
//= require turbolinks
//= require_tree .
I think you need to import bootstrap sprockets as well as bootstrap. So the top of your application.scss file should have:
#import 'bootstrap-sprockets';
#import 'bootstrap';
Try reorganizing your application.js (assuming you have the bootstrap.js loaded into the asset pipeline...if you have the minified version it would be bootstrap.min)
//= require jquery_ujs
//= require jquery
//= require turbolinks
//= require bootstrap
//= require_tree .
Related
just getting started with a Rails 5 side project. Having some issues getting an out of the box Navbar showing correctly.
It's all squished up, as per the screenshot attached. Any thoughts?
I've attached the relevant code below.
Thanks in advance!
application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/navigation' %>
<%= yield %>
</br></br>
<%= render 'layouts/footer' %>
</body>
</html>
navigation - Navbar
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap_form'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'devise'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
gem 'sqlite3', '~> 1.3.6'
gem 'byebug', '11.1.3', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console'
gem 'listen', '~> 3.0.5'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
group :production do
gem 'pg', '1.2.3'
end
application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS 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/SCSS
* 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.
*
*/
#import "bootstrap-sprockets";
#import "bootstrap";
In you gem file your have included multiple bootstrap related gem, i.e
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap_form'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
i am not sure if all are needed but to implement bootstrap in rails 5 following this method is sufficient.
This is my rails 5 project's bootstrap setup
in Gemfile
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
some version of bootstrap gave me problem, this works fine for me, please check if its same for you
in application.js include jquery popper and bootstrap on top, like this.
//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
in application.scss
only do
#import "bootstrap";
do rails assets:precompile and restart rails server to be sure.
and the bootstrap should work fine, at least it works for me, and i hope it helps you some.
As indicated in doc Bootstrap Javascript depends on jquery, it's installed via your Gemfile but you should add Bootstrap dependencies and Bootstrap to your application.js:
//= require jquery3
//= require popper
//= require bootstrap
I have implemented bootstrap into my ruby on rails application, in which there is a navbar. When running a server, the navbar, when in a shrunk browser (or on a mobile device), displays a 'hamburger' menu button. The problem is that this button has no action in my application, and does not display the rest of the navbar option.
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.5'
gem "passenger"
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
#gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
#gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'figaro'
#Boostrap web design framework gem
gem 'bootstrap', '~> 4.4.1'
gem 'jquery-rails'
gem 'popper_js'
gem 'sass-rails'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
_navbar.html.erb
<html lang="en">
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="/"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item <%= 'active' if params[:controller] == 'home' %>">
<a class="nav-link" href="/">Home </a>
</li>
<li class="nav-item <%= 'active' if params[:controller] == 'contact' %>">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item <%= 'active' if params[:controller] == 'pricing' %> ">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item <%= 'active' if params[:controller] == 'shop' %> ">
<a class="nav-link">Shop</a>
</li>
</ul>
</div>
</div>
</nav>
application.scss
#import "bootstrap";
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="generator" content="\">
<title></title>
</head>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
index.html.erb
<%= render "layouts/navbar" %>
Not really a rails question, but your html is faulty:
you have data- target in your button. Remove the whitespace.
I started to program with ruby on rails and I tried to import bootstrap to my Ruby On Rails and I tried to insert an navbar to my app and thats the result:
Only text styles work
As you can see only the text style works..
My Gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.2.5'
# Use sqlite3 as the database for Active Record gem 'sqlite3'
# Use SCSS for stylesheets gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.1.0' gem 'coffee-script-source', '~> 1.11', '>= 1.11.1'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api. gem 'sdoc', '~> 0.4.0', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug' end
group :development do # Access an IRB console on exception pages or by using <%= console %> in views gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.6'
end
My application.css.scss:
#import "bootstrap";
#import "bootstrap-sprockets";
My application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
My application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true%>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<%= yield %>
</body>
</html>
Thank you in advance!
Try writing
//= require bootstrap.min
In your application.js
You are using bootstrap-sass, so you need sass-rails gem. From the bootstrap-sass
In your Gemfile you need to add the bootstrap-sass gem, and ensure
that the sass-rails gem is present - it is added to new Rails
applications by default.
That said, add gem sass-rails in your Gemfile, then bundle install and restart the server
Update:
Also, you need to import bootstrap-sprockets before the bootstrap.
#application.css.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
I think it might be the fact that you have the gem 'bootstrap-sass' in the development group. This should go in the root of the Gemfile.
I am trying to learn Rails and during this time I wanted to make my pages a little more stylish. To do so I went ahead and downloaded Bootstrap 4 and followed all the installation instructions I could find. To test it I tried to add a simple navigation bar. The bar loads all the text fine but there is no CSS applied to it :(
All the bootstrap css and js files are in assets/stylesheet and /javascript
At this point I am not too sure what I am doing wrong or what needs to be changed. I am guessing it is something simple.
Gemfile
gem 'rails', '4.2.4'
gem 'execjs'
gem 'sass-rails', '~> 5.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'coffee-script-source', '~> 1.8.0'
gem 'bootstrap', '~> 4.0.0.alpha6'
gem 'jquery-rails'
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', media: 'all', "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Test</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
</html>
This is my
/assets/stylesheets/application.scss
#import "bootstrap";
This is my /assets/javascript/application.js
//= require jquery
//= require bootstrap
//= require bootstrap.js
//= require bootstrap.min.js
//= require jquery-3.1.1.min.js
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Thank you
I Think I found the issue.
I had two sass entries in the gemfile
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.6'
I commented out sass-rails and everything started working.
I am using JQuery-UI to display the datepicker on a simple rails form. In my local development environment it works as expected, but when I deploy to the production environment it will not display.
Gem File includes:
gem 'rails', '4.0.3'
gem 'sass', '~> 3.2.5'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'sass-rails', '4.0.1'
gem 'sprockets', '2.11.0'
em 'jquery-rails', '3.1.0'
gem 'jquery-ui-rails', '5.0.3'
gem 'turbolinks', '1.1.1'
My application.js
//= require jsapi
//= require chartkick
//= require jquery
//= require jquery_ujs
//= require jquery-ui/datepicker
//= require bootstrap-sprockets
//= require holder
//= require jquery.dataTables.min
//= require dataTables.bootstrap
//= require highcharts.js
//= require_tree .
My application.scss
#import "bootstrap-sprockets";
#import "bootstrap";
#import "partials/*";
#import "customer/*";
#import "jquery-ui/datepicker";
The form contains:
<div class="row">
<label class="control-label col-xs-3">Start Date :</label>
<div class="col-xs-2">
<%= f.input :start_date, :as => :datepicker, :label => false %>
</div>
</div>
<div class="row"><label class="control-label col-xs-3">End Date :</label>
<div class="col-xs-2">
<%= f.input :complete_date, :as => :datepicker, :label => false %>
</div>
</div>
I have a dates.js.coffee file as follows:
$ ->
$("input.datepicker").each (i) ->
$(this).datepicker
altFormat: "yy-mm-dd"
dateFormat: "dd/mm/yy"
altField: $(this).next()
Any help would be fantastic...
Thanks to japed for pointing me in the right direction. I was inadvertently loading a JS file (gruntfile.js) via the asset pipeline that was not loading correctly and causing the rest of the JS to not load. I removed this file and all is working as expected.