I am an bit new to Bootstrap but I can't ind it anywhere on the manual how to give the add on in the last line (where the txt is 'cm') the dimensions as the previous 3 lines.
<!-- width right -->
<div id="div_widthRight" class="form-group has-warning">
<label for="widthRight" class="col-sm-3 control-label">Breedte rechts</label>
<div class="col-sm-9">
<div class="input-group">
<input type="number" class="form-control" id="widthRight" name="width_right" min="20" max="252" value="" data-preview="preview_hl_right" onkeyup="validate()" onclick="validate()">
<span class="input-group-addon">cm</span>
</div>
</div>
</div>
<!-- height -->
<div id="div_height" class="form-group has-warning">
<label for="height" class="col-sm-3 control-label">Hoogte</label>
<div class="col-sm-9">
<div class="btn-group">
<button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onclick="validate_but(this);validate()">14,5</button>
<button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onclick="validate_but(this);validate()">29,0</button>
<button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onclick="validate_but(this);validate()">43,5</button>
<button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onclick="validate_but(this);validate()">58,0</button>
<span class="input-group-addon">cm</span>
</div>
</div>
</div>
Or is it because I am using different classes? But to get this aligned correct?
This is what I am trying to get.
When adding the input-group class to btn-group.
Width 0 on the input-group-addon. I have this result:
When only adding Width 0 on the input-group-addon.
I have edited my answer since my first answer did not work properly in all resolutions. I think this is one way to achieve what you want. I have changed some of your bootstrap classes.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="div_height" class="form-group has-warning">
<label for="height" class="col-sm-3 control-label">Hoogte</label>
<div class="col-sm-9">
<div class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onclick="validate_but(this);validate()">14,5</button>
<button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onclick="validate_but(this);validate()">29,0</button>
<button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onclick="validate_but(this);validate()">43,5</button>
<button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onclick="validate_but(this);validate()">58,0</button>
</span>
<span class="input-group-addon">cm</span>
</div>
</div>
</div>
Related
If I select a button from one group it works fine. But then if I select a button from the next group it forgets the first groups selection. This is an issue I've seen posted on Stack Overflow many times and each time the solution has been to give each button in the group a different name from the other group. However I've tried this solution and I still can only select a button from one button group at a time. What else could be causing this?
https://getbootstrap.com/docs/4.5/components/button-group/
Please see my code below:
<form method=”POST”>
<div id="friendly" class="btn-group" role="group" aria-label="Basic example">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">ESG Consideration (select one)</span>
</div>
<button name="friendly" value="very-high" type="button" class="btn btn-secondary">Very High</button>
<button name="friendly" value="high" type="button" class="btn btn-secondary"> High </button>
<button name="friendly" value="medium" type="button" class="btn btn-secondary"> Medium </button>
<button name="friendly" value="low" type="button" class="btn btn-secondary"> Low </button>
<button name="friendly" value="very-low" type="button" class="btn btn-secondary"> Very Low</button>
</div>
<div id="risk-tolerance" class="btn-group" role="group" aria-label="Basic example">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">Risk Tolerance (select one)</span>
</div>
<button name="risk-tolerance" value="very-high" type="button" class="btn btn-secondary">Very High</button>
<button name="risk-tolerance" value="high" type="button" class="btn btn-secondary"> High </button>
<button name="risk-tolerance" value="medium" type="button" class="btn btn-secondary"> Medium </button>
<button name="risk-tolerance" value="low" type="button" class="btn btn-secondary"> Low </button>
<button name="risk-tolerance" value="very-low" type="button" class="btn btn-secondary"> Very Low</button>
</div>
<p> </p>
</form>
I believe you're misunderstanding the documentation. Buttons are buttons there is no way to indicate they are checked or not, as they are not inputs. From your documentation link
Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
If you convert this from buttons to inputs it works as expected. (Note: Stack snippets aren't great with bootstrap)
To clarify, a button group is a design, not a functionality. You need to actually use inputs as either checkboxes, or more likely radios.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<form method=”POST”>
<div id="friendly" class="btn-group" role="group" aria-label="Basic example">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">ESG Consideration (select one)</span>
</div>
<label class="btn btn-secondary">
<input name="friendly" value="very-high" type="radio">Very High
</label>
<label class="btn btn-secondary">
<input name="friendly" value="high" type="radio"> High
</label>
<label class="btn btn-secondary">
<input name="friendly" value="medium" type="radio"> Medium
</label>
<label class="btn btn-secondary">
<input name="friendly" value="low" type="radio"> Low
</label>
<label class="btn btn-secondary">
<input name="friendly" value="very-low" type="radio"> Very Low
</label>
</div>
<div id="risk-tolerance" class="btn-group" role="group" aria-label="Basic example">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">Risk Tolerance (select one)</span>
</div>
<label class="btn btn-secondary">
<input name="risk-tolerance" value="very-high" type="radio">Very High
</label>
<label class="btn btn-secondary">
<input name="risk-tolerance" value="high" type="radio"> High
</label>
<label class="btn btn-secondary">
<input name="risk-tolerance" value="medium" type="radio"> Medium
</label>
<label class="btn btn-secondary">
<input name="risk-tolerance" value="low" type="radio"> Low
</label>
<label class="btn btn-secondary">
<input name="risk-tolerance" value="very-low" type="radio"> Very Low
</label>
</div>
<p> </p>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
How do I align the button to the right of the text box, after using form control on the search box, I am able to align the button to the left of the text box but I wish to have it on the right, please help.
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
The search box and button
Fix again!
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Try Input Groups on the form elements, bootstrap by default provides those classes
This is how you make use of them
HTML
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="col-sm-6 pull-right">
<div class ="input-group search-bar">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
<span class="input-group-addon">
<button class="btn search-btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
CSS
.search-bar{
padding:0;
}
.search-bar .input-group-addon{
padding:0;
}
.search-bar .search-btn{
padding:5px 12px;
}
Link for reference
hope this helps..
Just change place them:
Change:
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
To:
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Here is an example of inline search form:
<div class="pull-right">
<form method="get" action="">
<div class="form-group form-inline">
<input type="text" placeholder="search" class="form-control" name="s">
<button title="search" name="search" type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
you can use style=float: right; on button tag to align button to right and then adjust margin and padding accordingly.
Hi i'm having trouble resizing the search button so that it will be the same height as the textfield. Thank you in advance!.
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" />
<span class="input-group-addon">
<button type="submit" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
You can use Input Group instead of Input Group Addon and change the button to match the input size of small. See example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" /> <span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<!-- /input-group -->
I am trying to have a textbox in bootstrap, which has the same look and feel as the one you place inside a panel (large, rounded corners, full div length). On the right side of such a textbox I want to have a few buttons.
I tried a bunch of stuff - either it becomes correctly aligned, but the textbox loses all styles. Or the textbox looks correct, but the buttons wrap down to next line!
Some of what I have tried:
<div class="row">
<div class='col-md-8'>
<input type="text" class="input-block-level input-lg" placeholder="Stuff 2">
<button type="submit" class="btn">Save</button>
<button type="submit" class="btn">Delete</button>
</div>
</div>
and...
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
and...
<div class="form-horizontal">
<input type="text"/>
<button class="btn">Sign up</button>
</div>
Nothing works!I am thinking it shouldnt be so hard to place a bunch buttons next to a textbox that takes all available space and is nice and large :(
Any help is very much appreciated
Couldn't you just do it like this?
<div class="form-group">
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Stuff2" />
</div>
<div class="col-md-3">
<button class="btn btn-primary">Save</button> <button class="btn btn-danger">Delete</button>
</div>
</div>
As far as I know that to combine textbox and button, I use:
class="input-group"
and give class="form-control" to all textboxes
You mean like this follows:
<div class="row">
<div class='col-md-8'>
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button type="submit" class="btn">Save</button>
<button type="submit" class="btn">Delete</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Stuff 2">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn">Sign up</button>
</span>
</div>
</div>
</div>
If it is what you mean, here's the demo:
Demo in jsFiddle
I have a set of buttons that form a selection as part of my form.
The code is below:
<div class="form-group">
<div>
<h4>Extras</h4>
</div>
<div class="radio-inline">
<input type="button" class="btn btn-default inline" name="extra" value="Garden" >
<input type="button" class="btn btn-default inline" name="extra" value="Balcony">
<input type="button" class="btn btn-default inline" name="extra" value="Parking">
</div>
</div>
However, I want to make the options not mutually exclusive i.e. you can select both 'Garden' and 'Balcony' - and I'd like to retain the button styling.
Can anyone help with this?
EDIT: Ok - got something weird going on now - Got this code.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="garden" checked=""> Garden
</label>
<label class="btn btn-default">
<input type="checkbox"> Balcony
</label>
<label class="btn btn-default">
<input type="checkbox"> Parking
</label>
</div>
When I use bootply the multiple selection user feature works great - when I add it to my page - its not working - does anyone have any idea why it may be? Below is the whole page
<div class="container">
<div class="row">
<div class="col-md-12"><h2>This is the header</h2></div>
</div>
<div class="row">
<div class="col-md-8">
<h2>Hello world!</h2>
<form d="multiform" role="form" action="listing.php" method="post" enctype="multipart/form-data">
<div><h4>Listing Type</h4></div>
<div class="radio">
<input type="button" class="btn btn-default" value="For Sale" >
<input type="button" class="btn btn-default inline" name="list_type" value="For Rent">
<input type="button" class="btn btn-default inline" name="list_type" value="Flat Share">
</div>
<div class="form-group">
<label for="text">Title</label>
<input class= "form-control" type="text" name="text">
</div>
<div class="form-group">
<label for="desc">Description</label>
<textarea class= "form-control" name="desc" rows="5"></textarea>
</div>
<!nested columns in the first one!>
<div class="col-md-6">
<div class="form-group">
<label for="total_beds">Total Bedrooms</label>
<select class="form-control" name="total_beds">
<option>Total Bedrooms</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="pets">Pets</label>
<select class="form-control" name="pets">
<option>Pets OK?</option>
<option>Yes</option>
<option>No</option>
</select>
</div>
<p>This is another p</p>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="postcode">Postcode (for Maps)</label>
<input type="text" class="form-control" name="postcode" placeholder="Post Code">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div><h4>Extras</h4>
<div class="checkbox">
<input type="button" class="btn btn-default inline" name="extra" value="Garden" >
<input type="button" class="btn btn-default inline" name="extra" value="Balcony">
<input type="button" class="btn btn-default inline" name="extra" value="Parking">
</div>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="garden" checked=""> Garden
</label>
<label class="btn btn-default">
<input type="checkbox"> Balcony
</label>
<label class="btn btn-default">
<input type="checkbox"> Parking
</label>
</div>
</div>
</form>
</div>
<div class="col-md-4">Hello world Right! </div>
</div><! closes container!>
See the JavaScript buttons section of the Bootstrap documentation, and look at checkbox buttons:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>