Twitter Bootstrap Question posted in

Twitter bootstrap – What is the recommended way to handle large textfields using bootstrap

The twitter bootstrap (3 and 4) documentation is pretty clear on how to handle a lot of different form input types. However, it lacks information on the recommended way to have an element for a “large” text input field. For example to type an email or letter in (preferably with a maximum character count).

What is the recommended way to handle this in bootstrap or in “modern” HTML/CSS in general?

Tags:

2

Answers


  1. 0

    Instead of using input field. I would recommend you use textarea

    Example

    <textarea class="form-control">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel tortor ipsum, vel mattis lorem. Integer interdum posuere iaculis. Mauris fringilla congue egestas. Aliquam erat volutpat. Sed rutrum, nibh at lobortis elementum, neque tortor auctor sem, sit amet lacinia odio augue sit amet lacus. Pellentesque facilisis nulla vel dui commodo porttitor. Sed euismod arcu vel tellus faucibus vestibulum. Sed id faucibus enim. Integer lobortis malesuada ultricies.
    </textarea>

    You can use jQuery to resize the textarea while typing.
    jQuery

    $("textarea").height( $("textarea")[0].scrollHeight );

    Css

    textarea {
width: 300px;

    }

    Demo

    Login or Signup to reply.
  2. 0

    I think what you are looking for is the HTML <textarea> element. This can be used with Bootstrap like any other input element. Wrap it in a form-group container and add the class form-control to the textarea itself.

    Example

    Unfortunately, the textarea element does not accept a maxlength argument like input fields. To use a maximum character count to need to handle this with javascript.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search