bootstrap input group with text select and button
you can put this type of elements
LIVE DEMO
HTML
<div class="container">
<div class="col-lg-6">
<div class="input-group my-group">
<input type="text" class="form-control" name="snpid" placeholder="Test"/>
<select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default my-group-button" type="submit">GO!</button>
</span>
</div>
</div>
<div>
CSS
.my-group .form-control{
width:50%;
}
JQUERY
if ( $.browser.webkit ) {
$(".my-group-button").css("height","+=1px");
}
Bootstrap / CSS - Input, button and select in the same line
Problem with form-inline is that it's applying width:auto; on the select and as in your scenario content is large and enough space is not available in the first line so it's starting from the new line. Instead of using form-inline you can restructure your markup like that:
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Buscar cliente">
<span class="input-group-btn">
<button type="button" class="btn btn-primary">Buscar</button>
</span>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<select class="form-control" id="selectedCliente">
<option>test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test
</option>
</select>
</div>
</div>
</div>
</form>
input-group-addon with bootstrap-select
From Bootstrap docs:
Extend form controls by adding text or buttons before, after, or on both sides of any text-based
<input>. Use.input-groupwith an.input-group-addonor.input-group-btnto prepend or append elements to a single.form-control.
You need to wrap the select and .input-group-addon in a .input-group:
<div class="input-group">
<span class="input-group-addon">Label 2</span>
<select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
</div>
Check it out:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><div class="container"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon">Labe 1</span> <input type="text" class="form-control" name="snpid" placeholder="Test"> <span class="input-group-btn"> <button class="btn btn-default" type="submit">GO!</button> </span> </div> </div> <br> <hr> <div class="container"> <form class="form-inline"> <div class="input-group"> <span class="input-group-addon">Label 2</span> <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ..."> <option>Hot Dog, Fries and a Soda</option> <option>Burger, Shake and a Smile</option> <option>Sugar, Spice and all things nice</option> <option>Baby Back Ribs</option> <option>A really really long option made to illustrate an issue with the live search in an inline form</option> </select> </div> </form> </div></div>Select field as input group addon
You just need to wrap your <select> by a <div> with class .input-group-addon like this
<div class="input-group">
<div class="input-group-addon">
<select class="" id="protocol">
<option>http://</option>
<option>https://</option>
</select>
</div>
<input class="form-control" id="domain" aria-describedby="protocol" type="text">
</div>
Example
input-group with input field, select (silviomoreto) and button not displaying correctly
As far as I can tell you'll have to do this on your own, I don't believe there is any native support in Bootstrap for grouping multiple input fields with a button.
The vast majority of this is defining the border radius of each input based on the viewport since they's placed inside columns (*which also have the padding removed to keep the inputs together).
Here are three examples depending on how you may or may not want to handle this on different devices.
(*Make sure to open the Snippet to Full Page then reduce the Browser to see the changes)
Working Examples:
$('.select-group').selectpicker();/**CSS BELOW THIS LINE IS FOR EXAMPLE ONLY: NOT RELEVANT TO ANSWER**/
body { padding-top: 20px;}.the-form,.the-form-2,.the-form-3 { padding: 0 15px;}/**CSS ABOVE THIS LINE IS FOR EXAMPLE ONLY: NOT RELEVANT TO ANSWER**/
.no-gutter > [class*='col-'] { padding-right: 0; padding-left: 0;}/**FORM 1**/
@media (min-width: 768px) { .the-form .form-control.new-form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .the-form .btn-group.bootstrap-select.form-control.select-group, .the-form .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle { border-radius: 0; } .the-form button { border-top-left-radius: 0; border-bottom-left-radius: 0; }}@media (max-width: 767px) { .the-form .btn-group.bootstrap-select.form-control.select-group, .the-form .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle { border-bottom-right-radius: 0; border-top-right-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .the-form button { border-top-left-radius: 0; border-bottom-left-radius: 0; }}/**FORM 2**/
.the-form-2 .form-control.new-form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;}.the-form-2 .btn-group.bootstrap-select.form-control.select-group,.the-form-2 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle { border-radius: 0;}.the-form-2 button { border-top-left-radius: 0; border-bottom-left-radius: 0;}/**FORM 3**/
@media (min-width: 768px) { .the-form-3 .form-control.new-form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .the-form-3 .btn-group.bootstrap-select.form-control.select-group, .the-form-3 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle { border-radius: 0; } .the-form-3 button { border-top-left-radius: 0; border-bottom-left-radius: 0; }}@media (max-width: 767px) { .the-form-3 .form-control.new-form-control { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom: none; } .the-form-3 .btn-group.bootstrap-select.form-control.select-group, .the-form-3 .btn-group.bootstrap-select.form-control.select-group .dropdown-toggle { border-bottom-right-radius: 0; border-top-right-radius: 0; border-top-left-radius: 0; border-bottom-left-radius: 4px; } .the-form-3 button { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; }}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"><div class="container"> <h1>Example 1</h1> <form class="the-form"> <div class="row no-gutter"> <h3 id="track-record">Record</h3>
<div class="col-xs-12 col-sm-6"> <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder"> </div>
<div class="col-xs-6 col-sm-3"> <select id="year-select" class="form-control select-group"> <option value="">Year</option> <option value="1">2014</option> <option value="2">2013</option> <option value="3">2012</option> <option value="4">2011</option> </select> </div>
<div class="col-xs-6 col-sm-3"> <button type="button" class="btn btn-primary btn-block"> <span class="glyphicon glyphicon-minus"></span> Delete Record </button> </div>
</div>
</form></div><hr><div class="container"> <h1>Example 2</h1> <form class="the-form-2"> <div class="row no-gutter"> <h3 id="track-record">Record</h3>
<div class="col-xs-7 col-sm-6"> <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder"> </div>
<div class="col-xs-3 col-sm-3"> <select id="year-select" class="form-control select-group"> <option value="">Year</option> <option value="1">2014</option> <option value="2">2013</option> <option value="3">2012</option> <option value="4">2011</option> </select> </div>
<div class="col-xs-2 col-sm-3"> <button type="button" class="btn btn-primary btn-block"> <span class="glyphicon glyphicon-minus"></span> <span class="hidden-xs">Delete Record</span> </button> </div>
<span class="help-block text-right visible-xs">Delete Record</span>
</div>
</form></div><hr><div class="container"> <h1>Example 3</h1> <form class="the-form-3"> <div class="row no-gutter"> <h3 id="track-record">Record</h3>
<div class="col-xs-12 col-sm-6"> <input type="text" class="form-control new-form-control" id="assessor" placeholder="Placeholder"> </div>
<div class="col-xs-6 col-sm-3"> <select id="year-select" class="form-control select-group"> <option value="">Year</option> <option value="1">2014</option> <option value="2">2013</option> <option value="3">2012</option> <option value="4">2011</option> </select> </div>
<div class="col-xs-6 col-sm-3"> <button type="button" class="btn btn-primary btn-block"> <span class="glyphicon glyphicon-minus"></span> Delete Record </button> </div>
</div>
</form></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>Bootstrap input group with select as add-on
You can make the change by adding custom styles to the select.
I added a class to the "input-group" called "select-group" and target the input field and select.
HTML
<div class="input-group select-group">
<input type="text" class="form-control"/>
<select class="form-control input-group-addon">
<option>Item 1</option>
<option>Item 2</option>
</select>
</div>
CSS
.select-group input.form-control{ width: 65%}
.select-group select.input-group-addon { width: 35%; }
Demo here
Bootstrap Input Group not working properly
Try use "d-flex" to flex out the content into one row and remove some of your unnecessary tags.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="mt-3 p-2 d-flex">
<div class="input-group d-flex w-25">
<input class="form-check-input me-3" type="checkbox" value="" id="set-mark-up-check">
<label class="form-check-label" for="set-mark-up-check">Set Markup</label>
</div>
<div class="input-group d-flex">
<div class="input-group-prepend">
<input class="form-input" type="number" value="" id="mark-up-amount-input">
</div>
<select id="mark-up-select" class="custom-select">
<option value="percentage">% By Percentage</option>
<option value="amount">% By Amount</option>
</select>
</div>
</form>Related Topics
Bootstrap Container with Position:Absolute Loses Layout Inside
How to Have Multiple Svg Images in a Single File
How to Add Multiple Style Attributes to a React Element
How to Apply a CSS Rule to All Descendants of an Elements
Remove Underline in Inputtext in React Native
Why Is Bootstrap Trying to Load Less Files in Edge
Google Font API Uses Browser Detection. How to Get All Font Variations for Font-Face
Column Are Full Width in Ie 8 - CSS Bootstrap
Margin: Auto Not Working in Ie
CSS: Styling The Content of Before Pseudo Element on a List
How to Move Bootstrap 3 Carousel Caption Below Images
CSS for a Sidebar Menu That Folds in and Out
Add Class to an Element in Angular 4