Twitter Bootstrap Question posted in

Twitter bootstrap – Incrase bootstrap navbar input field width

I’ve a twitter bootstrap 3 navbar with a input field. I want to increase the width of the input field. I’ve tried setting the col size but it doesn’t work.

The html is quite long so please refer to the bootply.

http://www.bootply.com/LztVsLEz30

Tags:

4

Answers


  1. 0

    If you inspect element then you will find “.navbar-form” and “.form-control” has width as auto.

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

    So to increase the width of your input you need to override its width as:

       <input type="text" class="form-control search-input" style="width:400px;" name="query" id="query" placeholder="prof or mod name or mod code">

    or separately as

    @media (min-width: 768px)
.navbar-form .form-control {    
    width: 400px;    
}
    Login or Signup to reply.
  2. 0

    You can use the pixel value to increase the width of the text field.

    <input type="text" class="form-control search-input" name="query" id="query" placeholder="prof or mod name or mod code" style="500px;">

    And use the percentage value for the responsive mode.

    @media (min-width: 768px){
.navbar-form .form-control { 
    width: 100%; 
}}
    Login or Signup to reply.
  3. 0

    Here you go I have updated your link and this is new with width 400px;. Let me know if you didn’t understand it

    Login or Signup to reply.
  4. 0

    HTML

    <div class="form-group" id="remote-prof">
  <input type="text" class="form-control search-input" name="query" id="query" placeholder="prof or mod name or mod code">
</div>

    CSS

    div.form-group {
  width: 225px;
}
div.form-group input.form-control {
  width: 220px;
}

    jsfiddle-link

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search