Spacing between Bootstrap buttons - css

How do I make sure that there is spacing between the buttons when i use the following piece of code
<div class="container">
<div class="jumbotron">
<button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)">{{char}}</button>
<br><br>
<span ng-repeat="genre in genres">
<button class="btn btn-xs" ng-click="filterByGenre(genre)">{{genre}}</button>
</span>
</div>


'btn-toolbar' does the trick in one fell swoop. No manual css'ing required
<div class="btn-toolbar">
<button id="button1" class="btn btn-primary">Button 1</button>
<button id="button2" class="btn btn-primary">Button 2</button>
<button id="button3" class="btn btn-primary">Button 3</button>
</div>


You can use Bootstrap spacing, docs here --> https://getbootstrap.com/docs/4.0/utilities/spacing/
This example uses the class 'mr-2' to add right margins to buttons
<button id="button1" class="btn btn-primary mr-2">Button 1</button>
<button id="button2" class="btn btn-primary mr-2">Button 2</button>
<button id="button3" class="btn btn-primary">Button 3</button>


Use css property margin
button { margin: 5px 5px 5px 5px } //change the value to see the effect and choose for yourself which value to keep
margin: margin-top margin-right margin-bottom margin-left ;


Set right margin on buttons:
<div class="container">
<div class="jumbotron">
<button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)" style="margin-right: 10px;">{{char}}</button>
<br><br>
<span ng-repeat="genre in genres">
<button class="btn btn-xs" ng-click="filterByGenre(genre)" style="margin-right: 10px;">{{genre}}</button>
</span>
</div>
Hope, this is what you're looking for.


