CODEWITHSUNDEEP
csstwitter-bootstrap
user3315579
user3315579

Reputation:

Twitter-bootstrap form not getting responsive

I have created this contact but it doesn't seems to be responsive when I change browser size or browse it via my cell. When I open it on my cell or resize my browser window the input area gets too smaller than expected.

My Code:

<div class="container">
        <form class="well span8" action="" method="post">
        <div class="row">
            <div class="col-xs-4">
                <label>Name:</label>
                <input class="form-control" placeholder="Your Name" value="" type="text" name="name" required>

                <label>Email Address</label>
                <input class="form-control" placeholder="Your email address" value="" type="text" name="email" required>

                <label>Subject</label>
                <select class="form-control" id="subject" name="subject">
                    <option selected value="na">
                        Choose One:
                    </option>

                    <option value="query">
                        Query
                    </option>

                    <option value="suggestions">
                        Suggestions
                    </option>

                    <option value="advertise">
                        Advertise
                    </option>
                </select>
            </div>

            <div class="col-xs-5">
                <label>Message</label> 
                <textarea class="form-control" required id="message" name="message" rows="10"></textarea>

        <div style="margin-top:10px" class="form-group">
            <button class="btn btn-primary pull-right" type="submit">Send</button>
            </div>


            </div>
        </div>
    </form>
</div>

Can You Please tell me how to make it responsive.

Upvotes: 0

Views: 213

Answers (2)

Abhineet
Abhineet

Reputation: 632

use bootstraps classes .col-xs- .col-sm- .col-md- and .col-lg- to make it responsive for different devices you can see example here

http://getbootstrap.com/css/#grid-options

i have created a very simple example, i think it will help u.

<div class="container">
<div class="row">
  <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6"><input style="width:100%" type="text"></div>
  <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6"><input style="width:100%" type="text"></div>
  </div>
</div>

Working

http://www.bootply.com/123390

Upvotes: 1

BENARD Patrick
BENARD Patrick

Reputation: 30975

Here is one way ( one in many )

Use col-sm-xx instead of col-xs-xx give a better result

Bootply :http://www.bootply.com/123382

HTML :

<div class="container">
        <form class="well col-sm-8 " action="" method="post">
        <div class="row">
            <div class="col-sm-4">
                <label>Name:</label>
                <input class="form-control" placeholder="Your Name" value="" type="text" name="name" required="">

                <label>Email Address</label>
                <input class="form-control" placeholder="Your email address" value="" type="text" name="email" required="">

                <label>Subject</label>
                <select class="form-control" id="subject" name="subject">
                    <option selected="" value="na">
                        Choose One:
                    </option>

                    <option value="query">
                        Query
                    </option>

                    <option value="suggestions">
                        Suggestions
                    </option>

                    <option value="advertise">
                        Advertise
                    </option>
                </select>
            </div>

            <div class="col-sm-5">
                <label>Message</label> 
                <textarea class="form-control" required="" id="message" name="message" rows="10"></textarea>

        <div style="margin-top:10px" class="form-group">
            <button class="btn btn-primary pull-right" type="submit">Send</button>
            </div>


            </div>
        </div>
    </form>
</div>

UPDATE FATER COMMENT:

Use first col-sm-12 instead col-sm/xs-8 :

Bootply : http://www.bootply.com/123389

Upvotes: 1

Related Questions