How can I make a bootstrap input group only on tablet sized devices and above?

Question

I am using bootstrap 3 and am looking to have the following.

Tablet sized devices and above:

|    Input-text-area | button flush against the right edge of the text area    |

Mobile sized devices:

|        Input-text-area        |
|           button here         |

This is quite easy - using this : http://getbootstrap.com/components/#input-groups-buttons Great!

However, I only want this layout when on devices >=768 pixels width ie anything greater than col-xs-12. When on a mobile I want the Button element to drop down onto the next line - center aligned. This is my existing code:

 <form id="signup-form" class="new_invitation" action="/invitations" accept-charset="UTF-8" method="post"> <div style="margin-bottom:0px;" class="col-sm-4 col-sm-offset-3 input-position"> <input class="form-control full-width cinput" placeholder="Enter email address... " id="InputEmail" type="text" name="invitation[recipient_email]"> </div> <div class="col-xs-12 col-sm-2 input-position fixit" style="margin-bottom:0px;"> <input type="submit" name="commit" value="JOIN IN" class="btn btn-default position-mobile cbigbtn" id="gabetabtn"> </div> </form> 

This allows me to have my button on the right of my input text field on devices > XS and on its own centered col-xs-12 on mobile devices.

What CSS magic can I do to have this input text field become an input group which only groups flush to the input box on devices > 768 pixels wide.

Answer 1

I'd try something like this, nesting bootstrap columns:

 <div class="row"> <div class="col-lg-12"> <div class="input-group"> <div class="col-xs-12 col-sm-9" style="padding:0px;"> <input class="form-control full-width cinput" placeholder="Enter email address... " id="InputEmail" type="text" name="invitation[recipient_email]"> </div> <div class="col-xs-12 col-sm-3" style="padding:0px;"> <span class="input-group-btn" style="margin:0 auto;"> <input type="submit" name="commit" value="JOIN IN" class="btn btn-default position-mobile cbigbtn" id="gabetabtn" style="width:100%;"> </span> </div> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> 

Your other option would be to look at media queries and add those to your css document.

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

These are all the rules that you need to change in order to acheive the desired behavior and so the button and input remain aligned under 768px.

 body { padding-top: 50px; } @media (max-width: 767px) { .new_invitation .input-group .form-control, .new_invitation .input-group-btn { display: block; border-radius: 4px; width: 100%; } .new_invitation .input-group-btn .btn { display: block; border-radius: 4px; width: 100%; margin-top: 40px; } .new_invitation .input-group-btn > .btn + .btn { margin-left: 0px; } .new_invitation .input-group-btn:first-child > .btn { margin-right: 0px; } .new_invitation .input-group-btn:last-child > .btn { margin-left: 0px; } .new_invitation .input-group { width: 100%; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-sm-12"> <form id="signup-form" class="new_invitation" action="/invitations" accept-charset="UTF-8" method="post"> <div class="input-group"> <input class="form-control full-width cinput" placeholder="Enter email address..." id="InputEmail" type="text" name="invitation[recipient_email]"> <span class="input-group-btn"> <input type="submit" name="commit" value="JOIN IN" class="btn btn-default position-mobile cbigbtn" id="gabetabtn"> </span> </div> </form> </div> </div> </div>