Twitter Bootstrap Question posted in

Twitter Bootstrap 3 – Set Select Element Width to match its containers width

I have a select box that is too short for my liking. I want it to automatically resize to its containers width (in this case the blue box in col-md-6) below

enter image description here

<div class="col-md-6">
 <select class="input-xlarge">
   <option>...</option>
 </select>
</div>

How can I accomplish this so it fits in the whole blue space?

Tags:

2

Answers


  1. 0

    IF you set the width for the select element to 100% it will cover the whole with of the col-md-6

    select {width: 100%;}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12">
    <div class="col-md-6">
 <select class="input-xlarge">
   <option>...</option>
 </select>
</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Bootstrap has a built-in class for this that works on input and select: .form-control

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12">
			<select class="form-control input-lg">...</select>
		</div>
		
		<div class="col-xs-8">
			<select class="form-control">...</select>
		</div>
		
		<div class="col-xs-5">
			<select class="form-control input-sm">...</select>
		</div>
	</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search