How to create a postfix button in Twitter-bootstrap for rails? - css

Question

I recently switched from Foundation Zurb , to Twitter bootstrap for Rails.
And in Foundation Zurb , the postfix button was already provided within the existing options, which is not the case for twitter-bootstrap-rails.
I tried doing stuff like this
<div class="col-sm-2">
<f.text_area :search, :class => "text_area">
<%= button_tag "name", type: 'button', class: "btn btn-info"%>
</div>
But I could not seem to even go near it.
Can anyone provide some useful method to do this?
Ps : For those of you who do not know what is a postfix button, it is exactly as the button that is in Youtube for instance, Next to the search bar.
Check this link and scroll down to Pre/post fix buttons ,and you'll see what I am talking about.
======================================
A look into my gemfile as requested by #Sadik
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.2'
# Use mysql as the database for Active Record
gem 'mysql2'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use SCSS for stylesheets
gem 'less-rails'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring', group: :development
# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'
# User ActiveModel act_as_list
gem 'acts_as_list', '~> 0.4.0'
# Use unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Use debugger
# gem 'debugger', group: [:development, :test]
#Use ActiveModel geocoded_by :address after_validation :geocode
gem 'geocoder'
#User SCSSS for Stylesheets
gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
===============================================
Update #1 : Solved
Thanks to the answer below, but not really the answer, thanks to the comment that specified that I should update to the right version of twitter-bootstrap.
If you are facing the same problem, Go to your gemfile and write
gem 'twitter-bootstrap-rails', github: 'seyhunak/twitter-bootstrap-rails', branch: 'bootstrap3'
And bundle install and Absolutely then rails g bootstrap:install less to the end of story that you already know.
For further support, check this link

Answer 1

I guess Bootstrap input group addon is what you are looking for change your code to
<div class="col-sm-2 form-group">
<div class="input-group">
<%= f.text_field :search, :class => "form-control" %>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
Here's the jsfiddle: http://jsfiddle.net/monideeps99/2Ag3g/