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}
Related
I'm trying to align a close icon for a BootstrapVue tab with Bootstrap 4.2 in the top right corner.
<b-tab v-for="order in tabs" :key="order.id">
<template slot="title">
<span class="float-left">{{ order.name }}</span>
<b-button type="button" class="close float-right" aria-label="Close" #click="closeTab(order.id)">
<span aria-hidden="true">×</span>
</b-button>
</template>
...content....
</b-tab>
However, not only does it not align right as expected, the tab appears cut off when focussed:
What I want is for that X to appear in the top right corner of the tab.
How do I do that and make the tab look normal when active?
If you are using BS4 then you can add this styling to make close button on top right
<button type="button" class="p-4 position-absolute top-0 right-0">
<span>×</span>
</button>
In this case css position property is your friend
template {
position: relative;
}
template button {
position: absolute;
right:0px;
}
I currently have a few buttons on a line that I have horizontally but would like to add margins to push the buttons away from each other.
I was editing my code in a smaller window and the buttons were spaced fine using CSS margins, but when I maximized the window I noticed that the margins between the buttons either pushed some buttons to a new line or pulled them back.
I haven't been able to find a way to set margins for these buttons on the same row in a responsive way so they don't push to a new line or pull back.
Any ideas?
HTML
<button type="submit" class="btn btn-primary btn-lg btn-submitpadding">Submit</button>
Select All
Deselect All
<a class="btn btn-info btn-infospacer" role="button" data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo">More Info</a></button>
CSS
.btn-selectspacer {
margin-left: 40em;
}
.btn-infospacer {
margin-left: 2.25em;
}
.btn-submitpadding {
padding-top: 7px;
padding-bottom: 7px;
}
Image
Button Spaced with margins horizontally
Thank you,
Alex
You can do this by using the grid system that comes with Bootstrap. For example the Submit taking up 9 col's, the select/all taking up 2 and then more info taking up 1. And then just align the submit button to be on the left of the column.
This is very simple solution for what you need. I tried out my self, results are just like you want in attached image.
As if you are testing it in very large devices, I would recommend you to download the following bootstrap css for extra large devices.
BOOTSTRAP CSS FOR EXTRA LARGE DEVICES
Put this css below your bootstrap css file and you can then use another column class like "col-xl-numbers of columns". For your specific case i am adding "col-xs-12" to the button div.
Note: Upcomming Bootstrap 4 has built in class for extra large devices.
You css should only be
.btns-right {
float:right;
margin-right:5%;
}
.btn-submitpadding {
padding-top: 7px;
padding-bottom: 7px;
}
and your html should be
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<button type="submit" class="btn btn-primary btn-lg btn-submitpadding">Submit</button>
<div class="btns-right">
Select All
Deselect All
<a class="btn btn-info btn-infospacer" role="button" data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo">More Info</a></button>
</div>
</div>
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.
Is there an easy way to add some margin between the twitter bootstrap btn-group-vertical buttons, and to make them all have rounded corners?
My first attempt was to just add some margin between them, using css, but then I saw that, except for the first and last one, none of them had rounded corners, so instead of "playing on", I hope there is a "decent" way to accomplish this...
I think this is the easiest way to do that.
CSS
.btn-group-vertical > button{
margin-bottom:10px;
border-radius:10px !important;
}
Working Demo
With Bootstrap 5.1 you can now use the gap utilities to achieve this:
https://getbootstrap.com/docs/5.1/utilities/spacing/#gap
<div class="btn-group-vertical gap-3">
<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-dark">Button</button>
</div>
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.