Responsive Bootstrap button with dropdown in input group

Question

I can't find this exact question having been asked anywhere on this site, but apologies if it already has been.

I am designing a site with Bootstrap, and have a search bar inside a .jumbotron that spans all 12 columns. This has a dropdown button attached on the right to specify the type of search the user wants to perform.

The markup looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="col-md-12 col-sm-12 col-xs-12 jumbotron">
	<div class=" col-md-12 col-sm-12 col-xs-12" id="faq_Search">
		<h3>Ask a question</h3>
		<div class="input-group">
			<input type="text" id="faq_SearchBox" placeholder="Search..." class="search form-control"/>
			<div class="input-group-btn input-group-lg input-group-md">
			<button type="button" class="btn btn-danger dropdown-toggle btn-responsive" data-toggle="dropdown" aria-expanded="false">Select Search Type <span class="caret"></span></button>
			<ul class="dropdown-menu dropdown-menu-right" role="menu">
				<li><a href="#">Search Graduate</a></li>
				<li><a href="#">Search Undergraduate</a></li>
			</ul>
		</div>
   </div>
   </div>
</div>

The problem is that when you view the page in the s and xs views, the search button takes up most of the search bar. I want to make the button responsive so that different text is contained within to make it smaller when in those views. Is that possible through just the bootstrap framework. Or is javascript a necessity here?

Thanks

Answer 1

This is possible by enclosing the button text inside an element and hiding/showing at various sizes by using the responsive utility classes. Try this, it applies hiddex-xs and hidden-sm to the normal text and adds another span with hidden-md and hidden-lg to the smaller text span.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="col-md-12 col-sm-12 col-xs-12 jumbotron">
  <div class=" col-md-12 col-sm-12 col-xs-12" id="faq_Search">
    <h3>Ask a question</h3>
    <div class="input-group">
      <input type="text" id="faq_SearchBox" placeholder="Search..." class="search form-control" />
      <div class="input-group-btn input-group-lg input-group-md">

        <button type="button" class="btn btn-danger dropdown-toggle btn-responsive" data-toggle="dropdown" aria-expanded="false">
          <span class="hidden-xs hidden-sm">Select Search Type <span class="caret"></span></span>
          <span class="hidden-md hidden-lg">Smalltext</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#">Search Graduate</a>
          </li>
          <li><a href="#">Search Undergraduate</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>