CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Sergino
Sergino

Reputation: 10838

How to create responsive input and button using bootstrap

I am trying to create responsive input and button like on that image: enter image description here

Here is the similar question but it is not responsive: google search bar twitter-bootstrap

How to make it responsive?

I am using the latest bootstraper version.

Upvotes: 0

Views: 1972

Answers (2)

MackieeE
MackieeE

Reputation: 11872

With a combination of placing the controls over two rows so they collapse under each other, along with Bootstrap's text-center helper class to centre them (You can also use offset here too)

Lastly Bootstrap's input tags by default stretch to full-width of it's encased column, thus added a custom class to restrict the "search-input" to a user-setting width.

HTML

<style type="text/css">
    .smaller-input {
        width: 80%;
        margin: 0px auto 15px auto;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="form-group">
                <div class="input-group smaller-input">
                  <input type="text" class="form-control" />
                  <span class="input-group-addon">
                      <span class="glyphicon glyphicon-earphone"></span>
                  </span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="form-group">
                <div class="btn btn-default">Google Search</div>
                <div class="btn btn-default">I'm Feeling Lucky</div>
            </div>
        </div>
    </div>
</div>

Result

enter image description here

Demo Fiddle: http://jsfiddle.net/A9C6U/

Upvotes: 1

Fury
Fury

Reputation: 4776

put them in a grid tag will be responsive automatically. 

<div class="row">
        <div class="col-md-6 col-md-offset-3 text-center">
        your html (button/input) here
     </div>
</div>

note: don't assign fix size to your inputs . e.g. width:300px

http://getbootstrap.com/examples/grid/

Upvotes: 0

Related Questions