How to display bootstrap selectpicker in center not text?

Question

I am using bootstrap selectpicker.I have to display selectpicker select drop down in center of the popup but I don't want to center the text inside the select drop down.I am able to display the button but not select drop down.Would you help me in this?

/*end menu*/
.login-section{
background-color: #fff; 
  border-radius: 04px;
  padding: 10px 20px;
   height: 290px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
 -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow:         1px 1px 22px 0px rgba(50, 50, 50, 0.25);  
}

  select
{
  margin: 0 auto;
  display: block;
}
input[type="submit"], select{
  display: block;
  padding: 07px 02px;
  margin: 07px auto;
  border-radius: 04px;
  width: 250px;

}

input[type="submit"]
{
  background-color: #773F9B;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size:18px;
border-radius: 04px;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>


<div class="login-section">
   <select class="selectpicker"  data-live-search="true" name="test1" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
<select  name="test2">
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>

      <select class="selectpicker"  data-live-search="true" name="test3" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
      <input type="submit" name="submit" value="Submit">
</div>

score 1 · Accepted Answer · answered Dec 30 '16 at 15:14

Added padding: 10px 20px; and removed width: 295px in your .login-section;

Try this.

/*end menu*/
.login-section{
  padding: 10px 20px;
background-color: #fff; 
  border-radius: 04px;
   height: 290px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
 -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow:         1px 1px 22px 0px rgba(50, 50, 50, 0.25);  
}

select
{
  margin: 0 auto;
  display: block;
}
input[type="submit"], select{
  display: block;
  padding: 07px 02px;
  margin: 7px auto;
  border-radius: 04px;
  width: 250px;

}

input[type="submit"]
{
  background-color: #773F9B;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size:18px;
border-radius: 04px;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="login-section">
   <select class="selectpicker"  data-live-search="true" name="test1" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
<select  name="test2">
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>

      <select class="selectpicker"  data-live-search="true" name="test3" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
      <input type="submit" name="submit" value="Submit">
</div>

Thanks for reply Mr.Jyothi, Working for me but if I am adding drop down showing different — Naren Verma, Dec 30 '16 at 15:33
But it's working fine for the same `src` of bootstrap as in example snippet. Can you reproduce the same here? — Jyothi Babu Araja, Dec 30 '16 at 15:39
Second drop down is display proper because of i haven't added class selectpicker — Naren Verma, Dec 30 '16 at 15:49

score 0 · Answer 2 · answered Dec 30 '16 at 15:17

Put the selects inside a <div> and center it with css: - fixed size - left and right margins auto

/*end menu*/
.login-section{
background-color: #fff; 
  border-radius: 04px;
  width: 295px;
   height: 290px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
 -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow:         1px 1px 22px 0px rgba(50, 50, 50, 0.25);  
}

select
{
  margin: 10px;
}
input[type="submit"], select{
  display: block;
  padding: 07px 02px;
  margin: 07px auto;
  border-radius: 04px;
  width: 250px;

}

input[type="submit"]
{
  background-color: #773F9B;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size:18px;
border-radius: 04px;
}
#select-cont {
   width:250px;
   margin-left:auto;
   margin-right:auto;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="login-section">
   <div id="select-cont">
       <select class="selectpicker"  data-live-search="true" name="test1" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
<select  name="test2">
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>

      <select class="selectpicker"  data-live-search="true" name="test3" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
      <input type="submit" name="submit" value="Submit">
  </div>
</div>

score -1 · Answer 3 · answered Dec 30 '16 at 15:10

-1

Try:

select
{
  margin: 10px auto;
}

answered Dec 30 '16 at 15:10

Roy Bogado

4,299
1
15
31

Thanks for reply Mr.Roy, I tried that also but Still same issue – Naren Verma Dec 30 '16 at 15:12
1

@PeterHall A code-only answer might not be a good one, but it's still an answer. I would recommend you this post about the LQPRQ: [You're doing it wrong: A plea for sanity in the Low Quality Posts queue](http://meta.stackoverflow.com/questions/287563/youre-doing-it-wrong-a-plea-for-sanity-in-the-low-quality-posts-queue) – FelixSFD Dec 30 '16 at 15:46
@FelixSFD This answer will only fix the issue for the user who posted the question, and overlaps with other answers. A good answer would explain _why_ this works, so that other users can find it and benefit too. However, I've read the post you linked to, and I agree with you. I's a UX problem with the review queue because no one wants to click "Looks OK" when they don't think the post is OK. – Peter Hall Dec 30 '16 at 16:03

How to display bootstrap selectpicker in center not text?

3 Answers3