I have a button and trying to give to style properties for it in the same html statement but not getting the correct output.
<button style="color:yellow" style="background-color:blue" type="button" onclick="alert('Hello world!')">Click Me!</button>
I want to give text color as yellow and background color as blue in this html code only without using any kind of css. How should I do it?
You need to keep all of your style properties in a single tag and separate them with semi-colons.
<button style="color:yellow; background-color:blue;" type="button" onclick="alert('Hello world!')">Click Me!</button>
You should use style only once. Use a semicolon between each properties.
<button style="color:yellow; background-color:blue;" type="button" onclick="alert('Hello world!')">Click Me!</button>
another way is to assign a class to it and enter the required values there
<button class="btn" type="button">Click Me</button>
then in its css file
.btn{
background-color:blue;
}
Try this one:
.BtnStyle
{
color:yellow;
background-color:blue;
font-size:30px;
}
<button class="BtnStyle" type="button" onclick="alert('Btn Class Style Sample!')">Please Click!</button>
Related
I added a button code from bootstrap which goes like this:
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Start Javascript
</button>
due to this code button color is red and i want to change that into orange for that i added a css file and linked that with html which goes like this:
.btn btn-danger {
background-color: orange;
}
but still color of button is red insted of orange
Correct CSS rule is
.btn.btn-danger {
background-color: orange;
}
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’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:
Im having MVC5 Application with bootstrap3 and I want to use tooltip which is not the standard like following which is simple one ,how can I do that?
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="some text">Tooltip on left</button>
For example how should I change the tool-tip background to blue and the text to white?
Customize the tooltip styling with:
.custom-tooltip + .tooltip > .tooltip-inner {
background-color: blue;
}
.custom-tooltip + .tooltip > .tooltip-arrow {
border-right-color:blue;
}
Having added the custom class to the trigger element:
<button data-toggle="tooltip" data-placement="right"
data-original-title="Tooltip on right"
class="btn btn-default custom-tooltip">Blue Tootlip</button>
NOTE: to style the caret colour as well (which I assume you want to), you need to make sure to style only the corresponding border-direction-color:blue, otherwise it gets weird.
Here's an example: http://www.bootply.com/dirAtPOnPa
To use the Bootstrap tooltip you don't set the "title" attribute, you set "tooltip":
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-tooltip-placement="left"
data-tooltip="some text">Tooltip on left</button>
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>