CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Stan
Stan

Reputation: 26511

Twitter Bootstrap - input out of bounds when container has padding

My container is span4 and I placed padding/border on it. Everything is fine but inputs are out of bound since they have span4 class as well. I'm providing my HTML, CSS as well as image that displays the problem.

How can I make sure that inputs are maxed out in width but not out of bounds?

<div class="span4 newsletter">
    <h3>Newsletter</h3>
    <input type="text" name="name" placeholder="Name" class="span4" />
    <input type="text" name="surname" placeholder="Surname" class="span4" />
    <input type="text" name="email" placeholder="Email" class="span4" />
    <button type="submit" class="btn btn-inverse pull-right"><i class="icon-envelope icon-white"></i>Subscribe</button>
</div>



.newsletter {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #ccc;
    background-color: white;
}

enter image description here

Upvotes: 1

Views: 570

Answers (1)

Billy Moat
Billy Moat

Reputation: 21050

Try using the class "input-block-level" instead of "span4" on the inputs.

Upvotes: 3

Related Questions