I’m using button element in a bootstrap template.
I was wondering if it is the normal behavior in bootstrap :
When there is not enough space to show all the buttons on one line, or when the window is resized, some buttons are shown on a 2nd line and it’s ok like that but there is no margin-bottom.
I can add it :
.btn {
margin-bottom: 5px;
}
But i find it strange that it is not handled by bootstrap.
Maybe i’m doing something wrong ?
SOURCE : http://jsfiddle.net/Vinyl/zx9oefya/
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
In Bootstrap's buttons.less and button-groups.less there's nothing about margin-top or margin-bottom. Having a margin by default would likely conflict when combining it with other elements (e.g. a form)
I think the best solution might be adding all buttons inside a btn-toolbar and to style that combination:
.btn-toolbar .btn {
margin-bottom: 5px;
}
Just add the spacing class. m for margin and p for padding.
<button class="btn btn-success mr-2" type="submit">Add</button>
<button class="btn btn-danger mr-2" type="button">Delete</button>
so, here mr is margin-right. similarly, you can add do for other cases.
mb-5 = margin bottom ..just add that :) sorted :)
I think that it's the normal behavior ( not 100% sure ) because it's "cleaner" to add margin ourselves when we want it that having to remove the default margin when we don't want it, from my opinion...
http://getbootstrap.com/components/#btn-groups
There's no margin on bootstrap's buttons examples, only on the parent div class btn-group but it's coming from a different stylesheet ( docs.min.css ). So I think it's that way for devs to add their own custom margins.
See here:
Related
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>
Ultimately I'm trying to accomplish the following styles with LESS.
<div class="filter btn-group">
<button class="btn btn-default" type="button" data-filter="*">show all</button>
<button class="btn btn-default" type="button" data-filter=".cd">CD</button>
<button class="btn btn-default" type="button" data-filter=".vinyl">Vinyl</button>
</div>
I have the following HTML
<div class="filter">
<button type="button" data-filter="*">show all</button>
<button type="button" data-filter=".cd">CD</button>
<button type="button" data-filter=".vinyl">Vinyl</button>
</div>
And I have this in a LESS file with imports of Bootstrap 3
.filter {
.btn-group;
button {
.btn;
.btn-default;
}
}
When adding .btn and .btn-default to the button works just fine. But adding .btn-group to the wrapper ".filter" doesn't work. I can't figure out what I'm doing wrong. If I add the class .btn-group manually to the class="filter btn-group" It works.
EDITED
While I couldn't think of a way to fully accomplish what you wanted, with some help and inspiration from #seven-phases-max, I was able to adapt that gist to get your desired result.
To get a picture of how it works, the 'steps' are: First, treat the button selector as .btn.btn-default. Second, find all instances of the .btn-group selector and replace it with .filter. Then, finally, find all instances of .btn within the .filter and replace those with button.
You can accomplish this with extend (available in Less v1.4.0+). Here is a simple example of the less file:
#import "bootstrap.less";
button {
.btn-default();
&:extend(.btn, .btn.btn-default all);
}
.filter:extend(.btn-group all) {}
.filter > button:extend(.btn-group > .btn all) {}
.filter button + button:extend(.btn-group .btn + .btn all) {}
You need to make sure that any extend is placed after your other imports because the extend all acts like (a non-destructive) search & replace. So, the first extend above, for example, finds all instances of .btn within any rule selector and makes a copy of the selector, replacing .btn with button.
The resulting output allows the following to be styled like a btn-group:
<div class="filter">
<button type="button">BUTTON ONLY</button>
<button type="button">BUTTON ONLY</button>
<button type="button">BUTTON ONLY</button>
</div>
CAVEATS
As pointed out in several comments by seven-phases-max, this is going to add a fair bit of additional weight to your output because it's a non-destructive search and replace. It adds about 9Kb to the unminified/uncompressed output.
You cannot use this type of extend the labels for checkboxes or radio buttons with the data-toggle="buttons" attribute as the BUTTON DATA-API inside button.js is looking specifically for the class .btn versus looking for a button element.
I am trying to take the Bootstrap justified grouped buttons style and create divs that will appear like grouped buttons will be just result in non-link divs. I am using it as a "steps" representation, so button one would be highlighted with text symbolizing that we're on step 1, or button two would highlight when you're on step 2. Please see my attached image here for an example.
The buttons I screenshotted work wonderfully as stage indicators, but I don't want users to be confused and think they should be linking to something. I've tried replacing the button input with spans as follows:
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<span class="btn btn-default">Q&A</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-info">Proposal Submissions</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-default">Best & Final Offers</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-default">Final Selection</span>
</div>
</div>
I don't know if this is even the way I should be going about this, or if there's a standard way to do this with divs. I also tried using divs with the btn classes instead of buttons or spans, same result, it still becomes a link. I am happy to keep using the button classes so long as I can remove the link effect when a cursor is hovered over it.
Thanks for your help.
I would suggest you to see if bootstrap has a component like breadcrumb, because that makes more sense for your use case. But if you want to hack something quickly, you can override btn classes. You could give the parent a class like c-steps and then override the styles for the btn groups:
html
<div class="btn-group btn-group-justified c-steps" role="group">...
css
.c-steps .btn-group,
.c-steps .btn.btn {
text-decoration: none;
/* other override styles */
}
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.