Bootstrap 3.1.1 wide search panel without input group inside navbar

Question

I have search form in the left corner of navbar with separate button. I don't want join input and button together. But I get very ugly solution.

source (like example from official bootstrap site) enter image description here

<nav class="status-navbar navbar navbar-default" role="navigation">
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
<div class="row">
                <div class="search-panel col-lg-3 col-md-3">
                    <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">                        
                            <input type="text" class="form-control"
                                placeholder="Quick Search">     
                                </div>
                                <button type="button" class="btn btn-primary">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                    </form>                 
                </div>
</div>
</div>

ugly solution

<div class="row">
                <div class="search-panel col-lg-3 col-md-3">
                    <form class="navbar-form navbar-left" role="search" style="     width: 100%;
">
                    <div class="form-group" style="
    width: 88%;
">                      
                            <input type="text" class="form-control" placeholder="Twitter Quick Search" style="
    width: 100%;
">      
                                </div>
                                <button type="button" class="btn btn-primary">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                    </form>

                </div>

Is it possible to get the same result without such terrible mark-up.

Required result

Could you explain better what you seek to achieve? You want the button to be underneath the textbox is that it? — IndieRok, Aug 11 '14 at 16:01
@IndieRok I want that input text takes all space inside form besides place needed for button and small paddings and margins — Ray, Aug 11 '14 at 16:13

score 1 · Answer 1 · edited May 23 '17 at 12:29

EDIT: Ok, I wasn't sure I had undestood thoroughly what you wanted. So here is a new version.

Instead of keeping the bootstrap code by default, I took out some of the default classes and added my own custom classes in order to overwrite everything and customize it according to your design. The input and button always stays side-by-side when you resize and it doesn't seem to cause any problem whatsoever. If you think that the input is a bit too long, just change the column values in the '.search-panel', the col-xs-x col-sm-x col-md-x col-lg-x.

UPDATED EXAMPLE

Here's the updated html:

<div class="row">
    <div class="search-panel col-xs-12 col-sm-5 col-md-5 col-lg-5">
        <form>
            <div class="search-container">                      
              <input type="text" class="form-control myInput" placeholder="Twitter Quick Search">
              <button type="button" class="btn btn-primary myBtn">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </div>
        </form>
    </div>
</div>

Custom css:

.myInput{
  width:80%;
  display:inline-block;
  border-color:#66afe9;
  background:#6c7072;
}

.myInput::-webkit-input-placeholder{
    color:#5c5759;
    font-weight:bold;
}

.search-container{
    background:#13435a;
    padding:5px;
}

.myBtn{
  position:relative;
  top:-1px;
}

Notice this pseudo css element '::-webkit-input-placeholder'. This control the css of the placeholder text which disappear when the input has focus. SOURCE

No, I try to achive the result as on the last picture – Ray Aug 12 '14 at 07:49 — Ray, Aug 12 '14 at 07:49

score 0 · Accepted Answer · answered Aug 12 '14 at 08:13

I think it's not the best desicion but

<div class="row">
                <div class="search-panel col-lg-3 col-md-4">
                    <form class="search-form navbar-form navbar-left" role="search">
                        <div class="form-group col-xs-10 col-sm-10 col-md-10 col-lg-10">
                            <input type="text" class="search-input form-control"
                                placeholder="Twitter Quick Search">
                        </div>
                        <div class="col-xs-2 col-md-2 col-lg-2">
                            <button type="button" class="btn btn-primary">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </div>
                    </form>
                </div>
</div>

.search-form {
    width: 100%;
    padding-right: 0;
}

.search-form .form-group {
    padding: 0;
} 

.search-input {
    width: 100% !important;
}

Bootstrap 3.1.1 wide search panel without input group inside navbar

2 Answers2