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>
Related
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>
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.
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>
How can I make space between buttons in navbar? I usually do that with but it doesn't work now. Here's an JSfiddle of how it looks:
http://jsfiddle.net/W6hEa/
you may try margin-left
here is the code
.btn{
margin-left:10px;
}
here is the example:: FIDDLE
Copy & paste this to your style.css and assign it as class attribute:
.btn-margin-left {
margin-left: 2px;
}
.btn-margin-right {
margin-right: 2px;
}
Usage
Link
<button type="button" class="btn btn-default btn-sm btn-margin-left">Button</button>
You can define spacing inside the class in bootstrap 4.0x.
https://getbootstrap.com/docs/4.0/utilities/spacing/
So for example
<button type="button" class="btn btn-default ml-2>Button</button>