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
Related
Trying to change the color of the app's navbar when a certain page is visited. The navbar is defined in the app.component.html file and I am trying to override it in a component's css file.
app.component.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
component.css
:host .navbar{
background-color: orange !important;
}
Expected navbar to change to orange when component is visited. Component in this case is a page in the app.
From the Angular docs, try:
:host(.navbar) {
background-color: orange;
}
You shouldn't need the !important part of the style. Adding the styles in the stylesheet as you have above will scope them very specifically overriding those from the bootstrap stylesheet.
Your app.component is an higher component compared to the other component created, so let your styling be done in your app.component.css
I'm using Bootstrap css as a global style, and then modify it in each component if I need to, in index.htm I have:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
and then in the child I add the style
.nav li a {
padding: 5px 10px;
}
which also overrides the value the parent receives from bootstrap for nav li a, is this considered ok? Maybe I don't really understand the Shadow DOM...
Plunker http://plnkr.co/edit/O2r3zKlYj7SH7FWHvWnT?p=preview
(But you have to launch it on you pc, because I'm not sure how to make "#import '/styles/UIComponent.css';" in customer.component.css work in plunker, this way it imports the css file in header and makes it global. If you change the line to "#import '../styles/UIComponent.css';" (the two dots added) it won't import the whole css, and the emulator will translate it as needed.)
Edit:
It's a bug in current Angular2 beta: https://github.com/angular/angular/issues/6449
This should do what you want
:host .nav li a {
padding: 5px 10px;
}
This way you are limiting the scope of your styles to your child component.
With ViewEncapsulation.None this doesn't work of course because this is about style encapsulation and None disables exactly this.
I always modify Bootstrap by including my custom stylesheet after the Bootstrap one, in this particular case, like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mainstyle.css" rel="stylesheet">
I have a list on the site, some of whose elements also have the class advanced-only.
The list elements have the style in Bootstrap:
.nav > li {
position: relative;
display: block;
}
And the advanced-only class in my custom stylesheet has:
.advanced-only {
display: none;
}
There are other styles such as color and border but they are not relevant here. As you see, the advanced-only elements should be hidden when the page loads, but they are displayed. When I inspect one of these elements, I see that the .advanced-only style is crossed out and the .nav li style from Bootstrap is active. When I deactivate the Bootstrap one from there, then the custom one activates and all is well.
Also, when I do
.advanced-only {
display: none !important;
}
it hides it like it should. However, this would interfere with a bunch of Javascript code (for example, show() and hide() won't work properly with !important elements) so I would like to understand why Bootstrap is overriding the custom style and what I can do about this.
The HTML looks like this:
<ul class="nav nav-sidebar">
<li>
<a>Pending Actions</a>
</li>
<li class="advanced-only">
<a>Hidden stuff</a>
</li>
</ul>
That is because the specificity of your selectors are lower than the Bootstrap selectors. Strongly suggest you reading http://www.w3.org/TR/CSS2/cascade.html#specificity.
The specificity is calculated based on many factors, not just by the order of definition.
For example, this selector .nav > li has an attribute selector and a tag selector, while your rule .advanced-only has only an attribute selector. So your rule is not making affect. Try to make your selector more specific when giving customized styles.
This is because bootstrap's styling is more specific than your custom styling.
To fix this you need to add a more specific selector, e.g:
nav .advanced-only {
display: none;
}
For more reading on CSS Specifity check out this link.
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
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.