CODEWITHSUNDEEP
csstwitter-bootstrap
Mike Rifgin
Mike Rifgin

Reputation: 10761

Twitter bootstrap form styles not functioning as expected

In the following jsfiddle I've got an inline form with an input and a submit. When I reduce the screen size the input jumps to be 100% width - which is obviously the responsiveness kicking in. Problem is the submit button doesn't get a 100% width applied....which is something I'd expect if bootstrap has applied 100% to the input.

Any ideas why this is?

<form class="form-inline" role="form" style="width: 350px; margin: 0 auto;">
    <div class="form-group" >
     <label for="postcode" class="sr-only">Postcode:</label>
      <input type="text" class="form-control input-lg" id="email" placeholder="Postcode">
   </div>
    <button type="submit" class="btn btn-primary btn-lg">Submit</button>
  </form>

http://jsfiddle.net/orettyqv/

Upvotes: 0

Views: 24

Answers (1)

DavidG
DavidG

Reputation: 119186

Bootstrap doesn't make button elements 100% wide by default at any breakpoint, you have to do it on your own, in this case with a media query. For example:

@media (max-width: 767px) {
    .btn {
        width: 100%; 
    }
}

Example: http://jsfiddle.net/orettyqv/1/

Upvotes: 3

Related Questions