CODEWITHSUNDEEP
twitter-bootstrapresponsive-designbuttongroup
Damian Cardona
Damian Cardona

Reputation: 326

Responsive Bootstrap Input with Left/Right Buttons

<form id="form-search" name="form-search" class="form-inline" action="/">
    <div class="input-group">
        <span class="input-group-btn">
            <button id="gps" type="button" class="btn gps">GPS</button>
        </span>
        <input id="address" name="address" type="text" class="form-control address text-center" placeholder="Enter Address" />
        <span class="input-group-btn">
            <input id="submit" name="submit" type="submit" class="btn submit" value="Search" />
        </div>
    </div>
</form>

Desktop View

Mobile View

I'm ideally wanting the search button (Find My Legislator) on smaller devices to break to a new line instead of causing the view to break since it remains on the same line. And when it does break, I'd want the input field (address) to round off, instead of being flat on the right side, and the search button being rounded on both. I believe it has something to do with groups in Bootstrap, but I can't figure out the proper method.

Upvotes: -1

Views: 1068

Answers (1)

luciocamilo
luciocamilo

Reputation: 80

https://jsfiddle.net/luciocamilo/e712fj68/

<form id="form-search" name="form-search" class="form-inline" action="/">
    <div class="input-group">
        <span class="input-group-btn">
            <button id="gps" type="button" class="btn gps">GPS</button>
        </span>
        <input id="address" name="address" type="text" class="form-control address text-center" placeholder="Enter Address" />
        <span class="input-group-btn">
            <input id="submit" name="submit" type="submit" class="btn submit visible-sm visible-md visible-lg" value="Search" />
        </div>
        <div class="btn btn-danger btn-block hidden-sm hidden-md hidden-lg">Search</div>
    </div>
</form>

You can use the visible and hidden class to do this in your code. All you have to do is put your button default as hidden in xs (hidden-xs) and your 'new button' as visible-xs.

Also you can use the class btn-block to take full width of your button.

Upvotes: 0

Related Questions