I'm doing a bit of testing on a project I'm working on and on Firefox, I have this button which looks like this:
instead of looking like this(in Chrome)
The code is straight forward:
<button class="btn btn-lg btn_social_login">
<i class="logo fa fa-facebook"></i>
Register with Facebook
<i class="arrow fa fa-chevron-right"></i>
</button>
With the left i float:left and the right i float:right. Page can be seen there http://kaboodle.io/sign_up . Can anyone tell me why this is happening on Firefox?
Changing :
white-space:nowrap;
Which is default on the .btn class in bootstrap
to:
white-space: normal;
fixed it.
Related
I am trying to align the bootstrap 3 icons to center inside the buttons and they are aligning to the right, but only in IE 8. Here is my code:
<button class="btn btn-success btn-circle btn-lg" type="button">
<i class="fa fa-trophy" style="font-size:30px;"></i>
</button>
I have tried adding margin-right:-5px to the style inside
<i class="fa fa-trophy" style="font-size:30px;"></i>
but that does not work. This is what it looks like right now in IE8.
Try adding this to your CSS:.fa {position: relative; left: -5px\9}
I am just pasted Font Awesome into the head of my WP themes header.php
And I know the fonts are working, but in the HTML I think I have made a mistake and I just cannot see what!!
http://goo.gl/Yoit33 - there is row of rounded boxes, 2nd row down, second in from the right.
any help I would be most grateful.
You need to remove the classes .fa and .fa-wheelchair from the a tag as the icon is actually being loaded in through the i tag.
From this:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="fa fa-wheelchair icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>
To This:
<a href="http://www.synaxishosting.co.uk/test/mob/vat-exemption/" class="icon-5x btn rounded">
<i class="fa fa-wheelchair"></i>
</a>
In Twitter bootstrap 3, I have some glyphicons in my divs and I add "pull-right" for default pages.
When I change direction to RTL texts etc. flips successfully but pull-right doesn't switched to pull-left.
What should I do to have an icon in right for LTR and in left for RTL ?
(Of course it is possible to add javascript code and check for all pull-rights in page body and change them to pull-left, but I don't prefer JS solution. I tried this but it didn't help.)
Fiddle:
http://jsfiddle.net/mavent/dKPE3/1/
<div id="div1" class="alert alert-info">This is my fancy description <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>
<div id="div2" class="alert alert-info">هذا هو بلدي وصف الهوى <span class="badge badge-info">122</span><a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa"><i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i></a>
</div>
You can override .pull-right class to float to the left when it appears after an rtl element.
Like this:
.rtl {
direction: RTL;
}
.rtl .pull-right {
float:left !important;
}
And your div element:
<div id="div2" class="alert alert-info rtl">
هذا هو بلدي وصف الهوى
<span class="badge badge-info">122</span>
<a class="btn btn-lg pull-right" style="padding:0;" data-toggle="collapse" data-target="#aaa">
<i class="glyphicon glyphicon-chevron-down twitp_toggleable_chevron"></i>
</a>
</div>
Here is a FIDDLE
Alternatively, you can do it using javascript: (Using your same code just add javascript)
$(document).ready(function() {
$('.pull-right').each(function() {
if($(this).parent().css('direction') == 'rtl')
$(this).attr('style', 'float:left !important');
});
});
Hope this helps.
I don't know if this might help you but you can use this Demo, i.e. overriding the pull-right class
css
#div2 {
direction: RTL;
}
#div2 .pull-right {
float: left !important;
}
I'd suggest looking into this library. It is built on the Bootstrap core, and right-to-left support is included.
Another option to use this stand-alone library.
You could use RTLCSS to generate a complete RTL version of your CSS, It gives you the ability to extend its functionality to support custom scenarios. Plus it has support for CSS3 transforms (matrix, translate, rotate ... etc.).
Problem:
A button group I've created using bootstrap css appears cut off on the left, as you can see below.
Code:
I have the following HTML logic:
<div class="span5">
<div class="row show-grid">
<div class="btn-group>
<button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown">show info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><div id="address"><?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?></div></li>
<li><div id="logs"><?php echo anchor("mycontroller/method2/",'logs'); ?></div></li>
<li><div id="status"><?php echo anchor("mycontroller/method3/",'status'); ?></div></li>
</ul>
</div>
<br/>
<div class="span2"><?php echo anchor("mycontroller/method4/","Back to List")?></div>
</div><!-- end class row show-grid-->
<br/>
</div>
What I've Tried So Far:
I've been using Firefox's Inspect tool to try to find the differences between the top button and the bottom, but I don't know what property I should be looking for. I've tried modifying properties like:
padding-left
padding-right
margin-left
margin-right
I've also tried to reduce the number of classes applied to the button so that I only had:
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
But that didn't resolve the problem. Can someone point me in the right direction? Perhaps by naming the types of properties I should be tracking down? It's probably a CSS specificity problem... because I haven't modified any of the bootstrap stuff.
Thanks
Why are you using a button group for buttons that aren't grouped together? The reason it's "cut off" is because button groups are supposed to be merged together.
Regardless, it's displayed like that because the inner borders of the buttons don't have rounded edges. You can fix it by manually applying the border radius:
border-top-left-radius: 4px; border-bottom-left-radius: 4px
Give this CSS
.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}
this is a hack fix but on the containing div that is wrapped around the button - you may simply have
overflow:hidden
Inspect in chrome with firebug and go up and you will most likely see this.. Bootstrap hides data that overflows the columns.
OMG,
the answer is:
to change from:
<div class="btn-group>
to:
<div class="btn-group">
You forgot the "
You can see the live fix here: http://jsfiddle.net/kCsEs/
Following solved my problem
.btn {
width:auto !important;
}
If I want to minimize icon size, how can I make icon small when using bootstrap?
This is demo http://jsfiddle.net/AqUBu/
I'd like to minimize the size of this human icon.
<span class='badge badge-success'><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i><i class='icon-user icon-white'></i></span>
If you are using Bootstrap 3, you can use the <small> tag, like this: <small><span class="glyphicon glyphicon-send"></span></small>
It works perfectly with Bootstrap 3.
Glyphicons and other icons can be re-sized precisely with the CSS property font-size:
You know... being glyphs and all.
You can use class="btn btn-xs"
Reference: https://getbootstrap.com/components/
From http://getbootstrap.com/css/#small-text
Small text
For de-emphasizing inline or blocks of text, use the
<small> tag to set text at 85% the size of the parent. Heading
elements receive their own font-size for nested <small> elements.
You may alternatively use an inline element with .small in place of
any <small>.
Try:
<span class='badge badge-success small'>
<i class='icon-user icon-white'></i>
<i class='icon-user icon-white'></i>
<i class='icon-user icon-white'></i>
</span>
None of the above worked for me, I am using a combination of Bootstrap 4 and FontAwesome icons. I discovered Bootstrap 4 has it's own class to make smaller buttons:
<button class="btn btn-sm btn-secondary ">
<i class="fa fa-pencil"></i>
</button>
Bootstrap 4 button documentation (#Sizes)
If you want to make a button any smaller than this you will probably have to make some custom css, as simply changing the icon's size will no longer modify the size of the wrapping button.