CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Redmumba
Redmumba

Reputation: 206

How can I shrink the width of a navbar form's input boxes?

I have a form in my navbar that is taking up a lot of space. However, the values for the input are numerical and are relatively small, so the input boxes themselves don't need to be nearly as long as they are.

How do I shrink them?

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand">Brand</a>
    </div>

    <form class="navbar-form navbar-left">
      <div class="form-group">
        <!-- How do I shrink these inputs? -->
        <input class="form-control" placeholder="0123456789" name="value1" type="text">
      </div>
      <div class="form-group">
        <input class="form-control" placeholder="0123456789" name="value2" type="text">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>

http://www.bootply.com/5tTRuXDXwT

Upvotes: 0

Views: 890

Answers (1)

Steven B.
Steven B.

Reputation: 9362

There is not a built-in way to do this in Bootstrap. Check out this thread.

You could always define a CSS rule yourself or change the Bootstrap class. This is the rule you would want to change in bootstrap.css/bootstrap.min.css. This rule specifies the width when your browser is wider than 768px. Changing it here would allow for the media rules for responsiveness on smaller devices to still work.

@media(min-width: 768px){
    .navbar-form .form-control {
        display: inline-block;
        width: auto;    <---- Change this e.g. width: 100px;
        vertical-align: middle;
    }
}

Upvotes: 1

Related Questions