RenegadeAndy RenegadeAndy - 3 months ago 10
CSS Question

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

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 i.e 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

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