How can I change cols of textarea in twitter-bootstrap

Question

If I change the value of  rows  it works  But it stays at the default cols whatever value I set with   cols      Column width won t change   I viewed the html source and it reflected the change  I wonder that bootstrap s CSS might be the suspect     HTML  there is a  cols   in the final HTML  but column width stays at the default value  which is 30  I can t believe my eyes     lt textarea cols  100  id  comment body  name  comment body   rows  5  gt  lt  textarea gt    Rails    lt    form for   post   post comments build   do  f    gt     lt div class  field  gt       lt i class  icon-user  gt  lt  i gt       lt    f text field  commenter   gt     lt  div gt     lt div class  field  gt       lt i class  icon-comment  gt  lt  i gt       lt    f text area  body   rows   gt  5   cols   gt  100   gt     lt  div gt     lt div class  actions  gt       lt    f submit   gt     lt div gt    lt   end   gt

User · Answer

Another option is to split off the textarea in the Site.css as follows:

/* Set width on the form input elements since they're 100% wide by default */

input,
select {

  max-width: 280px;
}

textarea {

  /*max-width: 280px;*/
  max-width: 500px;
  width: 280px;
  height: 200px;
}

also (in my MVC 5) add ref to textarea:

@Html.TextAreaFor(model => ................... @class = "form-control", @id="textarea"............

It worked for me

User · Answer

I found the following in the site css generated by VS2013     Set width on the form input elements since they re 100  wide by default    input  select  textarea       max-width  280px      To override this behavior in a specific element  add the following      style  max-width  none      For example     lt div class  col-md-6  gt         lt textarea style  max-width  none                    class  form-control                   placeholder  a col-md-6 multiline input box    gt    lt  div gt

User · Answer

This works for me with twitter bootstrap 2 and simple form 2 0 4 Result is a span6 text area in a span9 row      lt div class  row   gt      lt div class  span9  gt        lt    f input  some text   input html   gt    rows   gt  5   placeholder   gt   Enter some text     class   gt   span6    gt      lt  div gt    lt  div gt

User · Answer

Simply add the bootstrap  row-fluid  class to the textarea  It will stretch to 100  width   Update  For bootstrap 3 x use  col-xs-12  class for textarea   Update II  Also if you want to extend the container to full width use  container-fluid class

User · Answer

I don t know if this is the correct way however I did this    lt div class  control-group  gt     lt label class  control-label  for  id1  gt Label  lt  label gt     lt div class  controls  gt       lt textarea id  id1  class  textareawidth  rows  10  name  anyname  gt value lt  textarea gt     lt  div gt   lt  div gt    and put this in my bootstrapcustom css file    media  min-width  768px         textareawidth           width 500px           media  max-width  767px         textareawidth              This way it resizes based on the viewport  Seems to line everything up nicely on a big browser and on a small mobile device

User · Answer

UPDATE  As of Bootstrap 3 0  the input-  classes described below for setting the width of input elements were removed  Instead use the col-  classes to set the width of input elements  Examples are provided in the documentation     In Bootstrap 2 3  you d use the input classes for setting the width    lt textarea class  input-mini  gt  lt  textarea gt   lt textarea class  input-small  gt  lt  textarea gt   lt textarea class  input-medium  gt  lt  textarea gt   lt textarea class  input-large  gt  lt  textarea gt   lt textarea class  input-xlarge  gt  lt  textarea gt   lt textarea class  input-xxlarge  gt  lt  textarea gt    lt textarea class  input-block-level  gt  lt  textarea gt     Do a find for  Control sizing  for examples in the documentation   But for height I think you d still use the rows attribute

User · Answer

The other answers didn t work for me  This did        lt div class  span6  gt         lt h2 gt Document lt  h2 gt           lt  p gt           lt textarea class  field span12  id  textarea  rows  6  placeholder  Enter a short synopsis  gt  lt  textarea gt           lt button class  btn  gt Upload lt  button gt       lt  div gt    Note the span12 in a div with span6

[ruby-on-rails-3] How can I change cols of textarea in twitter-bootstrap?

Examples related to ruby-on-rails-3

Examples related to twitter-bootstrap