Can't set text-area to width: 100% using bootstrap

Question

I'm trying to set a textarea in rails to be the width of its container. I've tested that the css is working on the textarea.

Form View:

<%= form_tag("/pages/thank_you") do %>
      <div class="row">
        <div class="col-md-6">
          <div class="input-group">
              <%= text_area_tag :message, nil, class: 'form-control text-area-wide', placeholder: 'Enter Message' %>
          </div>
        </div>
      </div>
      <%= submit_tag 'Send Message', class: 'btn btn-success' %>
  <% end %>

CSS:

.text-area-wide {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
}

Answer 1

In bootstrap you should use the col classes in place of fixed width to keep responsive design change the col to col-md-12

  <div class="row"> <div class="col-md-12"> <div class="input-group"> <%= text_area_tag :message, nil, class: 'form-control text-area-wide', placeholder: 'Enter Message' %> </div> </div> </div> 

Answer 2

The limit on the width of the text area in this case was the .input-group div. Setting the width of that div with css will change the width of the text-area.