I'm trying to use this addition to bootstrap buttons. which adds a nifty "label" for the icons at the beginning of the button. but the problem lies when it's a "btn-block" type.
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
here's the jsfiddle I figure it's the
left:-12px;
as the position but how would I determine what negative number it would be if it's block? ideas?
Give text-align:left to the button
<button type="button" class="btn btn-success btn-labeled btn-block btn-custom">
<span class="btn-label">here</span>
problem
</button>
<br/>
<button type="button" class="btn btn-success btn-labeled">
<span class="btn-label">no</span>
problem
</button>
CSS
.btn-custom { text-align: left;}
Fiddle Demo
Related
<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
Remove Driver
</button>
How to add padding in between mat-icon and button title?
I want to keep the button title in the middle of the button and keep the icon in the left corner.
You can achieve this by adding a padding to your button text instead of the icon.
Add a class for the button text in the template.
<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
<span class="button-text">Remove Driver</span>
</button>
Then define button-text in the CSS.
.button-text {
padding-left: 50px;
padding-right: 74px; /* Add 24px to align the text in the center since the icon's width is 24px */
}
For that you need to add span tag for that under button title
<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
<span class="button-title">Remove Driver</span>
</button>
Then just add this .button-title in your CSS file for Styling
.button-title{
padding: 5px 50px 5px 50px;
}
This is Example You Can edit or preview Code Here on StackBlitz
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>
I want btn in navbar (which appeared only toggled) get btn-info color.
I add a btn-info class,
btn's text color changed to white
and btn color was unchanged.
I used default bootstrap 3 css.
bootply - click mobile view
<a class="btn btn-info navbar-toggle" value="Page" href="javascript:win_memo('', '<?=$member[mb_id]?>', '<?=$_SERVER[SERVER_NAME]?>');" onfocus="this.blur()">
<i class="glyphicon glyphicon-envelope"><sup style="margin-left:3px;"><?=$member[mb_memo_unread]?></sup></i>
</a>
you need to use ( !important ) for your btn-info property value, because the (.btn-info)
is overridden by the (.navbar-toggle) class value, so the solution is to add this code to your custome.css file or any file that you use to override the main bootstrap.css file.
code:
.btn-info {
color: #fff;
background-color: #5bc0de !important;
border-color: #46b8da !important;
}
hope this will help you.
Ahmed Na's Answer works well. Great idea.
I add a class btn-info-navbar.
.btn-info-navbar {
color: #fff;
background-color: #5bc0de !important;
border-color: #46b8da !important;
}
and add btn-info-navbar.
<a class="btn btn-info btn-info-navbar navbar-toggle" value="Page" href="javascript:win_memo('', '<?=$member[mb_id]?>', '<?=$_SERVER[SERVER_NAME]?>');" onfocus="this.blur()">
<i class="glyphicon glyphicon-envelope"><sup style="margin-left:3px;"><?=$member[mb_memo_unread]?></sup></i>
</a>
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>