Button not getting re-sized while using twitter bootstrap with rails

StackOverflow https://stackoverflow.com/questions/21821818

Question

I am using Ruby on Rails version 4 with Twitter bootstrap 2 to make a web application.

I have used button_to to create a button that on clicking takes the user to another page. However,the styling css doesn't get applied on it correctly. The rounded borders are displayed accurately,the text is bold etc. but the button does not automatically resize itself when I resize the browser window.The width of the button remains static.

however, when I replace

<%= button_to 'Start Learning', tut,  :method => :get  ,:class => 'btn btn-default' %>

with

<button class='btn-default'>Start Learning</button>

it is displayed perfectly,the button width gets automatically resized.

Am I using button_to incorrectly ?

Complete content of index.html.erb :

<script>

</script>
<body style="background-color:#DDD4BC">
<h1 align="center" style="background-color:#005B9A"><font color="#fff">Tutorials</font></h1>
<br><br>
<style type="text/css">
    .span4,.span1,.span3,.span5{
        height: 200px;
        border-spacing: 0;
        padding: 5px;
        font-weight:bold;
    background-color: #Fff;
    color: #000;
        text-align: center;
        margin-left: 60px;
        margin-right: 60px;
        margin-bottom: 25px;
        border-radius:25px;
        position:relative;



    }
        .title{
            background-color: #005B9A;
            height: 40px;
            line-height:40px;
            color: #fff;
            font-size: 20px;
            padding: 5px;
            border-top-left-radius: 25px;

            border-top-right-radius: 25px;
            text-transform: uppercase;
            font-weight:bold;
            vertical-align:middle;


        }
                              .btn-default{
                                  position: absolute;

                                  bottom:   5px;
                                  top: 80%;
                                  text-transform: uppercase;
                                  font-weight:bold;
                                  display: block;
                                             width: 98%;
                                  border-bottom-left-radius: 25px;
                                  vertical-align:middle;
                                  border-bottom-right-radius: 25px;
                              }


</style>
<div class="container">
  <div class="row">

    <% @tuts.each do |tut| %>
        <div class="span3">

           <div class="title"><%= tut.title %><br></div>
          <%= tut.tut_desc %>        <br>
          <%= link_to 'Show', tut %>
          <%= link_to 'Edit', edit_tut_path(tut) %>
          <%= link_to 'Destroy', tut, method: :delete, data: { confirm: 'Are you sure?' } %><br>
            <%= button_to 'Start Learning', tut,  :method => :get  ,:class => 'btn btn-default' %>

        </div>
    <% end %>
  </div>
  </div>


<br>

<%= link_to 'New Tut', new_tut_path %>
  </body>
  <!-- background-image:url('/assets/blacktexture.jpg') ;   -->
Was it helpful?

Solution

Because Rails button_to created a form, not a button check out their documentation

You can use the link_to method and specify the class: "btn btn-primary" (this works in bootstrap 3, not sure how it is defined in v2)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top