I want to change bootstrap glyphicon color to "yellow" because current color is showing in white that looks like Delete button. How can i change color of glyphicon-folder-close or use any other glyphicon that display folder image better ?
main.html
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close"></span></button>
You can also change the icon/text by adding to the class "text-success" for green, "text-danger" for red etc. This will change the color of the icon itself.
<span class="glyphicon glyphicon-usd text-success"></span>
Also this has been answered here.
Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
Use color
<button type="button"
class="btn btn-info btn-lg" ng-click="serverFiles()"
style="margin-left: 10px; color:#FF0000;">
<span class="glyphicon glyphicon-folder-close"></span></button>
But remember that it is desirable to avoid the use of inline style is better use classes or references based on external css configuration items
<button type="button"
class="btn btn-info btn-lg mybtn-blue" ng-click="serverFiles()"
style="margin-left: 10px;">
<span class="glyphicon glyphicon-folder-close"></span></button>
edn for external css
.mybtn-blue {
color: blue;
}
Use the following HTML code
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close yellow"></span></button>
And the css code
.yellow {
color: #FFCA28;
}
here is the demo http://jsfiddle.net/S3R23/1217/
You can change color of the icon by directly specifying color name, however this will only apply to targeted icon.
To change the color, do this:
<span class="glyphicon glyphicon-folder-close" style="color:#ffff00"></span>
Just edit the span tag in your code to the one above, making your code to look like this:
<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close" style="color:#ffff00"></span></button>
You can change glyphicon color to any value. see below given example
<span aria-hidden="true" class="glyphicon form-control-feedback glyphicon-ok"></span>
//css
.glyphicon.form-control-feedback.glyphicon-ok{
color: #20032d !important;
}
Related
I am a noob in web design. I have just begun experimenting with Bootstrap. I want to add two buttons
like this,
but, I am getting this on mobile devices
with this code:
<button style = "position:absolute; left:38%; top:50%; z-index=0" type="button" class="btn btn-primary btn-lg">Large button</button>
<button style = "position:absolute; left:53%; top:50%; z-index:0" type="button" class="btn btn-primary btn-lg">Large button</button>
I know I shouldn't add position attributes as they make responsiveness ineffective, but not using them places the buttons like this.
So how should I go about it? How can I specify position without affecting responsiveness?
Thank You!
Thanks to the comment by #zgood, I have it fixed with this:
<div style="width:100vw; height: 100vh; display:flex; align-items: center; justify-content:center">
<button style="margin:20px" type="button" class="btn btn-primary btn-lg">Large button</button>
<button style="margin:20px" type="button" class="btn btn-primary btn-lg">Large button</button>
</div>
Im working with a DataTable that has a column containing two Bootstrap-styled buttons. For some reason the button on the right is slightly smaller than the left one.
Image of said problem
Below the code:
<div class="btn-group">
<button type="button" class="btn btn-success btn-block mr-4" style="font-size:20px"> Hoogbouw</button>
<button type="button" class="btn btn-danger btn-block" style="font-size:20px"> Laagbouw</button>
</div>;
Css:
.dataTable tbody tr {
height: 425px;
}
.btn-group{
width: 100%;
height: 100%;
}
h1{
text-align: center;
}
Anything wrong?
Need you to provide additional code, what you have appears fine but what does each individual button look like in terms of formatting? Colours don't default to red and green.
Hello I need to apply css on a button using value attribute.
But it's not taking the css
button[value=Export List to Excel] {
margin-top: 14px;
background: red;
}
<button type="submit" id="cp_export_excel" name="cp_export_excel" value="Export List to Excel" class="btn btn-warning form-submit icon-before"><span class="icon glyphicon glyphicon-export" aria-hidden="true"></span> Export List to Excel</button>
How will I implement this one. I need to specifically use value attribute only.Can somebody please help.
You must put your value expression in quotes, as your spaces breaks CSS rule match:
button[value="Export List to Excel"] {
margin-top: 14px;
background: red;
}
<button type="submit" id="cp_export_excel" name="cp_export_excel" value="Export List to Excel" class="btn btn-warning form-submit icon-before"><span class="icon glyphicon glyphicon-export" aria-hidden="true"></span> Export List to Excel</button>
So i had a solution to do something like this:
the problem was that everytime i had a little bigger text my button increased, and it became really ugly since i have a section full of buttons that i want to preserve the same size.
So i think a good option would be to mantain the same size for the buttons? (if there is other option would like to know :)).
So i had this:
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br><span class="fontSize">Image</span>
</button>
</div>
how can i change my solution to have the same effect i want on the button, i mean with the image and text centered related to the image mantaining the size of the button? any help i appreciate :)
Thanks
Are you looking for something like this? (I know, it's ugly)
#test{
min-width: 5px;
max-width: 5px;
}
<button id="test">test</button>
Here you go with a solution https://jsfiddle.net/r3g31e11/1/
.btn {
width: 100px;
height: 30px;
text-overflow: ellipsis;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">
Submit
</button>
<br/>
<br/>
<button class="btn btn-primary">
Testisnottoincreasebuttonwidth
</button>
Truncate the extra character use ellipse. Set height & width of the button.
.test {
width : 80px;
}
.test > span {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:40px;
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small test"><span>Test</span></button>
<button class="btn btn-primary-outline btn-small test"><span>Test with large size</span></button>
</div>
I'd like to show a <h4> in line with a <button>:
<h4 style="display:inline-block;">headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
https://jsfiddle.net/punwaew1/1/
Result: the two elements are shown below each other. Why?
Because h4 and .dropdown are on the same level. Set display: inline-block for the elements on the same level to make them align.
h4,
.dropdown {
display: inline-block;
vertical-align: top;
margin: 0;
}
<h4>headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
The default value of display on a <div> element is display:block;. You have to set the display:inline-block; to the <div> too!
Simply add the following rule (https://jsfiddle.net/punwaew1/5/):
div.dropdown {
display:inline-block;
}
Add line style to <div class="dropdown" **style="display:inline-block;"**>
DEMO 1
OR use proper rows and column of bootstrap to get best results and consitency.
Here is your fiddle Just give display: inline-block to dropdown div
https://jsfiddle.net/sesn/punwaew1/4/
This can be done without any extra css. So in-order to make your button inline with your headline, place the button between the <h2></h2> heading tag.
Structure:
<h1>Headline
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
Button
</button>
</h1>
Have a look at your updated fiddle here