basically I have a structure similar to this one:
<a class="elementHovering" >
<span dropdownToggle mdbWavesEffect type="button" class="nav-link waves-light font-weight-bold texto_menu" mdbWavesEffect>Visión</span>
</a>
<div class="other_class">
<span>
<div class="elementMove">
</div>
</span>
</div>
how can I indicate by means of css that when I hovering in the element with class "elementHovering" that the element with class "elementMove" moves?
this is my code:
https://jsfiddle.net/64y1ftrx/
Use the adjacent sibling combinator +:
.elementHovering:hover + div.other_class .elementMove {
top: 200px;
border: 1px solid blue;
}
The btn-default color is white.But I am unable to change the color of the btn-default
<div class="pageOne">
<h1 class="text-center" id="header_text"> a Good Tree production </h1>
<div class="btnList">
<a class="btn btn-default" href = "#"> a Good Tree production</a>
<a class="btn btn-default" href = "#"> About Us</a>
<a class="btn btn-default" href = "#"> Contact Us</a>
<a class="btn btn-default" href = "#"> Works</a>
</div>
</div>
Here is the CSS
.btn-default{
background-color: black !important;
}
#header_text{
font-family: 'Boogaloo', cursive;
color: white !important;
}
Could anyone help me with this.
The Bootstrap CSS is overriding yours. You need to provide a higher-level CSS selector, like:
#header_text .btn-default {
background-color: black !important;
}
This is higher-level than the Bootstrap selector, which is:
.btn.btn-default {
/* Whatever their CSS is */
}
I am using bootstrap 3. I want to change button color when I click on button.I mean button should be in different color when it is selected. How can I do this using css?
My codes are :
<div class="col-sm-12" id="">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
CSS has different pseudo selector by which you can achieve such effect. In your case you can use
:active : if you want background color only when the button is clicked and don't want to persist.
:focus: if you want background color untill the focus is on the button.
button:active{
background:olive;
}
and
button:focus{
background:olive;
}
JsFiddle Example
P.S.: Please don't give the number in Id attribute of html elements.
CSS has many pseudo selector like, :active, :hover, :focus so you can use.
.btn{
background: #ccc;
} .btn:focus{
background: red;
}
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
JsFiddle
HTML--
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
css--
.active{
background:red;
}
button.btn:active{
background:red;
}
jQuery--
jQuery("#my_styles .btn").click(function(){
jQuery("#my_styles .btn").removeClass('active');
jQuery(this).toggleClass('active');
});
view the live demo on jsfiddle
Question
I want to access the span text and change its color.
How can I do this in the following setup?
Code
<div class="element">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-play" ng-if="true">button</span>
</button>
<span class="title">Change this color</span>
</div>
Suggestion
span.glyphicon.glyphicon-play[ng-if="true"] span.title {
color:red;
}
This doesn't work unfortunately.
JSFiddle
http://jsfiddle.net/916g3bea/2/
Try this:
span.glyphicon.glyphicon-play[ng-if="true"], span.title {
color:red;
}
I am now using Twitter Bootstrap 3 RC2 as well as Twitter Bootstrap which has moved into a separate repository. I have noticed, if used in a button with text the icon is not centered very well:
The icon and the text have the same bottom line, but I believe for a good looking button the icon should be centered based on the text, shouldn't it? Any idea how to achieve this?
http://bootply.com/74652
Move the text out of the <span> with the glyphicon and apply vertical-align: middle; to the <span>
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
</button>
Demo
This works in Bootstrap 4 with Font Awesome icons like so
<button class="btn btn-default" style="vertical-align: middle;">
<i class="fa fa-times"></i> Centered
</button>
Apply a vertical-align: -{N}px; style on the .glyphicon-th to shift it N pixels up/down.
For some vertical-align might not work due to positioning: If you look into .glyphicon class you'll see it is set to relative, try setting it to 'inherit' e.g:
.glyphicon.v-centered {
position: inherit;
vertical-align: middle;
}
This should also work for icons not in buttons, e.g. tabs.
Try vertical-align: middle; on .glyphicon-th:before
None of the methods above worked well for me by themselves, but using display: inline-block; vertical-align: middle on the elements did. It's the inline-block that seems to be key.
.vcenter * {
vertical-align: middle;
display: inline-block;
}
.btn i {
margin-left: 10px;
font-size: 20px;
}
with
<div class="vcenter">
<button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
<button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
<button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
</div>
See http://www.bootply.com/UbY78zM8pD for live example.
I managed to do it like this:
.glyphicon.center:before {
vertical-align: middle;
}
and use <span class="glyphicon center glyphicon-th"></span>.
Problem: Glyph icon was 2 px too high above the button text. Fixed it as follows using examples here. Thank you (Alastair Maw).
I managed to get mine working as follows:
HTML
<div class="col-xs-12">
<a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard">
<span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information
</a>
</div>
CSS
#panelTopic .glyph_Credit {
vertical-align: middle;
display: inline-block;
padding-bottom:6px;
}
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
<span style="font-size: 17px;">Not Centered</span>
</button>
please increase or decrease the font size according to your requirement
Other way
<button class="btn default" id="IdBack">
<i class="glyphicon glyphicon-hand-left"></i>
<b>Back</b>
</button>
Add a margin of the specific pixels or percentage. In my app, this worked beautifully, based on the dimensions of the area.
CSS:
.someWrapperClass button span {
margin-top: 120%;
}
HTML:
<div class="someWrapperClass">
<button type="button" ng-click="SomeMethod()">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>