As title, I want to create a input-group for number increase/decrease.
This is my code:
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="0.9">
<div class="btn-group-vertical">
<button class="btn btn-primary btn-sm" type="button">+</button>
<button class="btn btn-primary btn-sm" type="button">-</button>
</div>
</div>
Result
Expected result
You need to add py-0 for remove top & bottom padding and lh-1 for decrease line height of button. Your code should be as below:
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="0.9">
<div class="btn-group-vertical">
<button class="btn btn-primary btn-sm py-0 lh-1" type="button">+</button>
<button class="btn btn-primary btn-sm py-0 lh-1" type="button">-</button>
</div>
</div>
add p-0 in button so the code will like this :
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="0.9">
<div class="btn-group-vertical">
<button class="btn btn-primary btn-sm p-0" type="button">+</button>
<button class="btn btn-primary btn-sm p-0" type="button">-</button>
</div>
</div>
Related
I have a group of multiple buttons that span multiple lines, but when a button no longer fits on a line it just goes on the next line and the remaining space is left blank. I'd instead like to have equal spacing between the buttons that did make it onto that line so that the line appears full.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="mx-auto" style="width: 90%;" >
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>
</div>
I would like to make it so that the buttons end up spaced out such that there are multiple buttons on a line, but that each line is full. There are a number of different examples that create columns explicitly, but they all seem to assume that you know how many buttons/columns you'll have vs. having buttons of different sizes and auto-adjusting the spacing between them. I'd like to be able to auto-adjust the spacing between so that they'll fill the full line, e.g. space out 1 2, 3 so 1 starts at the far left and 3 ends at the far right. How can I do that?
I see you're using Bootstrap, check out Flex.
You can use something like: d-flex flex-wrap justify-content-between on the perent element.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="w-90 mx-auto d-flex flex-wrap justify-content-between">
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>
</div>
If you replace the <div class="mx-auto"> wit the classes <div class="d-flex justify-content-between"> the links will be distributed in equal space between them along the parent div.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="d-flex justify-content-between" style="width: 90%">
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>
</div>
In addition, if you want to use mx-auto, you must do it on the element you want to have the auto margin, in your case each <input>. And remember that the item must be display: block or display: inline-block
An alternative method is to use a card group for an arbitrary number of buttons both equally spaced and equally sized, all on one line responsively, above the sm breakpoint.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="card-group mb-4">
<div class="card mx-2">
<input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test'>
</div>
<div class="card mx-2">
<input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 2'>
</div>
<div class="card mx-2">
<input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 3'>
</div>
<div class="card mx-2">
<input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test Much Longer String That Makes This Multiple Lines 4'>
</div>
<div class="card mx-2">
<input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 5'>
</div>
</div>
<hr>
<div class="card-group mb-4">
<div class="card mx-2">
<input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='another Test'>
</div>
<div class="card mx-2">
<input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='another Test 2'>
</div>
<div class="card mx-2">
<input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test little Longer String'>
</div>
</div>
I want to keep text box and button in the same line, but it's coming in two different lines:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-6">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
Make your parent element, containing the input and button element a flex box. I used the bootstrap utility classes to achieve this. I added a small margin to the input element as well, also using a bootstrap utility class.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-12 d-flex">
<input class="form-control mr-1" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
Probably the best way to achieve exactly what you want is something like this
<div class="container">
<div class="row">
<div class="col-sm-8">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<form asp-controller="Expense" asp-action="Index" class="form-group col-sm-4 d-flex">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</form>
</div>
</div>
The "Filter" button goes in the second line since Bootstrap's form-control class has display: block and width: 100%. Change display: inline-block and reduce width: 50%.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-8">
<input class="form-control" type="text" name="SearchString" placeholder="Search" style="display: inline-block; width: 50%;">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-8">
<div class="d-flex">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info ml-2">Filter</button>
</div>
</div>
</form>
</div>
</div>
I found some come to make a button that is also an input file with a label :
<label>
Import
<input type="file" hidden>
</label>
So I put in on the toolbar on my project where I'm using a button group :
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary" (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
The thing the label is actually a bit shorter than other buttons.
I tried to fix it's height :
<label style="height: 101%" class="btn btn-primary">
It works but now the text isn't vertically centered !
Is there a way to make it look like a normal button ?
You can remove the margin of that label like this:
(I would not recommend inline css).
.export {
margin: 0px;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="newNetwork()">New network</button>
<label class="btn btn-primary export">
Import
<input type="file" (change)="import($event.target.files)" hidden>
</label>
<button class="btn btn-primary " (click)="export()">Export</button>
</div>
<div class="btn-group mr-2" role="group">
<button class="btn btn-primary" (click)="addElement('station')">Add station</button>
<button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
<button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
</div>
<div class="btn-group" role="group">
<button class="btn"
[ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
(click)="link()">
Add link
</button>
<button class="btn"
[ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
(click)="edit()">
Edit
</button>
<button class="btn"
[ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
(click)="remove()">
Remove
</button>
</div>
</div>
I have this code (jsfiddle - make sure you stretch the "demo" frame enough that the buttons are on a single line):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UI-Compatible" content="IE=edge /">
<meta name="viewport" content="width=device-width, initial-scale=1 /">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<br/><br/><br/>
<div class="row">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="pfSel" class="col-sm-2 control-label">Select Product Family:</label>
<div class="col-sm-4">
<select class="form-control" id="pfSel"></select>
</div>
<label for="pidSel" class="col-sm-2 control-label">Select PID:</label>
<div class="col-sm-4">
<select class="form-control" id="pidSel"></select>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
</div>
</div>
</body>
The first line is a form while the second line are buttons outside the form to indicate where columns are. As you can see the select drop-downs in the forms are not aligned with buttons below it. The drop-downs left borders are different in relationship to buttons. Why is this happening and is there any way to fix it? Thanks.
.row elements add negative margins to account for the padding used in Bootstrap's .col-* definitions. .form-horizontal forms also do that, so you shouldn't wrap your <form> element inside <div class="row">.
Update your markup as follows:
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="pfSel" class="col-sm-2 control-label">Select Product Family:</label>
<div class="col-sm-4">
<select class="form-control" id="pfSel"></select>
</div>
<label for="pidSel" class="col-sm-2 control-label">Select PID:</label>
<div class="col-sm-4">
<select class="form-control" id="pidSel"></select>
</div>
</div>
</form>
<div class="row">
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
<div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
</div>
</div>
Also, use margin or similar CSS properties to add whitespace, not <br /> tags.
jsFiddle Demo
This is what I've tried:
<div class="input-prepend input-append">
<input type="text" />
<div class="add-on btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary" dir="ltr">http://</button>
<button type="button" class="btn btn-primary" dir="ltr">https://</button>
</div>
</div>
but the group-button's padding and margin made it ugly! you can see it in jsFiddle
How can I fix it?
Remove add-on from class="add-on btn-group"
Try changing your code to this:
<div class="input-prepend input-append">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary" dir="ltr">http://</button>
<button type="button" class="btn btn-primary" dir="ltr">https://</button>
<input type="text" />
</div>
:)