This is my block of code in the HTML part
<header>
<div class="top_line"></div><br/>
<div class="container">
<div class="abcd">Über<span style="color:#2773AE">Tech</span></div>
<div class="top_line"></div>
</div>
</header>
I am using Twitter Bootstrap and I have a custom CSS file linked after the Bootstrap CSS files to apply specific styles to certain parts of my page. Here is my custom css file code:
.top_line {
background-color: #2773AE;
height: 5px;
}
.abcd {
font-size:50px;
line-height:25px;
}
Whenever I try applying style to the abcd class inside the container, the default size of 14px and line-height of 20px mentioned in the bootstrap body tag only comes up. However, the top_line class works fine. I tried .container .abcd, .container>.abcd and many other things, but still I didn't get the font-size and line-height I wanted to achieve as I have given in my CSS code. Inline stylings work though. Can anyone please tell me where I am going wrong?
Thank You
You should verify the depth of the declaration made in the boostrap css file to be sure to write a stronger rule for your abcd class.
Another way is to use not recommended hacks such as : !important , to make sure your declaration is stronger.
for example :
.abcd {
font-size:50px !important;
line-height:25px !important;
}
Twitter bootsrap put a particular class at the label span, you should be put the class abcd inside the label span
Related
I'm having trouble overriding bootstrap's css code.
I have included my own stylesheet AFTER bootstrap's code, but it doesn't seem to be working.
I know that a soft override like simply having a style.css that reads:
a {
color: #c54bb7; (it's a sort of red)
text-decoration: none;
}
probably won't work as bootstrap has more specific css that has priority over that one. However, you can see in this picture the link text is green because of the simple a{} config in bootstrap, and that's it. Which means mine should have priority, as it is after the bootstrap css, correct? I'm not sure what i am doing wrong here. I want all links to be red.
https://i.gyazo.com/bf06b0a3990927ed019bf65873a84d42.png
You can use '!important' to force overriding.
a {
color: #c54bb7 !important; (it's a sort of red)
text-decoration: none !important;
}
Try !important. !important emphasizes that this specific css should be applied and overrides the bootstrap css.
a {
color: #c54bb7; !important
text-decoration: none;
}
Hope it helped :)
use a wrapper div for your entire html code
like
<body>
<div class="wrapper">
<div class="content_area">
content goes here...
</div>
</div>
and style using the wrapper class,
.wrapper a{
color: #c54bb7;
text-decoration: none;
}
I am doing my first steps with Bootstrap Twitter, and need to extend components.
For example, I would like to change the navbar background, but without changing the original css file.
I tried to create a new class .test with the new background:
.test{
background-color: red !important;
}
And I've invoked it in the hmtl as:
<div class="navbar navbar-fixed-top test">
But, it doesn't work.
How can do this?
There are a few ways to customize/extend Bootstrap classes which are all discussed here: Twitter Bootstrap Customization Best Practices
If you intend to override the boostrap styles with your own custom CSS you should avoid using !important as this is generally a bad practice.
In the case of the navbar, the element that has the background-color is navbar-inner so you'd want to override like this:
.test .navbar-inner{
background-color: red;
}
Custom navbar example: http://bootply.com/61032
How to extend/modify (customize) Bootstrap 4 with SASS
I have a Div tag in aspx page
<div id="mainDiv">
...........
</div>
Following style is working for it all right except background-color. Any changes made in following class also work. background-coloris also applied at design time in visual-studio but does not work at run-time. Any reasons?
#mainDiv
{
width:95%;
background-color:Silver;
font-weight:bold;
color:Maroon;
}
Update Instead of background-color:Silver;, I have tried background-color:Silver !important;but no difference. However changing color:Maroon; to color:Blue; affects
Edit I have no other css files for this page only one css file is linked to it
Edit I had two divs inside the mainDiv there style was float:left when I removed float:left I was able to see the changes in background-color of mainDiv. Still do not know the reason
Instead of Silver try using Hexadecimal Color Codes
background-color:#C0C0C0;
There may be some conflict wiith other CSS on that page as this works fine:
<div id="mainDiv">
content here
</div>
CSS
#mainDiv {
width:95%;
background-color:Silver;
font-weight:bold;
color:Maroon;
}
See here: JS Fiddle
Live site.
I'm trying to style the content currently in black under the Upcoming Events heading. I've tried every combination of .vevent-item odd event-1 .description .event-time .event-label I thought might work to no avail. Any ideas?
It should match my other <p> content.
If you are looking to style the following parts: http://i.imgur.com/BW4NR.png
Why not add a new class to those div's? For example:
<div class="event-time foo">...</div>
<div class="foo">...</div>
And in your .css file:
.foo {
background-color: red;
}
For me, just adding the following code into the <head> style tag does the job.
#main div.content div.event-item {
color: #fff;
}
I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.
Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?
I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.
Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.
/* your style */
#anti_twitter a.link {
color: blue !important;
}
/* twitter style */
a.link {
color: red !important;
}
So using the code above, the links would come out blue.
JSFiddle: http://jsfiddle.net/9T9uk/
<div id="myWrapper">
<div id="theDefaultId">
....
</div>
</div>
and you can use #myWrapper #theDefaultId { anything: value !important; }
theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.
This should work.