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
Related
I included all the files that are needed to run the bootstrap, but the navbar is not working, it looks like normal HTML.
gemfile:
source 'https://rubygems.org'
git_source(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2', '>= 5.2.4.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# 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', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# 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', platforms: [:mri, :mingw, :x64_mingw]
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console', '>= 3.3.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'devise', '~> 4.7', '>= 4.7.1'
gem 'paperclip', '~> 6.1'
gem 'bootstrap-sass', '~> 3.4', '>= 3.4.1'
gem 'jquery-rails', '~> 4.4'
gem 'jquery-turbolinks', '~> 2.1'
gem 'rails-ujs', '~> 0.1.0'
gem 'sassc-rails', '~> 2.1', '>= 2.1.2'
application.js:
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
application.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
This is the header file that I used for Navbar, _header.html.erb:
<nav class="navbar" navbar-default role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"> </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Movies Reviews", root_path, class: "navbar-brand" %>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<% if user_signed_in? %>
<li><%= link_to "New Movie" , new_movie_path, class: "active" %> </li>
<li> <%= link_to "Account", edit_user_registration_path %></li>
<% else %>
<li> <%= link_to "Sign Up", new_user_registration_path, class: "active" %></li>
<li> <%= link_to "Sign In", new_user_session_path, class: "active" %></li>
<% end %>
</ul>
<form class="navbar-form navbar-right">
<div class="form_group">
<input type="text" class="form-control" placeholder="search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
And application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Moviereview</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'layouts/header' %>
<% flash.each do |name, msg|%>
<%= content_tag(:div ,msg, class:"alert alert_info")%>
<% end %>
<%= yield %>
</body>
</html>
I saw the same question and applied all the answers in that but don't get the proper result. Here is the output I am getting:
Did you install bootstrap and its required dependencies with from the terminal?
yarn add bootstrap jquery popper.js
Installing bootstrap in Ruby on Rails 6:
https://getbootstrap.com/
https://github.com/twbs/bootstrap-rubygem
// Gemfile.rb
gem 'bootstrap', '~> 4.4.1'
gem 'jquery-rails'
// Console
bundle install
yarn add bootstrap#4.3.1 jquery popper.js
// application.scss
#import "bootstrap";
// config/webpack/environment.js
const { environment } = require('#rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
// packs/application.js
import "bootstrap"
Source:
https://gist.github.com/yshmarov/758a04798c3400cf125de27659dab43e/#file-gem-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 am fairly new to Rails and Bootstrap. I am struggling to incorporate Bootstrap4 Theme in a Ruby Rails website. All white space with some text is displayed when I try.
I have installed the BS4 bootstrap-rubygem. Infact the application website & all the basic BS Styling works fine with default stuff in place. However I have little luck in incorporation this Bootswatch Flatly Theme as I quite like this styling. On this page for Flatly Bootswatch it gives you 6 files to download i.e bootstrap.min.css, bootstrap.css, variables.less, bootswatch.less, _variables.sass, _bootswatch.sass. I assume I only need the sass files which begins with underscore in filename. So I have put these 2 files in assets/stylesheets folder. There are no js files to download on website so am I ok to assume that I don't need js files for assets/javascripts folder? So I have no js files pasted anywhere.
Here is my setup:
Gemfile:
source 'https://rubygems.org'(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# 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'
# 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', platforms: [:mri, :mingw, :x64_mingw]
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '~> 2.13'
gem 'selenium-webdriver'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
end
group :development do
# Access an IRB console on exception pages or by using <%= 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
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
#Added by me
group :production do
gem 'pg', '~> 0.21.0'
end
# Added by MS
gem 'bootstrap', '~> 4.0.0.beta'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>OmegaBlog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="container-fluid">
<%= render 'layouts/navigation' %>
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</body>
</html>
application.scss (should this be called application.css.scss? and the order of #import items correct?? - I have doubt on this)
#import "bootstrap";
#import "variables";
#import "bootswatch";
application.js (again not confident on order of listed items here!)
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
So the problem is that the Navbar is all white which only some text visible:
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="navbar">Navbar</h1>
</div>
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
</div>
</nav>
</div>
I have searched for basic instructions for detailed BS4 with Rails 5.1 but no luck!!
Those themes are built for the Bootstrap 3.X, though you are using bootstrap', '~> 4.0.0.beta'.
FYI https://github.com/thomaspark/bootswatch/issues/499
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 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 .