CODEWITHSUNDEEP
formstwitter-bootstrapgrid
cfz
cfz

Reputation: 343

Bootstrap v3 form does not work in 768 size mobile when using col-sm-#

I created a form in Bootstrap v3. Here's a sample code;

<form role="form">
    <div class="form-group col-md-4 col-sm-3">
        <label>Hotel Name</label>
        <input type="text" class="form-control"/>
    </div>
</form>

In large or default sized screen, its size is that of col-md-4, but since in 768 screen if you would not assign a size it will automatically adjust to full width size as that of col-md-12. Now, I wanted to assign a width for my form that's why I add col-sm-3 to my class. The output of it in a 768 screen is that of width col-sm-3 but the problem is I can't seem to input a text in the input text attribute. It seems like it has been disabled or something. What could be the problem to this?

Your help is much appreciated.

Thank you

Upvotes: 1

Views: 132

Answers (1)

Tyler Evans
Tyler Evans

Reputation: 579

I would be careful how you use the col-# classes. The following code will fix your issue.

<form role="form">

     <div class="row">
         <div class="col-md-4 col-sm-3">
             <div class="form-group">
                 <label>Hotel Name</label>
                 <input type="text" class="form-control"/>
             </div>
         </div> 
     </div>

</form>

If you have the row on the outer side of the form, you won't need to include this inside the form either.

Upvotes: 1

Related Questions