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>
Related
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 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>
I've taken this css from this website sub-menu-drop-down-on-mouse-hover-twitter-bootstrap
and this is the code:
/*make the menu sub-menu items drop down on mouse hover */
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
margin: 0;
}
HTML
<ul class="nav navbar-nav" style="padding: 15px;">
<li>
<input autofocus type="text" ng-model="search" class="form-control ignore-max-width" name="mainsearch"
placeholder="Enter Membership Number..." style="font-size: small;">
</li>
<li class="dropdown dropdown-large ">
<a href="#/" class="dropdown-toggle no-padding" data-toggle="dropdown">
<div type="button" class="btn btn-default btn-sm btn-primary">
<span class="home-link glyphicons glyphicons-menu-hamburger"></span>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-large row col-md-12">
<li class="col-sm-11">
<ul style="list-style-type: none; padding: 5px;">
<li>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-link">Left</button>
<button type="button" class="btn btn-default btn-link">Middle</button>
<button type="button" class="btn btn-default btn-link">Right</button>
<button type="button" class="btn btn-default btn-link">Right</button>
</div>
</li>
<li>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-link">Left</button>
<button type="button" class="btn btn-default btn-link">Middle</button>
<button type="button" class="btn btn-default btn-link">Right</button>
<button type="button" class="btn btn-default btn-link">Right</button>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I want to write a custom class so only the dropdown with the that class will display on hover.
Would be good if on hover would work on this tag:
<ul class="dropdown-menu dropdown-menu-large row col-md-12">
Can a CSS guru help me out?
Just change li.dropdown:hover to li.dropdown.yourclass:hover.
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;
}