/ Design with Bootstrap / Integrating Rails with Bootstrap & SASS

Install Bootstrap-Sass Gem

  • Edit Gemfile
    gem 'bootstrap-sass', '~> 3.3.6'
  • Run bundle install
    bundle install
  • Edit application.css
    @import "bootstrap-sprockets";
    @import "bootstrap";
  • Edit application.js
    //= require bootstrap-sprockets
  • Rename application.css to application.scss
  • Implement a basic bootstrap template (click here for more). Edit this on views/layouts/application.html.erb
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="<%= root_url %>">Quickrails</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>
    
    <!-- Only display if it's a hompage -->
    <% if current_page?(root_url) %>
      <div class="jumbotron">
        <div class="container">
          <h1>Welcome to Quickrails!</h1>
          <p>Quickrails is an open source starter kit template for rails application</p>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
        </div>
      </div>
    <% end %>
    
    <div class="container">
      <div class="row">
        <div class="col-md-12">
         <p class="notice"><%= notice %></p>
         <p class="alert"><%= alert %></p>
    
         <%= yield %>          
        </div>
      </div>
    
      <hr>
    
      <footer>
        <p>&copy; <%= Time.now.strftime('%Y') %> Quickrails.</p>
      </footer>
    </div>

No issues for this post.

by ryzalyusoff