I am trying to group buttons using btn-toolbar(not using btn-group because I want different buttons) and I also want to add label at top of each button but I am unable to achieve what I am trying to. here is the code snippet.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<button type="button" class="btn btn-lg output_border">A</button>
<button type="button" class="btn btn-lg output_border">A</button>
<button type="button" class="btn btn-lg output_border">A</button>
<button type="button" class="btn btn-lg output_border">A</button>
<button type="button" class="btn btn-lg output_border">A</button>
<button type="button" class="btn btn-lg output_border">A</button>
</div>
here is picture of what i am expecting
Here is the solution you need. It works as per the image you have shown
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap btn-tool</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.labelarrange1{
float:left;
position:relative;
left:5px;
top:8px;
font-size:10px;
}
.btn{
border-radius:0;
background:powderblue;
border-radius:0;
}
</style>
</head>
<body>
<div class="btn-toolbar container" role="toolbar" aria-label="Toolbar with button groups">
<div class="row">
<div class="col-md-1">
<label class="labelarrange1">Relay 1</label>
<br>
<button type="button" class="btn btn-lg">A</button>
</div>
<div class="col-md-1">
<label class="labelarrange1">Relay 1</label>
<br>
<button type="button" class="btn btn-lg">A</button>
</div>
<div class="col-md-1">
<label class="labelarrange1">Relay 3</label>
<br>
<button type="button" class="btn btn-lg" style="background:#eee;">O</button>
</div>
</div>
</div>
</body>
</html>
you can use this
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
<label>a</label>
<button type="button" class="btn btn-lg output_border">A</button>
</div>
i may not be totally correct.. try using some seperation techniques.
Related
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 made this code. I need the two first buttons take me to other page but it is not working. I am usin href.
<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>
<button type="button" class="btn btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</button>
<button type="button" class="btn btn-primary btn-lg btn-block" href="/agregarNumero.html">Agregar número de celular</button>
<button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>
If you want link, use a tag, not button:
<a class="btn btn-link btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</a>
try a tag instead of button tag
<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>
<a type="button" class="btn btn-primary btn-lg btn-block" href="/enviarSMS.html">Enviar SMS</a>
<a type="button" class="btn btn-primary btn-lg btn-block" href="/agregarNumero.html">Agregar número de celular</a>
<a type="button" class="btn btn-danger btn-lg btn-block">SALIR</a>
</div>
<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">Enviar SMS</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Agregar número de celular</button>
<button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>
You have to use <a> tag. You can't add href to <button>
You need to update your code as below:-
used a tag instead of button. And also checked the required refrences of bootstrap Scripts (JS and CSS).
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>
Enviar SMS<br>
Agregar número de celular<br>
<button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>
</body>
</html>
and also use:-
<div id="browse_app">
<a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>
This should be
HTML
<div class="container">
<div class="menu-principal">
<h2>MENÚ PRINCIPAL</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">
Enviar SMS
</button>
<button type="button" class="btn btn-primary btn-lg btn-block">
Agregar número de celular
</button>
<button type="button" class="btn btn-danger btn-lg btn-block">SALIR</button>
</div>
In Bootstrap, how can I get a button group like the following that span the full width of a parent element? (like with the ".btn-block" class, but applied to a group http://getbootstrap.com/css/#buttons-sizes )
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Correct solution for Bootstrap 4 and Bootstrap 5 (from Bootstrap 4 migration documentation):
Removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.
Example:
<div class="btn-group d-flex" role="group" aria-label="...">
<button type="button" class="btn btn-default w-100">Left</button>
<button type="button" class="btn btn-default w-100">Middle</button>
<button type="button" class="btn btn-default w-100">Right</button>
</div>
Source: https://getbootstrap.com/docs/4.0/migration/#button-group
Edit: verified solution with Bootstrap 5
Flexbox can do that.
.btn-group.special {
display: flex;
}
.special .btn {
flex: 1
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group special" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
You can also use bootstraps btn-block will span across parent.
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
https://getbootstrap.com/docs/4.0/components/buttons/
In Bootstrap 4, make use of .d-flex on your .btn-group and .w-100 on individual buttons:
.btn-group.d-flex(role='group')
button.w-100.btn.btn-lg.btn-success(type='button') 👍
button.w-100.btn.btn-lg.btn-danger(type='button') 👎
.btn-group(role='group')
button#btnGroupDrop1.btn.btn-lg.btn-light.dropdown-toggle(type='button', data-toggle='dropdown')
| •••
.dropdown-menu
a.dropdown-item(href='#') An option
a.dropdown-item(href='#') Another option
You can also use .btn-group-justified.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="btn-group btn-group-justified">
Left
Middle
Right
</div>
</div>
<div class="col-sm-12">
<div class="btn-group btn-block" role="group">
<button class="btn btn-success col-sm-10" type="submit">Button 1</button>
<button class="btn btn-danger col-sm-2" type="submit">Button 2</button>
</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
For example, see below code, when I resize the browser to very small width, the gird will collapse, so two button groups and text align in vertical, and there is no space between them, how can I add some space?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8">
asdf
</div>
</div>
You can set the margin-bottom initially or in the media where it changes like this:
#media (max-width: 991px){
.col-margin{
margin-bottom: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 col-margin">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2 col-margin">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8 col-margin">
asdf
</div>
</div>
Check this out for more info about bootstrap grid system: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
And this for better understanding of media: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can use .classname >[class*='col-'] in conjunction with your row to add space or whatever rule to your columns inside that row.
#media (max-width: 991px) {
.col-space >[class*='col-'] {
margin-bottom: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row col-space">
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8">asdf</div>
</div>
</div>