How to setup bootstrap reactjs

Leave a comment

Create a new react app

create-react-app setup-bootstrap
cd setup-bootstrap

Install bootstrap

npm install --save bootstrap

Use it

<button type="button" class="btn btn-primary">Primary</button></code>


npm start

See it



How to add a flash message to your Rails Twitter Bootstrap application

Leave a comment

To get these nice Twitter Bootstrap alerts to show up in your Rails application


Emit them from your Rails app like this.


 class SomeController < ApplicationController

  before_action :last_page

  def what_is_automated_testing
    flash[:success] = 'Success'
    flash[:info] = 'Info'
    flash[:warning] = 'Warning'
    flash[:danger] = 'Danger'
    render layout: "static_page_with_sidebar"

Now, if you have Twitter bootstrap correctly configured, you should see this.


If you are wondering why you don’t see this styling with the rest of your application, it’s because Rails by default doesn’t use this hashes (success, info, warning, etc) for it’s messages. It uses ‘notice’ and others instead (though some may overlap) which is defined in the defaul scaffold.scss so beware of that.

Happy styling!

Links that help


How to use glyphicons in twitter bootstrap

Leave a comment


As of today glyphicons come in a separate css.

To use do the following.


  <link href="//" rel="stylesheet">

Then drop in a page using:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star

Links that help:

How to create a new rails app with twitter bootstrap

1 Comment


I find myself doing this a lot lately. Here are some notes to help me do this quickly in the future.

Step 1: Create new rails application

> rails new myApp

Step 2: Install twitter bootstrap

This method installs bootstrap using the Less style sheets.

Add these gems following to your Gemfile

gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

> bundle install
> rails generate bootstrap:install –no-coffeescript

Step 3: Add some scaffolding to test things out

> rails g scaffold Post title:string description:text
> rake db:migrate
> rails g bootstrap:themed Posts (optional)

Start your server and check your progress.

> rails s
> http://localhost:3000/posts


Step 4: Make use fluid layout


<div class="container-fluid">
  <%= yield %>


Step 5: Add some twitter bootstrap layout columns



<div class="container-fluid">
  <div class="row">
    <div class="span9"><%= yield %></div>
    <div class="span3">
      <h2>About Us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


Step 6: Add a navbar (inverse)



<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      <a class="brand" href="#">Some Store</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li><%= link_to "Browse Posts", posts_path %></li>
          <li><%= link_to "Price List" %></li>
          <li><%= link_to "Contact Us" %></li>
          <li><%= link_to "Cart" %></li>

<div class="container-fluid">

Now, when you run this, notice how everything looks good when the collapsed navbar kicks in.


But when you expand the window to full screen the navbar overrides what appears at the top.


To account for this we need to add some padding to the twitter bootstrap non-responsive state. You can do this by adding this body padding between the two import lines below.


@import "twitter/bootstrap/bootstrap";
body { padding-top: 70px; }
@import "twitter/bootstrap/responsive";

Your page should now look like this:


Links that help:

%d bloggers like this: