In Chrome/Safari my icon within a bootstrap button looks fine:
But in Firefox, the icon drops down a line:
I have the fontawesome icon floated right within the <button>.
<!--html-->
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-small">Cached logs<i class="fa fa-money"></i></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
</div>
</div>
<!--style-->
i.fa {
float: right;
top: 2px;
position: relative;
font-size: 12pt;
}
.glyphicon, i.fa {
color: rgb(90, 90, 90);
top: 1px;
}
How can I make the Firefox version one-line like the Chrome?
JSBIN
Move the icon to the left of the text. I'm not sure of the underlying cause of it not being consistent how you've got it - but this does make both browsers render it consistently.
<button type="button" class="btn btn-default btn-small"><i class="fa fa-database"></i>Logs on mount</button>
Instead of
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
Related
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>
I have this modal footer with a <label></label> which displays message on successful operation. But, the properties are inherited so the style for centering is not working. I am using Bootstrap 3.3.7
<div class="modal-footer">
<label type="text" id="resultmessage" style="color: white; vertical-align:middle;"></label>
<button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
Add a more specific CSS selector to override bootstrap styles (.modal-footer is set to text-align: right by default.).
div.modal-footer {
text-align: center;
}
Also, you can switch label order to last element inside of .modal-footer if you wish for it to be on the right side of buttons (changed color to gray just for visibility).
Snippet:
div.modal-footer {
text-align: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="modal-footer">
<button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
<label type="text" id="resultmessage" style="color: gray; vertical-align:middle;">Database updated</label>
</div>
If you wish to only center the message, you can do (tweak values to your benefit):
.modal-footer button {
margin-top: -48px;
}
#resultmessage {
display: inline-block;
width: 100%;
text-align: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="modal-footer">
<label type="text" id="resultmessage" style="color: gray; vertical-align:middle;">Database updated</label>
<button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
In my opinion, using label as not label for nothing is not good pratice. I'm quessing that u want this information ('Database updated') aligne vertically (you have tried to use vertical-align - it only works for tables). Instead of using label, better is to use for example span.
I did it like below:
https://codepen.io/Czeran/pen/BdWbjg
HTML
<div class="modal-footer">
<span id="resultmessage">Database updated</span>
<div class="tools">
<button type="button" id="updateWorksStatus" class="btn btn-success btn-sm">Update Status</button>
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
</div>
<span></span>
</div>
CSS (edited)
.modal-footer {
position: relative;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
}
#resultmessage {
font-weight: bold;
}
.tools {
position: absolute;
right: 15px;
}
I'd like to create a vertical button group, containing a horizontal button group, and a few buttons inside. My attempt looks like this:
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
<button type="button" class="btn btn-primary">Row 2</button>
<button type="button" class="btn btn-primary">Row 3</button>
</div>
I want button Row 1.1 and Row 1.2 to be in one row.
Enclose your button group in a row class:
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
</div>
Check the Codepen. You might wanna change the width/border the way you want it.
EDIT
As for the buttons not being rounded, here's the class responsible for it, you can change it:
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
From bootstrap.css, the btn class has a border-radius: 4px :
.btn {
...
border: 1px solid transparent;
border-radius: 4px;
}
You can either remove all the radius or change the second button to have the same border-radius
New Codepen
I've used a normal bootstrap 3 button group in a size one column, e.g.
<div class="col-sm-1">
<div class="btn-group">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
This is vertical when there is space, but when it drops to a new row it becomes horizontal. My only problem is that when vertical it looks a bit odd. I've tried playing with the CSS to no avail, does anyone have advice? I don't mind making it fully square so horizontal/vertical are similar, but my efforts to do this have not worked
If fully square buttons are ok to you, something like this should work:
CSS:
#group button:first-child, #group button:last-child {
border-radius: 0;
}
#group button:first-child {
margin-left: -1px;
}
HTML:
<div class="col-sm-1">
<div id="group" class="btn-group">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
I had created something like this before.
DEMO: http://jsbin.com/vahaq/1/
Assumes vertical on 768px and up, which is what it is, so I've just modified the styles below that min-width.
HTML (same as yours but with btn-group-vertical and btn-group-custom)
<div class="col-sm-1">
<div class="btn-group-vertical btn-group-custom">
<button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
This is more elaborate as it kicks in and kicks off for really good responsiveness:
#media (max-width:299px) {
.btn-group-vertical.btn-group-custom > .btn {
float: left;
width: auto;
width: 25%;
min-height: 50px;
min-width: 50px;
margin-top: -1px!important;
}
.btn-group-vertical.btn-group-custom .btn + .btn {
margin-left: -1px;
margin-top: 0;
}
.btn-group-vertical.btn-group-custom > .btn:first-child {
margin-top: 0;
margin-left: -1px;
border-radius: 0;
}
.btn-group-vertical.btn-group-custom > .btn:last-child {
border-radius: 0
}
}
#media (min-width:300px) and (max-width:767px) {
.btn-group-vertical.btn-group-custom > .btn {
float: left;
width: auto;
border-top: 1px solid #ccc;
}
.btn-group-vertical.btn-group-custom .btn + .btn {
margin-left: -1px;
margin-top: 0;
}
.btn-group-vertical.btn-group-custom > .btn:first-child {
border-radius: 4px 0 0 4px
}
.btn-group-vertical.btn-group-custom > .btn:last-child {
border-radius: 0 4px 4px 0
}
}
How do I make bigger Glyphicons in twitter bootstrap 3.0 (not 2.3.x).
This code will make my glyphicons big:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-th-list">
</span>
</button>
How can I get this size without using the btn-lg class while using only a span ?
This gives a small glyphicon:
<span class="glyphicon glyphicon-link"></span>
You can just give the glyphicon a font-size to your liking:
span.glyphicon-link {
font-size: 1.2em;
}
Here's how I do it:
<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>
This allows you to change size on the fly. Works best for ad hoc requirements to change the size, rather than changing the css and having it apply to all.
The .btn-lg class has the following CSS in Bootstrap 3 (link):
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
If you apply the same font-size and line-height to your span (either .glyphicon-link or a newly created .glyphicons-lg if you're going to use this effect in more than one instance), you'll get a Glyphicon the same size as the large button.
<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>
<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>
In my case, I had an input-group-btn with a button, and this button was a little bigger than its container. So I just gave font-size:95% for my glyphicon and it was solved.
<div class="input-group">
<input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
<div class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
</button>
</div>
</div>
Write your <span> in <h1> or <h2>:
<h1> <span class="glyphicon glyphicon-th-list"></span></h1>
If you are using bootstrap 3, use tag, like this <small><span class="glyphicon glyphicon-send"></span></small> It works perfect for Bootstrap 3.
You can even use multiple <small> tags to set the size more smaller.
Code:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>