CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jebathon
Jebathon

Reputation: 4561

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?

Upvotes: 0

Views: 32

Answers (2)

Robert
Robert

Reputation: 6967

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>

Upvotes: 2

Naomi
Naomi

Reputation: 1298

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>

Upvotes: -1

Related Questions