.capsule{
padding: 0 30px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container">
<div class="jumbotron">
<span class="col-xs-4"> </span>
<span class="capsule col-xs-2">
<button ng-repeat="char in alphabet" ng-click="filterByAlphabet(char)">{{char}}</button>
</span>
<span class="capsule col-xs-2" ng-repeat="genre in genres">
<button class="btn btn-xs" ng-click="filterByGenre(genre)">{{genre}}</button>
</span>
</div>
i added one empty span to center the jumbo in the screen, also added "capsule" span to get space between the buttons.
Hope it helps!

Related

Bootstrap 4 - how to align one button on the left side and remaining elements on the right side?

I need to align the B1 button on the left side and the remaining elements on the right side.
Here is my code (I'm using Bootstrap 4.1):
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="modal-footer">
<div class="clearfix">
<button type="button" id="b1" class="btn btn-primary float-left">B1 ACTION</button>
<div class="float-right">
<button type="button" id="b2" class="btn btn-primary">B2 ACTION faltas</button>
B3 ACTION
<button type="button" id="b4" class="btn btn-primary btn-danger">B4 ATION</button>
</div>
</div>
</div>
Unfortunately, the code is not working. Any idea how to do it?

Since the buttons inside .modal-footer which is using flex-box you can add the class justify-content-between beside modal-footer.
Now you don't have to use clearfix and float.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="modal-footer justify-content-between">
<button type="button" id="b1" class="btn btn-primary float-left">B1 ACTION</button>
<div>
<button type="button" id="b2" class="btn btn-primary">B2 ACTION faltas</button>
B3 ACTION
<button type="button" id="b4" class="btn btn-primary btn-danger">B4 ATION</button>
</div>
</div>

Make Bootstrap btn-group display right to left

The buttons displayed in this fiddle are not properly displayed: Since the text is in Hebrew, the first button (with id="first") should be the most right one, but is currently the most left one.
Playing with the style, it seems that this is caused by the display attribute of btn-group class (whose value is inline-block), and when I change it to display: flex the buttons are displayed in the correct order, but the first and last child's borders (right and left borders) get flipped.
I was trying some advice found in this question, but didn't manage to make it work.
Code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div dir="rtl">
<div class="btn-group" role="group">
<button id="first" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-hdd"></span> אחת
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span> שתיים
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span> שלוש
</button>
</div>
</div>

bootstrap floats your elements, you need also to overwrite float direction:
div[dir="rtl"] .btn-group .btn
{
float:right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div dir="rtl">
<div class="btn-group" role="group">
<button id="first" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-hdd"></span> אחת
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span> שתיים
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span> שלוש
</button>
</div>
</div>
you can also use the class .pull-right.
HeyJude wrote: the borders get flipped. If you look closely, you'll notice that the left border (the one with the rounded corners) of the first child should be the right one, and vice versa for the last child.
for the rounded corners, a trick could be to use transform instead rewritting CSS. It requires to encapsulate text within the span too. Icone is generated via a pseudo and should not mess it up.
div[dir="rtl"] .btn:first-of-type,
div[dir="rtl"] .btn:last-of-type,
div[dir="rtl"] .btn:first-of-type span,
div[dir="rtl"] .btn:last-of-type span {
transform: scale(-1, 1);
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div dir="rtl">
<div class="btn-group" role="group">
<button id="first" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-hdd"> אחת</span>
</button>
<button id="second" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-plus-sign"> שתיים</span>
</button>
<button id="third" type="button" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-minus-sign"> שלוש</span>
</button>
</div>
</div>

I gave it some more trials, and eventually got it with the trick of rotating the btn-group and then rotating back the text (keeping each cell's content in its own span element):
.rotate
{
transform: rotateY(180deg);
}
.rotate-back
{
transform: rotateY(180deg);
display: inline-block;
direction: rtl;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group pull-right rotate" role="group">
<button id="first" type="button" class="btn btn-default ">
<span class="glyphicon glyphicon-hdd"></span><span class="rotate-back"> אחת</span>
</button>
<button id="second" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span><span class="rotate-back"> שתיים</span>
</button>
<button id="third" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-minus-sign"></span><span class="rotate-back"> שלוש</span>
</button>
</div>

How to make <h4> element on the same line with buttons?

I have this HTML:
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
How can I make <h4> element on the same row with the buttons on the right side?

You have to add the following CSS for the heading <h4>:
h4 {
display:inline-block;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
The default value of the display property is block so the heading (<h4>) takes the full width of the parent container. With display: inline-block the heading takes only the space needed.
Bootstrap 3.3
You can set the class .pull-left to the <h4> element. So you don't need additional CSS rules:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4 class="pull-left"><span class="label label-default">1546 - some text</span></h4>
<div class="pull-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>
Bootstrap 4.0+
Since Bootstrap 4.0 you have to use .float-left instead of .pull-left:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<h4 class="float-left"><span class="label label-default">1546 - some text</span></h4>
<div class="float-left">
<button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button>
<button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button>
<button type="button" class="btn btn-default" ng-disabled="true">Cancel</button>
</div>

You have to add some CSS for h4 and pull-left-class:
h4{
display: inline-block;
}
.pull-left{
display: inline-block;
}
example:
https://jsfiddle.net/y6f0ddLg/

Bootstrap btn-toolbar justified buttons (like btn-group btn-group-justified)

End goal: Have X buttons covering full width of the div (justified) with margin between each button. So like '.btn-group .btn-group-justified', but with margin.
Bootply
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Yes</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">No</button>
</div>
</div>
While searching, I found this SO solution: https://stackoverflow.com/a/33315549/5003918
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar">
<button type="button" id="btnSubmit" class="btn btn-success btn-sm">Yes</button>
<button type="button" id="btnCancel" class="btn btn-danger btn-sm">No</button>
</div>
This gives me the desired margin between the buttons, but does not give me the justified feature.
If I try to add '.btn-block' to the buttons, then they become width width, but each on a different line.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar text-center">
<button type="button" id="btnSubmit" class="btn btn-primary btn-sm btn-block"><i class='glyphicon glyphicon-ok'></i> Yes</button>
<button type="button" id="btnCancel" class="btn btn-primary btn-sm btn-block"><i class='glyphicon glyphicon-remove'></i> No</button>
</div>
There is a similar SO question, but does not have a solution.
Bootply

Is this what you are after? It requires some CSS styling to add space between the buttons.
.btn-group {
padding-left: 5px;
padding-right: 5px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Yes</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">No</button>
</div>
</div>

Making button go full-width?

I want a button to take up the full width of the column, but having difficulties...
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
How do I make the button as wide as the column?

Bootstrap v3 & v4
Use btn-block class on your button/element
Bootstrap v2
Use input-block-level class on your button/element

Why not use the Bootstrap predefined class input-block-level that does the job?
Full-Width Button <!-- BS2 -->
Full-Width Button <!-- BS3 -->
<!-- And let's join both for BS# :) -->
Full-Width Button
Learn more here in the Control Sizing^ section.

Bootstrap / CSS
Use col-12, btn-block, w-100, form-control or width:100%
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>

In case some are noticing btn-block not working anymore in bootstrap 5.1+:
It was dropped in bootstrap 5.1 (changelog):
Breaking Dropped .btn-block for utilities. Instead of using .btn-block
on the .btn, wrap your buttons with .d-grid and a .gap-* utility to
space them as needed. Switch to responsive classes for even more
control over them. Read the docs for some examples.
You can now make a button full width by adding the class w-100, as the authors do in their official Pricing example page:
<button type="button" class="w-100 btn btn-lg btn-outline-primary">
Sign up for free
</button>
Source: https://getbootstrap.com/docs/5.1/examples/pricing/
If you want to make a stack of block buttons, the official docs recommend the following :
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Source: https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons

I simply used this:
<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>

use
<div class="btn-group btn-group-justified">
...
</div>
but it only works for <a> elements and not <button> elements.
see: http://getbootstrap.com/components/#btn-groups-justified

You should add these styles to a CSS sheet
div .no-padding {
padding:0;
}
button .full-width{
width:100%;
//display:block; //only if you're having issues
}
Then change add the classes to your code
<div class="span9 btn-block no-padding">
<button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>
I haven't tested this and I'm not 100% sure what you want, but I think this will get you close.

In Bootstrap 5, the class btn-block doesn't work anymore. But instead, you can add the class w-100 to the button to make it as wide as its container.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row"><div class=" col-5 ">
<a class="btn btn-outline-primary w-100 " href="# "><span>Button 1</span></a>
</div><div class="col-5 ">
<a class=" btn btn-primary w-100 weiss " href="# "><span>Button 2</span></a>
</div></div>

I would have thought this would be the most bootstrap-esque way of doing things:
<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>
All I'm doing is adding the class col-xs-12 to the button.

<div class="col-md-9">
<button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>
In Bootstrap 3, this should be all you need. I believe btn-large was overriding the width of btn-block.

Update 2022:
You have multiple ways to make button full width.
You can add the w-100 to the class.
You can add d-grid and gap-2to a container above the button:
<div class="d-grid gap-2"> <!-- Here -->
<button class="btn btn-primary" type="button">Button</button>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-success col-12">
class="col-12"
</button>
<button class="btn btn-primary w-100">
class="w-100"
</button>
<button class="btn btn-secondary btn-block">
class="btn-block"
</button>
<button class="btn btn-success form-control">
class="form-control"
</button>
<button class="btn btn-danger" style="width:100%">
style="width:100%"
</button>

We can Use a Block Level Full-Width Button
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>

Resources