mod geek mod geek - 5 months ago 22
CSS Question

Bootstrap responsive grid not working

I am trying to set the textbox on the mobile display using the Bootstrap grid system but all the things are overlapping to each other this is what I am having problem with.
I am trying for many hours any help would be appreciated !

enter image description here

the form button is overlapping. And there is also problem in the right side of the div

This is my code

<form method="POST">
<div class="col-md-12">
<div class="col-md-4 left">
<input type="text" class="one" id="one"/>
<div id="bar">--------</div>
<input type="text" class="two" id="two" /><br/>

</div>
<div class="col-md-4 text-center">
<div class="text-center">+</div>
</div>
<div class="col-md-4 right">
<input type="text" class="three"id="three" />
<div id="bar">-------</div>
<input type="text" class="four"id="four" /><br/>

</div>
</div>
<input type="submit" class="btn" id="btn" name="btn" value="Get Answer"/>
</form>


And the CSS is

.left{
float:left;
background:#147cc4;
}
.right{
float:right;
background:#ffcc00;
}


#plus,#bar{
font-size:20px;
}


.col-centered{
float:none;
margin:0 auto;
}

Answer

I think I get what's going on. Try this. Also no need for your custom css.

<div class="container">

   <form method="post">
       <div class="row">
           <div class="col-xs-4"><input type="text" class="one" id="one" /></div>
           <div class="col-xs-4"></div>
           <div class="col-xs-4"><input type="text" class="three" id="three" /></div>
       </div>
       <div class="row">
           <div class="col-xs-4"><div id="bar">--------</div></div>
           <div class="col-xs-4">+</div>
           <div class="col-xs-4"><div id="bar">--------</div></div>
       </div>
       <div class="row">
           <div class="col-xs-4"><input type="text" class="two" id="two" /></div>
           <div class="col-xs-4"></div>
           <div class="col-xs-4"><input type="text" class="four" id="four" /></div>
       </div>
       <input type="submit" class="btn" id="btn" name="btn" value="Get Answer" />
   </form>

</div>

Made an edit