Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Integrate bootstrap-sass in Rails

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 365
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: