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>

Capture.PNG

npm start

See it

Capture.PNG

https://stackoverflow.com/questions/40037657/how-to-include-bootstrap-css-and-js-in-reactjs-app

Advertisements

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

screen-shot-2016-12-04-at-4-08-53-pm

Emit them from your Rails app like this.

SomeController

 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"
  end

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

screen-shot-2016-12-04-at-4-13-29-pm

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

https://agilewarrior.wordpress.com/2014/04/26/how-to-add-a-flash-message-to-your-rails-page/
http://getbootstrap.com/components/#alerts

 

How to use glyphicons in twitter bootstrap

Leave a comment

twitter-bootstrap-glyphicon

As of today glyphicons come in a separate css.

To use do the following.

application.html.erb

<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>

Then drop in a page using:

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

Links that help:
http://getbootstrap.com/components/#glyphicons
http://stackoverflow.com/questions/18205738/how-to-use-glyphicons-in-bootstrap-3-0

How to create a new rails app with twitter bootstrap

1 Comment

fixed

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

https://github.com/seyhunak/twitter-bootstrap-rails

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

no-fluid

Step 4: Make use fluid layout

application.html.erb

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

twitter-bootstrap-fluid

Step 5: Add some twitter bootstrap layout columns

application.html.erb

<body>

<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>
    </div>
  </div>
</div>

</body>

Step 6: Add a navbar (inverse)

application.html.erb

<body>

<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>
      <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>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
...

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

resopnsive-ok

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

need-padding-at-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.

bootstrap_and_override.css.less

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

Your page should now look like this:

fixed

http://getbootstrap.com/components/#navbar-fixed-top

Links that help:
https://github.com/seyhunak/twitter-bootstrap-rails
http://stackoverflow.com/questions/18371318/installing-bootstrap-3-on-rails-app
http://getbootstrap.com/components/#navbar-fixed-top

%d bloggers like this: