Bootstrap 3 align button next to dropdown list

I have the following code, how do I align the button on the right side of the dropdown list?
The code is in a Ajax.BeginForm with a html attribute of role = "form".  There are other columns in this row, and I want the label placed on top of the dropdownlist.

<div class="container-fluid">
 <div class="row">
 <div class='col-md-3'>
            @Html.LabelFor(m => m.HospitalID)
            @Html.HospitalComboBoxFor(m => m.HospitalID, "HospitalID", Model.RotationPhysicianID)
            @(Html.Kendo().Button().Name("addHospitalButton").Icon("plus").HtmlAttributes(new { type = "button" }))
        </div>
</div>
</div>

Open in new window

LVL 2
michael1174Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Can you post your rendered code (view source - copy & paste)
0
michael1174Author Commented:
<div class="container-fluid">
 <div class="row">
 <div class='col-md-3'>
            @Html.LabelFor(m => m.HospitalID)
            @Html.HospitalComboBoxFor(m => m.HospitalID, "HospitalID", Model.RotationPhysicianID)
            @(Html.Kendo().Button().Name("addHospitalButton").Icon("plus").HtmlAttributes(new { type = "button" }))
        </div>
</div>
</div>
 

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You just posted the same thing over again.  What matters in this case is the front end.  Let me guess at your rendered code http://jsbin.com/hoyok/1/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
 <div class="row">
   <div class="col-md-3">
     <label for="HospitalID">Hospital id</lable>
     <select id="HospitalID">
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
    </select>
    <button type="button" name="addHospitalButton">Refresh</button>      
   </div>
 </div>
</div>
 
</body>
</html>

Open in new window

In that format, the button is to the right.

You are mixing up bootstrap classes. <div class="container-fluid"> is from version 2 and   <div class='col-md-3'> is from version 3.

If I change the top div's class to just "container" and for fun fill in the rest of the page with a div class col-md-9, you end up with http://jsbin.com/hoyok/2/

Notice as you slide the browser narrow to wide the button wraps below the select only between the ranges of 992px and 1200px wide.  This is because you have set the width only for the "medium" sized screen and there is not enough room.

Now in this version,http://jsbin.com/hoyok/3/ I have change the class to <div class="col-xs-12 col-sm-4"> and <div class="col-xs-12 col-sm-8 col">stuff</div>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
 <div class="row">
   <div class="col-xs-12 col-sm-4">
     <label for="HospitalID">Hospital id</lable>
     <select id="HospitalID">
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
    </select>
    <button type="button" name="addHospitalButton">Refresh</button>      
   </div>
   <div class="col-xs-12 col-sm-8 col">stuff</div>
   
 </div>
</div>
 
</body>
</html>

Open in new window

In the extra small screen we are forcing everything to it's own row by giving it a width of the maximum 12.  Otherwise, by changing your column from a "3" to a "4" and starting it with the small, the controls will have enough space and will not wrap.

If you need more detailed help, please post a link to your sample page so we may see everything that is affecting this column. If you don't have a way to post a link to your sample, then please recreate your sample output by editing the jsbin file http://jsbin.com/hoyok/3/edit?html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

michael1174Author Commented:
Thanks, I tried modifying the jsbin but it wouldn't save for me.  I tried to save as template and it wouldn't update

You pointed me in the right direction, thanks... here is what I came up with:

<div class="container-fluid">
 <div class="row">
   <div class="col-md-4">
     <label for="HospitalID">Hospital id</lable>
     <div class="form-inline">
       <div class="form-group">
         <select id="HospitalID">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </select>
       </div>
       <div class="form-group">
         <button type="button" name="addHospitalButton">Refresh</button> 
       </div>
     </div> 
   </div>
   <div class="col-md-8">stuff</div> 
 </div>
</div>

Open in new window

0
michael1174Author Commented:
Thanks for the detailed response
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
In jsbin, it saves automatically.  Or you can click on the 'jsbin' top left > Create Milestone.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.