VSO VSO - 1 year ago 68
HTML Question

"Bootstrap Form Input" Next to a Button?

enter image description here

My end goal is to have a button, and a

dropdown that looks like normal bootstrap input fields to the right of it (so it matches other UI elements on all screen sizes).

class="form-control input-md"

I want to use the above css on the input so it gets the colors, borders, etc of a bootstrap form input. I DO not want it to take up the entire screen width, have large margins, OR drop to the next line. I fixed that partially with:

.my-modified-input {
width: 250px;

However, the input still jumps to the next line. Is there a way to prevent this without using bootstrap grid? I don't want to use grid because the spacing between the button and the select dropdown becomes too wide without making rows within rows with custom columns for each screen size.


You have to use the form-inline class.

<form class="form-inline">
      <div class="form-group">
        <button class="btn btn-primary">
      <div class="form-group">
        <select class="form-control">
          <option value="">here is your select</option>