I am trying to make a text like label and select dropdown in the same line.
When I use display: inline
for both div
s it works. But when I use form-control
class in select it breaks. Here is the example
Here is the code
<div class="col-md-2">
<div> <span>test</span></div>
<div>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
I want to make it in same line.
Add display: flex
for container.
.flex {
/* become a flex container */
/* its children will be flex-items */
display: flex;
/* align items on font's baseline */
align-items: baseline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-2 flex">
<div><span>test</span></div>
<div>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
You can use flex
on the container to make it's decendants become flex-items, align-items: center
to center them, and have a margin-right
on the label to have a nice spacing between it and the select
element.
.input-container {
display: flex;
align-items: center;
}
.input-label {
margin-right: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 input-container">
<label class="input-label">test</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With