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>
Related
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>
I am trying to add some extra space at the edges of a rounded HTML Table. Here is a picture of what I want to achieve (Notice the extra space on the edges of the table):
https://i.stack.imgur.com/JAm64.jpg
For the extra space on the edges, I tried to add a border with the same colour as the inside, but for some reason, the rounded corners did not come.
Here is my code:
table{
background-color: #FBF85D;
border: 25px solid #FBF85D;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<table class="board" cellpadding="15px">
<tr>
<!-- I am using Bootstrap buttons -->
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
</tr>
<tr>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
</tr>
</table>
You Can Use Padding
Try This
table{
background-color: #FBF85D;
border: 25px solid #FBF85D;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btn-circle{
padding:20px;
outline:none;
border:0;
border-radius:60px;
}
<table class="board" cellpadding="15px">
<tr>
<!-- I am using Bootstrap buttons -->
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
</tr>
<tr>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
<td><button class="btn btn-secondary btn-circle btn-circle-xl"></button></td>
</tr>
</table>
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 three bootstrap button groups with 3 buttons each. I would like them to come below each other so that it becomes a grid of size 3 X 3. Also there should not be any space between two button rows. What's the best way to do it.
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-up fa-rotate-315"></i>
</button>
<button type="button" class="btn btn-default btn-sm"">
<i class="fa fa-arrow-up"></i>
</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-up fa-rotate-45"></i>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-home"></i>
</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-right"></i>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-down fa-rotate-45"></i>
</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-down"></i>
</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-arrow-down fa-rotate-315"></i>
</button>
</div>
You can use display: table; to the btn-group class. may be it will work.
.btn-group{
display: table;
}