CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Adariel Lzinski
Adariel Lzinski

Reputation: 1121

Bootstrap select box and button horizontal aligning issues

I just want my select box to fill the column and have a button at the end.

Here's what I mean:

enter image description here

I've tried a bunch of ways to do this but heres what I have now:

<div class="col-md-6>
<form class="form-inline">
    <div>
        <select class="form-control" id="select">
             <option selected="true" style="display:none;">Select an Option</option>
             <option>1</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
        </select>
        <span style="float:right"><button type="submit" class="btn btn-default">Okay</button></span></div></form></div>

Upvotes: 0

Views: 1151

Answers (1)

woestijnrog
woestijnrog

Reputation: 1579

Straightforward solution with flex-boxes.

You don't have float your span to right for this solution. 

.form-inline div{display: flex;}
select{flex: 1;}
<div class="col-md-6"> <!-- Make sure to close the class name -->
<form class="form-inline">
<div>
<select class="form-control" id="select">
	 <option selected="true" style="display:none;">Select an Option</option>
	 <option>1</option>
	 <option>2</option>
	 <option>3</option>
	 <option>4</option>
</select>
<span style="float:right"><button type="submit" class="btn btn-default">Okay</button></span></div></form></div>

Upvotes: 3

Related Questions