bootstrap textbox going out from span

1.3k Views Asked by At

I am using bootstrap for the website . I am facing one strange problem the textbox is coming out from the span i defined .

Here is the code Sign up When i remove the span6 from this line the textbox comes inside the div .

enter image description here

1

There are 1 best solutions below

0
On

Here is a fiddle of the clean code running in bootstrap... you can see the issue is gone, now it's a matter of just seeing how you want it to look to help you modify the code to reach that aspect with proper bootstrap usage.

The Fiddle

I can see that you are not using bootstrap properly with it's 12 grid column system. Maybe you need to add a picture of your end view so we get a better idea on how to help you.

You care using input type="textbox" which isn't really valid. I think you are looking for input type="text"

Controlling the width of those text boxes is pretty simple by using .span# (in # goes your span number) you can set the text inputs to be span12 and it would make them the full width of their parent container.

Here is your code cleaned up a bit

<div class="row-fluid">
  <div class="span12">
    <div class="span4">
      <input type="text"/>
    </div>
    <div class="span4">
      <input type="text"/>
    </div>
    <div class="span4">
      <button id="signup">Sign up</button>
    </div>
  </div>
</div>

Please also notice that your button and everything was collapsing into eachother because your numbers for the spans were not adding up properly. Having your submit button in a span1 was just too small to contain the button.

Ultimately the answer to this will be based on exactly how you want this area to look, while also considering that on smaller screen sizes things will stack and be a bit different.

I will update my answer when you update your question to show us exactly the effect you are looking for.