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

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') ;   -->

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 17, 2014 at 15:11

Cremz

8388 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related