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
Related
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>
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>
Coming from: Twitter Bootstrap Button Text Word Wrap
How can I set the word wrap of a text inside a button in bootstrap 4, without change the height or with all buttons with the same height? For example:
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>
returns this:
with the answer from that question (that is duplicated everywhere but the answer is the same everywhere)
.btn{
white-space:normal !important;
word-wrap: break-word;
}
but the expected result is that "Cambio de Nacionalidad" being aligned.
Since you are using BS 4 the col-* are flex items stretched by default so simply use height:100% on the button
.btn {
height:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>
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.
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>