CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
LJT
LJT

Reputation: 1289

How to resize input/submit box in Bootstrap3

I have a fairly simple large input along with a submit box using the bootstrap3 framework, which is displaying perfectly on desktop/tablet resolutions, but viewed under a mobile viewport the submit button slides under the input box, and it looks rather ugly.

How do I either shrink the input/submit buttons to resize appropriately so they don't tile on top of each other, or alternatively if that's not possible have the submit button center align on mobile screensize only? 

<div class="col-md-8 col-md-offset-4">          
  <div class="input-group input-group-lg">
    <form class="navbar-form navbar-left" role="search" action="../includes/some.php"     method="POST" id="navbar">
      <div class="form-group">
        <input type="text" class="form-control" id="focusedInput" autocomplete="off"  maxlength="17" placeholder="Enter number" name="number">            
      </div>
     <button type="submit" class="btn btn-primary submit-btn" data-toggle="tooltip" data-placement="bottom" title="something">SUBMIT</button>             
   </form>
  </div>
</div>

Fiddle is here - http://jsfiddle.net/uradA/3/

Upvotes: 0

Views: 2883

Answers (2)

Ravinder Gujiri
Ravinder Gujiri

Reputation: 1514

try this

<div class="col-md-8 col-md-offset-4">
<div class="input-group input-group-lg">
    <form class="navbar-form navbar-left" role="search" action="../includes/some.php" method="POST" id="navbar">
        <div class="col-xs-12 col-sm-8 form-group">
            <input type="text" class="form-control" id="focusedInput" style="width:100%" autocomplete="off" maxlength="17" placeholder="Enter number" name="number"/>
        </div>
        <div class="col-xs-12 col-sm-4 form-group">
        <button type="submit" class="btn btn-primary btn-block submit-btn" data-toggle="tooltip" data-placement="bottom" title="something">SUBMIT</button>
        </div>
    </form>
</div>
</div>

Upvotes: 1

Lipis
Lipis

Reputation: 21835

Do something like this as taken from Button addons:

<div class="col-lg-6">
  <div class="input-group">
    <input type="text" class="form-control big">
    <span class="input-group-btn">
      <button class="btn btn-primary big" type="button">Submit</button>
    </span>
  </div>
</div>

Where big is:

.big {
  font-size: 30px;  
  height: 80px;
}

Here is the updated example: jsfiddle.net/uradA

Upvotes: 2

Related Questions