This is my button group that using bootstrap template:
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-primary btn-xs">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
<label class="btn btn-default">%100</label>
<button type="button" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
</div>
And it looks like this:
Button groups are not same alignment. I want fixed label size. This is an ugly appearence.
Try creating a css class to set the width of the text content:
.btn-group label{
width: 100px;//or any other size
}
Related
Say I have this snipped of HTML code:
<div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
</div>
<button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-warning">Clear</button>
</div>
I would like any item inside the outer div have an horizontal margin of 3.
The only way I know is to add me-3 to the class of each item (the button group and the two other buttons). But I have to remember to add this for any other item I'm going to add.
I tried to add this to the outer div, but of course it refers to the next sibling div (if any).
Is there a way to set this margin in the outer div, but to be applied to the nested elements?
JS Solution
Iterate over all of the outer div children, and setAttribute class `me-3` to each one:
let outerDiv = document.querySelector(".btn-group")
for (let i = 0; i < outerDiv.childNodes.length; i++) {
console.log(outerDiv.childNodes[i])
if (i % 2 == 1) {
outerDiv.childNodes[i].setAttribute("class", "me-3");
}
}
<div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
</div>
<button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-warning">Clear</button>
</div>
CSS Solution
Similar to the JS solution, use `>` to iterate over all the children of `.btn-group`:
.btn-group > button {
margin-left: 3px;
margin-right: 3px;
}
<div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
</div>
<button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-warning">Clear</button>
</div>
I personally recommend the CSS solution as you can change the margin left and right to your liking.
I have this button and I want to make it calls methods when I click on "Select" and another method when I click "Change":
<button type="button" class="btn btn-default" *ngIf="!edit" class="btn btn-default">
<span *ngIf="isNullOrUndefined(class?.classForeignId)">Select</span>
<span *ngIf="!isNullOrUndefined(class?.classForeignId)">Change</span>
</button>
i have tried to put (click)="method()", but did not work. I'm so confused to what can I do. Please help
(click)="method()" is indeed the way to go.
<button type="button" class="btn btn-default" *ngIf="!edit" class="btn btn-default">
<span (click)="selectMethod()" *ngIf="isNullOrUndefined(class?.classForeignId)">Select </span>
<span (click)="changeMethod()" *ngIf="!isNullOrUndefined(class?.classForeignId)">Change </span>
</button>
Demo
Create 2 different buttons instead of 2 different spans in button and call the different methods in click on both elements.
<button type="button" class="btn btn-default" *ngIf="!edit && isNullOrUndefined(class?.classForeignId)" class="btn btn-default" (click)="method1()">
Select
</button>
<button type="button" class="btn btn-default" *ngIf="!edit && !isNullOrUndefined(class?.classForeignId)" class="btn btn-default" (click)="method2()">
Change
</button>
Bootstrap button group make them always in one line, always align horizontally.
When I resize window button comes down vertically.
I am looking for a solution where button comes always in one line no matter what.
I have applied style="white-space:nowrap;" on parent div but it doesn't work.
If possible try to use only bootstrap's inbuilt css classes.
Please answer by keeping current HTML structure as it is. Because that's how it is implemented in mine project.
This is simplest implementation of bootstrap button group. See PLUNKER
CODE
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well form-horizontal">
<div class="form-group" style="white-space:nowrap;">
<div>
<div class="btn-group">
<button type="button" class="btn btn-primary">
11111
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
</div>
</div>
</div>
</div>
You need to override the float: left; as well as add white-space: nowrap; to the parent. So in your css:
.btn-group {
white-space: nowrap;
}
.btn.btn-primary,
.btn.btn-success {
float: none;
}
plunker: https://plnkr.co/edit/lRWyHeeN78d2sSNaXGSZ?p=preview
Although, I would recommend adding a specific class to the btn-group/btn-primary/btn-success because overriding bootstraps styling instead of just adding a custom class is a bad practice.
For example:
HTML:
<div class="btn-group custom-class">
<button type="button" class="btn btn-primary custom-class">
<button type="button" class="btn btn-success custom-class">
CSS:
.btn-group.custom-class{...}
.btn.btn-primary.custom-class,
.btn.btn-success.custom-class {...}
https://plnkr.co/edit/nAZD6Hssgnep37fXU9vb?p=preview
Try display:inline-flex on parent instead on display:inline-block on btn-group
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well form-horizontal" style="">
<div class="form-group" style="white-space:nowrap;">
<div>
<div class="btn-group" style="display:inline-flex;">
<button type="button" class="btn btn-primary">
11111
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
22222
</button>
<button type="button" class="btn btn-primary">
33333
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
<button type="button" class="btn btn-success">
44444
</button>
<button type="button" class="btn btn-primary">
55555
</button>
</div>
</div>
</div>
</div>
I am working on a prestashop module and I am trying to use a Boostrap glyphicon as a button in my template, but it does not work and I can not figure out why.
<td>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-cloud-download"></span>
</button>
</td>
My column stays empty, prestashop documentation shows this example but it it does not work either
<div class="form-group has-warning">
<label class="control-label" for="input1">Label with warning</label>
<input type="text" class="form-control" id="input1">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
Is it something to add to prestashop ? Did I miss something ?
It depends on the button you need, for example if it's a "panel-footer" button you can use:
<button type="submit" class="btn btn-default pull-right" name="submitTest"><i class="process-icon-download"></i> Download</button>
or for link button:
<a href="#" title="Download" class="btn btn-default">
<i class="icon-cloud-download"></i> Download
</a>
In the default-bootstrap theme, prestashop doesn't use exactly the classical bootstrap glyphicon classes but some custom one.
In your example you can use
<td>
<button type="button" class="btn btn-default btn-lg">
<span class="icon icon-cloud-download"></span>
</button>
</td>
To resume you have just to replace glyphicon by icon.
enter code here
Good Luck
I want to give spacing between buttons is there a way to give spacing using bootstrap so that they will be consistent for different screen resolutions.
I tried using margin-left But is it the correct way to do this.??
Here is the demo
HTML:
<div class="btn-toolbar text-center well">
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
<span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
</button>
</div>
CSS:
.margin-left{
margin-left: 80px !important;
}
You can achieved by use bootstrap Spacing. Bootstrap Spacing includes a wide range of shorthand responsive margin and padding. In below example mr-1 set the margin or padding to $spacer * .25.
Example:
<button class="btn btn-outline-primary mr-1" href="#">Sign up</button>
<button class="btn btn-outline-primary" href="#">Login</button>
You can read more at Bootstrap Spacing.
HTML:
<input id="id_ok" class="btn btn-space" value="OK" type="button">
<input id="id_cancel" class="btn btn-space" value="Cancel" type="button">
CSS:
.btn-space {
margin-right: 5px;
}
Wrap your buttons in a div with class='col-xs-3' (for example).
Add class="btn-block" to your buttons.
This will provide permanent spacing.
It varies according to bootstrap version
If you are using
Bootsrap 4
mr-1
for more refer the official Bootsrap 4 margin-and-padding link
Bootstrap 5
me-1
for more refer the official Bootsrap 5 margin-and-padding link
If you want use margin, remove the class on every button and use :last-child CSS selector.
Html :
<div class="btn-toolbar text-center well">
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
<span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
</button>
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
</button>
</div>
Css :
.btn-toolbar .btn{
margin-right: 5px;
}
.btn-toolbar .btn:last-child{
margin-right: 0;
}
I am pretty bad at html but I used between the buttons and it worked well.
Depends on how much space you want. I'm not sure I agree with the logic of adding a "col-XX-1" in between each one, because you are then defining an entire "column" in between each one.
If you just want "a little spacing" in between each button, I like to add padding to the encompassing row. That way, I can still use all 12 columns, while including a "space" in between each button.
Bootply: http://www.bootply.com/ugeXrxpPvD
Use btn-primary-spacing class for all buttons remove margin-left class
Example :
<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>
CSS will be like :
.btn-primary-spacing
{
margin-right: 5px;
margin-bottom: 5px !important;
}
You can use built-in spacing from Bootstrap so no need for additional CSS there. This is for Bootstrap 4.
The original code is mostly there, but you need btn-groups around each button. In Bootstrap 3 you can use a btn-toolbar and a btn-group to get the job done; I haven't done BS4 but it has similar constructs.
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button class="btn btn-default">Button 1</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-default">Button 2</button>
</div>
</div>
Adding margins to a button makes it wider so that les buttons fit in the grid system. If only a visual effect is important, then give the button a white border with [style="margin:0px; border:solid white;"] This leaves the button width unaffected.
using bootstrap you can add <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div> between buttons.