Searchbar width in navbar bootstrap + offset

Question

I would like to raise the width of my input type text in my boostrap navbar, and keep it responsive, but don't know how to do that . Seem to be completely impossible Here is the sample of the code http://www.bootply.com/klx0LnIMF9

I used to watched this post: Bootstrap 3 - How to maximize input width inside navbar

In fact the code given by Bass Jobsen is the exact same code , somehow it 's workinb for bootstrap 3.0.0 but not for bootstrap 3.2.0

If anyone can help, it could be great,

Thanks in advance

Anselme

score 2 · Accepted Answer · answered Sep 13 '14 at 23:29

well, it's not the same solution you have in that link, just a quick fix I've made for this question and may need a few adjustments to fit your needs, but take a look at your forked example

Only one tiny change in your HTML (that inline style you don't need at all and it's more annoying than useful) and a bit of CSS as follows:

.navbar-form {
    padding:0;
    margin-right: 0px;
    margin-left: 0px;
    display: inline-block;
    width: 50% !important;
    border: 0px none;
}
.form-group {
    width:100%;
}
.input-group-addon:first-child {
    border-right: 0px none;
    width: 30px !important;
}
.navbar-form .input-group {
    vertical-align: middle;
    display: inline-table;
    width: 100%;
}

As you'll probably notice, I just get rid of the float and replace elements properties by inline. Once done, I have the ability to better play with responsive widths. You'll probably notice the !important definitions. You may or may not need them (Bootstrap has a few !important declarations, so be sure to test), but basically I'm applying this to ALL sizes, so you may probably want to change that width: 50% !important; in .navbar-form to width: 100% !important; for 768px and under, but anyways, here you have the tools to play around and adjust as you like

thanks fabio! It really helped me; I used to know a bit of css but when it come to responsive and % in it, i'm just lost... Thanks again — Anselme, Sep 14 '14 at 16:54

Searchbar width in navbar bootstrap + offset

1 Answers1