Twitter Bootstrap Question posted in

how to do this bootstrap search box in center with fully responsive? – Twitter bootstrap

I want to make below search box with select box in center of the page and all the field are stick to each other. I tried using margin-left. But i think this is not proper way to do this. please help me to do this to get all are in center with responsive.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">

</style>
<div class="col-md-12">
  
   <form action="#" method="get" id="search_mini_form">
      <div class="col-md-1 catnames">
         <select name="cat" class=" search-categories">
            <option>Categories</option>
            <option value="3">abcd</option>
            <option value="4">abcd</option>
            <option value="5">abcd</option>
         </select>
     
      </div>
      <div class="col-md-1 catnames catnames-arrow ">
         <select name="cat" class="search-categories search-Hourly">
            <option>Hourly</option>
            <option value="3">abcd</option>
            <option value="4">abcd</option>
            <option value="5">abcd</option>
         </select>
       
      </div>
      <div class="col-md-4 catquery">
   
         <input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off">
      </div>
      <div class="col-md-1 catsubmit">
         <div class="row">
            <i class="fa fa-search"></i>
         </div>
      </div>
      <div id="search_autocomplete" class="search-autocomplete"></div>
   </form>
   <div>
   </div>
</div>
Tags:

4

Answers


  1. 0

    Is this what you want ? 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <style type="text/css">
    
    </style>

    <div class="col-md-12 ">
      <div class="row">
       <form action="#" method="get" id="search_mini_form">
          <div class="col-sm-offset-2 col-sm-2 catnames">
             <select name="cat" class="form-control search-categories">
                <option>Categories</option>
                <option value="3">abcd</option>
                <option value="4">abcd</option>
                <option value="5">abcd</option>
             </select>
          </div>
          <div class="col-sm-2 catnames catnames-arrow ">
             <select name="cat" class="form-control search-categories search-Hourly">
                <option>Hourly</option>
                <option value="3">abcd</option>
                <option value="4">abcd</option>
                <option value="5">abcd</option>
             </select>
          </div>
          <div class="col-sm-4 catquery ">
       <div class="input-group">
             <input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" />
         <div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div>
            </div>
          </div>
          <div id="search_autocomplete" class="search-autocomplete"></div>
       </form>
       </div>
    </div>

    here is jsbin

    Login or Signup to reply.
  2. 0

    You can do by applying some Bootstrap classes 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">

</style>
<div class="col-md-12">
  
   <form action="#" method="get" id="search_mini_form">
      <div class="col-md-1 col-sm-2 form-group col-sm-offset-2 col-md-offset-3 col-xs-12 catnames">
         <select name="cat" class="form-control search-categories">
            <option>Categories</option>
            <option value="3">abcd</option>
            <option value="4">abcd</option>
            <option value="5">abcd</option>
         </select>
     
      </div>
      <div class="col-md-1 col-sm-2 form-group catnames catnames-arrow ">
         <select name="cat" class="form-control search-categories search-Hourly">
            <option>Hourly</option>
            <option value="3">abcd</option>
            <option value="4">abcd</option>
            <option value="5">abcd</option>
         </select>
       
      </div>
      <div class="col-md-4 col-sm-4 form-group col-xs-12 catquery">
			<div class="input-group">
			  <input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" class="form-control" >
				<span class="input-group-btn">
					<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
				 </span>	
			</div>
      </div>
    
      <div id="search_autocomplete" class="search-autocomplete"></div>
   </form>
   <div>
   </div>
</div>
    Login or Signup to reply.
  3. 0

    try to change classes of whole container:

    <div class="col-md-12 ">

    to:

    <div class="col-md-4 col-md-offset-4">

    You can also add styles for every element inside, like this:

    text-align: center;
margin: 0 auto;
    Login or Signup to reply.
  4. 0

    I made a little fiddle to demonstrate how to do this: https://jsfiddle.net/2nhzytu5/

    To make the fields float in the center regardless desktop or mobile version, you can use col-offset-xx (Learn more here)

    Then, to make them stick together, you should use bootstrap’s input-group class. (More info here )

    So this would be your base:

    <form class="form-horizontal">
  <div class="col-lg-offset-3 col-lg-6">
      <div class="input-group">
         <!-- Your fields here -->
      </div>
  </div>
</form>

    Now simply add your fields:

    <form class="form-horizontal">
  <div class="col-lg-offset-3 col-lg-6">
    <div class="input-group">

      <select id="yourId" class="selectpicker form-control" title="Please select">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>

      <select id="yourId2" class="selectpicker form-control" title="Please select">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>

      <input type="text" class="form-control" name="snpid" placeholder="Test">

      <span class="input-group-addon">
          <i class="fa fa-search"></i>
      </span>
    </div>
  </div>
</form>

    Avoid using elements here as they cannot be fully styled in WebKit browsers.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search