I am trying to add spacing between buttons in a Bootstrap button group. I understand this is possible by using a button toolbar instead, however, I cannot work out how to make that justified (ie. fill a width of 100%). This is a feature I need and, as far as I can work out, is only possible with button groups.
The code below creates a bar of buttons that are attached to one another with no spacing. I would like them to appear inline as individual buttons, spaced equally, with widths proportionate to the length of the text.
.btn-group {
width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="btn-group" role="group" id="indicative">
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-present">present</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-preterite">preterite</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-imperfect">imperfect</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-conditional">conditional</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled" id="indicative-future">future</button>
</div>
Welcome to flexbox!
Enable flex behaviors
Flex fill
Also, to make things a little less cramped...
Spacing utilities
And for the sake of this demo...
Background color
Borders
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="d-flex bg-light border py-1" id="indicative">
<button type="button" id="indicative-present"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">present</button>
<button type="button" id="indicative-preterite"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">preterite</button>
<button type="button" id="indicative-imperfect"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">imperfect</button>
<button type="button" id="indicative-conditional"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">conditional</button>
<button type="button" id="indicative-future"
class="btn btn-outline-primary shadow-none disabled flex-fill mx-1">future</button>
</div>
You can use mx-1 to your bootstrap button class to add space between the buttons.
.btn-group {
width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="btn-group" role="group" id="indicative">
<button type="button" class="btn btn-outline-primary shadow-none disabled mx-1" id="indicative-present">present</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled mx-1" id="indicative-preterite">preterite</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled mx-1" id="indicative-imperfect">imperfect</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled mx-1" id="indicative-conditional">conditional</button>
<button type="button" class="btn btn-outline-primary shadow-none disabled mx-1" id="indicative-future">future</button>
</div>
Related
I have a table header with buttons, but the moment I add my dropdown button, it moves all of them around and makes them ugly to look at. This is my dropdown button:
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Downloaden
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
These are my other buttons:
<div class="col text-right">
<button type="submit" form="selecties" formaction="<?php echo base_url("/crud/email_multiple") ?>"
class="btn btn-outline-secondary btn-sm">E-Mailen
</button>
<?php if ($userInfo["rights"] == 'admin') : ?>
<button type="submit" form="selecties"
formaction="<?php echo base_url("/crud/delete_multiple") ?>"
class="btn btn-outline-danger btn-sm">Verwijderen
</button>
<a href="<?php echo base_url("/crud/add") ?>"
class="btn btn-outline-success btn-sm">Data
toevoegen</a>
<?php endif; ?>
</div>
I want to put my dropdown next to the other buttons, but I'm guessing because it's a div and not a button they don't align properly?
When I put my dropdown in the same div as my buttons, the dropdown goes vertically above the other buttons.
Would appreciate some help!
You can use flex to align your element. like Bootstrap classes d-flex and justify-content-between. Wrap your content in above classes like below code snippet.
For more alignment options check bootstrap official docs
https://getbootstrap.com/docs/4.6/utilities/flex/#justify-content
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Downloaden
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
<div>
<button type="submit" form="selecties"
class="btn btn-outline-secondary btn-sm">E-Mailen
</button>
<button type="submit" form="selecties"
class="btn btn-outline-danger btn-sm">Verwijderen
</button>
<a
class="btn btn-outline-success btn-sm">Data
toevoegen</a>
</div>
</div>
I have a div where I want to use a full-width button group with 3 button.
The 2nd and the 3th button "text" will be only font-awesome icons, so I want them to be smaller than the 1st. (For example 60%-20%-20%)
I tried this snippet (I didn't used the "other two are smaller" style yet, so it have to be a 33%-33%-33% buttongroup)
<div class="btn-group btn-group-justified">
<button class="btn btn-default disabled">
{{$buttonText}}
</button>
<button class="btn btn-warning">
<i class="fa fa-edit"></i>
</button>
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
But the whole btn-group only occupies the 25% of the div. Why?
To use justified button groups with <button> elements, you must wrap each button in a button group. See bootstrap documentation here: With <button> elements
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div class="btn-group btn-group-justified">
<div class="btn-group" role="group">
<button class="btn btn-default disabled">
asdasd
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-warning">
<i class="fa fa-edit"></i>
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
I would use grid layout for my rescue. My btn no longer is restricted by width of the content.
<div class="row">
<button class="col-xs-10 btn btn-primary">
BTN 1
</button>
<button class="col-xs-1 btn btn-warning">
<i class="fa fa-edit"> BTN 2</i>
</button>
<button class="col-xs-1 btn btn-danger">
<i class="fa fa-trash"> BTN 3</i>
</button>
I have reduced the width of the button and want to align the glyphicon in the center.
Here is my code:
<div class="btn-group btn-toggle">
<button class="btn btn-primary btn-sm" type="button" style="width:20px">
<span class="glyphicon glyphicon glyphicon-sort-by-alphabet"></span>
</button>
<button class="btn btn-default btn-sm" type="button">
<span class="glyphicon glyphicon glyphicon-sort-by-alphabet-alt"></span>
</button>
</div>
Here is a bootply link: http://www.bootply.com/HYU6Nff6bk#
How can it be done?
The button still uses padding-left: 10px; and padding-right: 10px;
If you want to have a button with a width of 20px, then reduce padding-left and padding-right to zero.
<div class="btn-group btn-toggle">
<button class="btn btn-primary btn-sm" type="button" style="width:20px; padding-left: 0px; padding-right: 0px;">
<span class="glyphicon glyphicon glyphicon-sort-by-alphabet"></span>
</button>
<button class="btn btn-default btn-sm" type="button">
<span class="glyphicon glyphicon glyphicon-sort-by-alphabet-alt" aria-hidden="true"></span>
</button>
</div>
I have three likert scales similar to:
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Not Fearsome</a>
<button id="fear1" type="button" class="btn btn-default likert-1">1</button>
<button id="fear2" type="button" class="btn btn-default likert-2">2</button>
<button id="fear3" type="button" class="btn btn-default likert-3">3</button>
<button id="fear4" type="button" class="btn btn-default likert-4">4</button>
<button id="fear5" type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Extremely Fearsome</a>
</div>
</div>
CodePen
However would like the first button of each scale to be placed exactly under each other for them to be uniform.
Any simple solutions?
give a min-width to your a
.btn-link {
min-width: 130px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Not Fearsome</a>
<button id="fear1" type="button" class="btn btn-default likert-1">1</button>
<button id="fear2" type="button" class="btn btn-default likert-2">2</button>
<button id="fear3" type="button" class="btn btn-default likert-3">3</button>
<button id="fear4" type="button" class="btn btn-default likert-4">4</button>
<button id="fear5" type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Extremely Fearsome</a>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Not Controllable</a>
<button id="control1" type="button" class="btn btn-default likert-1">1</button>
<button id="control2" type="button" class="btn btn-default likert-2">2</button>
<button id="control3" type="button" class="btn btn-default likert-3">3</button>
<button id="control4" type="button" class="btn btn-default likert-4">4</button>
<button id="control5" type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Totally Controllable</a>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<a class="btn btn-link disabled" disabled>Not Dangerous</a>
<button id="danger1" type="button" class="btn btn-default likert-1">1</button>
<button id="danger2" type="button" class="btn btn-default likert-2">2</button>
<button id="danger3" type="button" class="btn btn-default likert-3">3</button>
<button id="danger4" type="button" class="btn btn-default likert-4">4</button>
<button id="danger5" type="button" class="btn btn-default likert-5">5</button>
<a class="btn btn-link disabled" disabled>Extremely Dangerous</a>
</div>
</div>
Simplest answer is to put a width styling on the link using 300px in the following example:
<a class="btn btn-link disabled" disabled style="width:300px">Not Fearsome</a>
This would force all the leading statements to be the same width. I would suggest adding a class and doing via the CSS:
//css
.leftSide{width:300px}
<a class="leftSide btn btn-link disabled" disabled>Not Fearsome</a>
you could also pull the links out of the button-group and have them to each side in their own divs:
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="col-md-2">
<a class="btn btn-link disabled" disabled>Not Fearsome</a>
</div>
<div class="col-md-10">
<div class="btn-group" role="group" aria-label="...">
<button id="fear1" type="button" class="btn btn-default likert-1">1</button>
<button id="fear2" type="button" class="btn btn-default likert-2">2</button>
<button id="fear3" type="button" class="btn btn-default likert-3">3</button>
<button id="fear4" type="button" class="btn btn-default likert-4">4</button>
<button id="fear5" type="button" class="btn btn-default likert-5">5</button>
</div>
</div>
<div class="col-md-2">
<a class="btn btn-link disabled" disabled>Extremely Fearsome</a>
</div>
</div>
Even though #dippas commented that the class wasn't needed and was the accepted answer, the fact is that his solution is increasing the width of the last <a> of each line unnecessarily.
A simple and clean way to achieve what you want is using:
.btn-link:first-child {
display:inline-block;
width: 150px;
}
That way, of the <a> with the class btn-link, you will only select the first that appears inside the <div class="btn-group">.
You need to add display property to change the width of the a tag.
.btn-link {
display: inline-block;
min-width: 110px;
}
I have updated to bootstrap 3. Previously I had a div which was a circle and inside that circle there was an icon which was taken from a glyph-icon. It was a perfect circle, now the circle is more of a round rectangle. If I have no icon in the circle, it will be a circle, but as soon as I put an icon into the circle it turns into a rectangle. This was not happening with the previous version of bootstrap. The jsfiddle has my current code. The fiddle will show a circle because I can't add a glyph-icon (of a check mark) into the fiddle, but if it was there (the class on the list tag, fa-icon-check, is what gets the icon) it would be a round rectangle instead of a circle. How can I get the circle to stay a circle when an icon is inside?
CSS:
.icons-box {
text-align: center;
padding: 20px 10px 10px 10px;
}
.icons-box i {
font-size: 44px;
display: inline-block;
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border-radius: 50em;
background: #fff;
padding: 45px 42px;
HTML:
<div style="background:#000;">
<div class="icons-box">
<!-- fa-icon-check is an icon that comes from glyphicons -->
<i class="fa-icon-check"></i>
</div>
https://jsfiddle.net/1vox25o7/
Here are some Boot strap glyph-icons within Circle:-
<style>
.btn-round {
width: 40px;
height: 40px;
border-radius: 50%;
}
.btn-round.btn-lg {
width: 48px;
height: 48px;
}
.btn-round.btn-sm {
width: 34px;
height: 34px;
}
.btn-round.btn-xs {
width: 24px;
height: 24px;
}
</style>
<!-- large buttons -->
<button type="button" class="btn btn-default btn-lg btn-round"><span class="glyphicon glyphicon-retweet"></span></button>
<button type="button" class="btn btn-primary btn-lg btn-round"><span class="glyphicon glyphicon-share"></span></button>
<button type="button" class="btn btn-success btn-lg btn-round"><span class="glyphicon glyphicon-thumbs-up"></span></button>
<button type="button" class="btn btn-danger btn-lg btn-round"><span class="glyphicon glyphicon-thumbs-down"></span></button>
<button type="button" class="btn btn-info btn-lg btn-round"><span class="glyphicon glyphicon-zoom-in"></span></button>
<button type="button" class="btn btn-warning btn-lg btn-round"><span class="glyphicon glyphicon-zoom-out"></span></button>
<!-- default size buttons -->
<button type="button" class="btn btn-default btn-round"><span class="glyphicon glyphicon-music"></span></button>
<button type="button" class="btn btn-primary btn-round"><span class="glyphicon glyphicon-fast-backward"></span></button>
<button type="button" class="btn btn-success btn-round"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" class="btn btn-info btn-round"><span class="glyphicon glyphicon-stop"></span></button>
<button type="button" class="btn btn-warning btn-round"><span class="glyphicon glyphicon-fast-forward"></span></button>
<button type="button" class="btn btn-danger btn-round"><span class="glyphicon glyphicon-volume-off"></span></button>
<!-- small buttons -->
<button type="button" class="btn btn-default btn-sm btn-round"><span class="glyphicon glyphicon-paperclip"></span></button>
<button type="button" class="btn btn-primary btn-sm btn-round"><span class="glyphicon glyphicon-align-left"></span></button>
<button type="button" class="btn btn-success btn-sm btn-round"><span class="glyphicon glyphicon-align-center"></span></button>
<button type="button" class="btn btn-info btn-sm btn-round"><span class="glyphicon glyphicon-align-right"></span></button>
<button type="button" class="btn btn-warning btn-sm btn-round"><span class="glyphicon glyphicon-align-justify"></span></button>
<button type="button" class="btn btn-danger btn-sm btn-round"><span class="glyphicon glyphicon-trash"></span></button>
<!-- extra small buttons -->
<button type="button" class="btn btn-default btn-xs btn-round"><span class="glyphicon glyphicon-user"></span></button>
<button type="button" class="btn btn-primary btn-xs btn-round"><span class="glyphicon glyphicon-stats"></span></button>
<button type="button" class="btn btn-success btn-xs btn-round"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-info btn-xs btn-round"><span class="glyphicon glyphicon-comment"></span></button>
<button type="button" class="btn btn-warning btn-xs btn-round"><span class="glyphicon glyphicon-envelope"></span></button>
<button type="button" class="btn btn-danger btn-xs btn-round"><span class="glyphicon glyphicon-remove"></span></button>