CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmedia-queriestwitter-bootstrap-3
redo1134
redo1134

Reputation: 161

Twitter Bootstrap 3.0 - centered search box

I'm working in Bootstrap 3.0 trying to make a Google-style search box that has a "Search Help" link after the Submit button.

My problem: when I go responsive I lose my offset margins and the button wraps to the next line.

<div class="row search">
  <div class="col-md-8 col-md-offset-2">
    <form class="form-inline" role="form">
      <div class="form-group">
        <label class="sr-only" for="">Enter search terms</label>
        <input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
        <input id="cn" name="cn" type="hidden" value="false" />
      </div>
      <button type="submit" id="s" class="btn btn-default">
        <span class="glyphicon glyphicon-search"></span>
      </button>
      <a href="#">Search Help</a>
    </form>
  </div>
</div>

C.f.: http://jsfiddle.net/redo1134/su3eq/2/

Everything's fine at >991px. But at 991 and below I lose the offset.

This is certainly related to the #media (min-width: 992px) media query in bootstrap.css, but I don't know how to keep the offset.

And to make matters worse: when the viewport is <768px the button and the link wrap to the next line.

Again, I'm drawn to bootstrap.css and the min-width: 768px media query, but I don't know how to keep the input, button, and text all together.

Thanks!

Upvotes: 4

Views: 16463

Answers (3)

Christina
Christina

Reputation: 34652

DEMO:http://jsbin.com/IKaKosoX/1/

EDIT: http://jsbin.com/IKaKosoX/1/edit?html,css,output

Remove the row col wrapping the form-inline and replace with this html:

        <!-- Global Search -->

            <form class="form-inline global-search" role="form">
                <div class="form-group">
                    <label class="sr-only" for="">Enter search terms</label>
                    <input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
                    <input id="cn" name="cn" type="hidden" value="false" />
                </div>
                <button type="submit" id="s" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>

                </button> <a href="#">Search Help</a>

            </form>

Remove previous custom css regarding the form and replace with:

/* center search */

   .global-search {
    text-align:center;
    padding:10px;
  }
   .global-search * {
    display:inline-block;
    margin-bottom:0;
  }

   .global-search .form-control {
      width:120px;
  }

   .global-search a {
    display:block;
    padding-top:10px;
  }



@media (min-width:400px){
   .global-search {
    padding: 20px 0;
    text-align:center;
    }

   .global-search .form-control {
    width:300px;
   }

}

Upvotes: 2

Bass Jobsen
Bass Jobsen

Reputation: 49044

<div class="row search">
  <div class="col-sm-8 col-sm-offset-2">
    <form role="form">
            <div class="input-group">
              <input type="text" class="form-control input-sm">
              <span class="input-group-btn">
                <button class="btn btn-default btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
              </span>
                &nbsp;<a href="#">Search Help</a>
            </div>
    </form>
  </div>
</div>

Upvotes: 4

jampafoo
jampafoo

Reputation: 176

So, using Bootstrap will automatically make the spans break to show full widths at a certain breakpoint... it does that for responsiveness! I usually have to create my own styles when i would like something to act as I want it. Which is totally ok!

So, using inline styles just for a quick example, (you can turn them into proper styles for your stylesheet) you can do something like this with your search area... also updated the jsfiddle here 

<!-- Global Search -->
        <div class="row search">
            <div class="col-md-8 col-md-offset-2">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <div style="width:75%; float: left;">
                          <label class="sr-only" for="">Enter search terms</label>
                          <input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
                          <input id="cn" name="cn" type="hidden" value="false" />
                        </div>
                        <div style="width: 25%; float: left; padding-left: 10px; box-sizing: border-box;">    
                          <button type="submit" id="s" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                          </button> 
                          <a href="#">Search Help</a>
                        </div>
                        <div class="clearfix"></div> 
                    </div>
                </form>
            </div>
        </div>

Upvotes: 2

Related Questions