28

I have a <select> and a button next to each other and wanted to style them with bootstrap. Select without class looks like this:

enter image description here

select with class="form-control" looks like this: enter image description here

Notice, that the button is now under select. I'm not sure, which CSS property is responsible for this. What should I change, to have button next to the select?

1
  • There is a better answer of the accepted one (the mine), can you please consider for the other users, that it would be a better solution and accept it instead of mine ? Thanks Commented Aug 28, 2019 at 17:36

6 Answers 6

43

You can wrap the <select> and the <button> in an input-group:

<div class="input-group">
  <select class="form-control">
    <option>Select option..</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>            
  <span class="input-group-btn">
    <button class="btn btn-default" type="button" tabindex="-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
  </span>
</div>

This way you can use a normal form and just group one select and button together.

Check out the JSFiddle example

4
  • 1
    The best choice if you have another inputs in addition to a select in your form.
    – UpVs
    Commented Aug 11, 2015 at 12:37
  • 2
    Just as a heads up, the official Bootstrap notes that one should avoid using <select> elements in an input-group as they cannot be fully styled in WebKit browsers (e.g. Safari and Chrome). This can be easily seen by looking at the jsfiddle that is linked here in Chrome. The button does not quite fit next to the select as it still has curved edges. I do not currently know of a solution to this issue.
    – jszaday
    Commented Jan 23, 2016 at 22:19
  • 1
    @Wingpad, Just thought it useful to others to mention that, as of today, this input-group appears good in chrome. Commented Mar 22, 2018 at 21:56
  • This is the best solution. thanks.
    – Danielle
    Commented Mar 30, 2022 at 4:51
14

Following Boostrap syntax :

You should add form-inline class to your form, see the official doc

Official example

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
1
  • The problem with form-inline is that it's a form style, i.e. your form is either inline or it is not. Meaning, you can't fix inline with none inline elements. They are trying to address this in Bootstrap 4 though: github.com/twbs/bootstrap/issues/21581
    – Luke
    Commented Jan 11, 2017 at 21:54
10

Another approach is to wrap the controls in a flex div:

<div style="display: flex;">
  <select class="form-control">...</select>
  <!-- optional spacer: <div style="width: 8px;" /> -->
  <button type="button" class="btn btn-default">Click Me!</button>
</div>
1
  • Thank you. perfectly suited my requirement. Commented Nov 22, 2018 at 15:03
5

Bootstrap 4

Use helper classes! d-flex will do just fine.

body {

  padding-top: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-12">

      <!-- Wrap your 2 elements in a d-flex -->

      <div class="d-flex">
        <select class="form-control mr-2">
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
        <input type="button" class="btn btn-secondary" value="Select" />
      </div>

    </div>
  </div>
</div>

0
0

As Luke stated, but use input-group-append for the button span. That get rid of the roundness on the button and makes for a better matchup.

0

Most probably this is what you want...

<div style={{display: "flex"}}>
    <div style={{width: "80%"}}>
        <Textbox
          attributesInput={{ // Optional.
            id: 'listPrice',
            name: 'listPrice',
            type: 'text', 
            placeholder: 'Please Enter List Price',
          }}
          class="field inputField"
          value={listPrice} // Optional.[String].Default: "".
          onChange={(value) => handleSetListPrice(value)} // Required.[Func].Default: () => {}. Will return the value.
          onBlur={() => {}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
          validationOption={{
            type: 'number', // Optional.[String].Default: "string". Validation type, options are ['string', 'number', 'alphanumeric', 'alpha'].
            min: 1, // Optional.[Number].Default: 0. Validation of min length when validationOption['type'] is string, min amount when validationOption['type'] is number.
            max: 100, // Optional.[Number].Default: 0. Validation of max length when validationOption['type'] is string, max amount when validationOption['type'] is number.
            mantissa: 2 // Optional.[Number].Default: -1. Number precision.
          }}
        /> 
    </div>
    <div style={{width: "20%"}}>
        <Select  options={[ { value: 'eth', label: 'ETH' }, { value: 'xyzx', label: 'XYZ' } ]} />
    </div>
</div> 
</div> 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.