Is there a way to make the labels on buttons mixed case? I have never seen anything but uppper case on the MDL demo components page.
<button class="mdl-button mdl-js-button mdl-button--raised">
Mixed Case Here
</button>
The reason for this is text-transform: uppercase; in class .mdl-button.
One possible solution may be to add a new class my-mixed_case to your button
<button class="mdl-button mdl-js-button mdl-button--raised my-mixed_case">
Mixed Case Here
</button>
and define it (to reset the text transform):
.my-mixed_case.mdl-button {
text-transform: none;
}
Related
I am using React-bootstrap to style my button, But I am unable to override the btn and btn-danger classes provided by bootstrap. How can I make my class slotTiming-box-button override the btn and btn-danger classes. I want to do this without using ids, or !important. I am allowed to use classNames only.
React code snippet
<Button
className="slotTiming-box-button"
variant="danger"
>
Click Me
</Button>
HTML element formed
<button type="button" class="slotTiming-box-button btn btn-danger">Click Me</button>
An image of the Computed section(in Developer Tools) of the Button is here.
I have tried the answer here, but it wasnt much clear.
Just use CSS for the custom class...
.slotTiming-box-button {
background-color: #990000;
border-color: #661111;
}
.slotTiming-box-button:hover {
background-color: #dd2222;
}
https://codeply.com/p/tXdGmQucvD
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 have a problem here which I want to click button then go to another page. But it does not function
This is my code
<button type="button" class="btn btn-edit btn-sm pull-right" data-toggle="modal" data-target="#modal-editProfile" href="template/home.html">Start Booking Your Room</button>
I do not know why, the button does not function.
please help me, I have wasted my whole day just doing this.
Thanks,
faizal
HTML
The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
Set if necessary CSS display: inline; on the form to keep it in the flow with the surrounding text.
CSS
If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (only IE support is currently (July 2015) still poor).
Go to Google
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
Or pick one of those many CSS libraries like Bootstrap.
JS
If JavaScript is allowed, set the window.location.href.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
Source
Buttons won't redirect you to another page unless you handle that in javascript. If you just want to redirect, you may use anchor tag, see example below:
<a class="btn btn-edit btn-sm pull-right" href="template/home.html">Start Booking Your Room</a>
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: