Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Bootstrap Textarea

Hi,

Im doing a contact form and when i put textarea, its looks ugly nd i have to customise it so it looks like other input . Is there a special class that does it for me ?

<!-- Contact Me -->
            <div class="object four">
                <div class="row" id="contact">
                    <div class="container">
                        <div class="col-xs-12 col-md-6">
                            <h1>Contact me!</h1>
                            <form>
                              <div class="form-group">
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                              </div>
                              <div class="form-group">
                                <input type="password" class="form-control" id="pwd" placeholder="Password">
                              </div>
                              <div class="form-group">
                              <textarea class="form-group">
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                              </textarea>
                            </form>
                        </div><!-- /contact -->
                        <div class="col-xs-12 cold-md-6">

                        </div><!-- /social -->
                    </div><!-- /cointainer -->
                </div><!-- /contact -->
            </div><!-- /object four -->

This is my code soo far

2 Answers

Kevin Korte
Kevin Korte
28,147 Points
Kevin Korte
Kevin Korte
28,147 Points

You have an input inside of your textarea. That's probably breaking it.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

It doesnt work either way.

Kevin Korte
Kevin Korte
28,147 Points
Kevin Korte
Kevin Korte
28,147 Points

Further inspection I see that you have the wrong class on the text area. Your code has a form-group class, and in the bootstrap docs it should be a form-control class.

Try that and let me know.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

: p that worked perfectly !

Thank you :)

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Acttulay i got a problem, when i start texting, its somewhere in the middle : p nd this is my code for it :p 

<textarea class="form-control" placeholer="Message">
                                      </textarea>
Kevin Korte
Kevin Korte
28,147 Points
Kevin Korte
Kevin Korte
28,147 Points

Okay, so three things to fix here.

  • "placeholder" is misspelled in your textarea element
  • You forgot the closing div on the form-group element that wraps this textareas

And the solution to your problem

  • The whitespace in the text area tags is adding that same whitespace to the textarea input when you put your curser in there. Textareas are whitespace sensitive, so this particular textarea should look like
<div class="form-group">
    <textarea class="form-control" placeholder="Message"></textarea>
</div>
Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

I didnt put any spaces there . : p

But it works now, thank you very much ^^

Kevin Korte
Kevin Korte
28,147 Points
Kevin Korte
Kevin Korte
28,147 Points

Ah that's weird, but that's what was happening, and if it happens again at least you'll know. :) Good luck and keep after it!