Bootstrap is an open-source web design framework from Twitter.
Bootstrap framework makes it easy for a developer to create a layout for an application. There are predefined CSS classes for creating common components such as widgets, elements, lists, forms etc. The framework also provides Javascript.
bootstrap-sass is a Sass-powered version of Bootstrap 3, that can be integrated with Rails asset pipeline.
In our Gemfile we need to add the bootstrap-sass gem and make sure sass-rails gem should be present. All new Rails applications have sass-rails by default.
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
After that run bundle install and restart your server.
Import Bootstrap styles in app/assets/stylesheets/application.scss. Make sure that the file has .scss or .sass extension.
If you create a new Rails app, it will come with an application.css file. If this file exists, rename it to application.scss. Or can create a new file in app/assets/stylesheets/custom.scss.
@import "bootstrap-sprockets";
@import "bootstrap";
Also, make sure bootstrap-sprockets is imported before bootstrap
After that remove all the *= require_self and *= require_tree . statements from the sass file. So that it can access all the Bootstrap mixins or variables.
After this require Bootstrap Javascripts in app/assets/javascripts/application.js:
//= require jquery
//= require bootstrap-sprockets
By default your layout file(app/views/layouts/application.html.erb) will be having the code below:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
For example, we add some code to this layout file that will use some predefined CSS classes provided by bootstrap.
It will create a navigation bar.
<!DOCTYPE html>
<html>
<head>
<title>Demo</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-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</nav>
<!--<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>-->
<%= yield %>
</body>
</html>
0 Comment(s)