<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
I'm building a web page. The style of the web page uses bootstrap. In the following is some css. However, as shown in the picture above, the middle line is not applied. Can you tell me why?
The strikethrough basically means that the style you are trying to apply is overridden by another style that applies these styles to the same element.
This could be because you called bootstrap which overrides your style declaration. This could be overcome by linking your .css file after linking bootstrap CSS or you could use the !important keyword after each style which will force your style.
.card-danger{
background-color: #d9534f !important;
border-color: #d9534f !important;
}
If this doesn't work, then link the style file after the bootstrap css.
I don't know more about this because I don't know the structure of the element you have used to style. It is more advisable to not use '!important' as it is bad engineering and later on the project, you will get the same kind of errors but it will get the job done I hope.
Related
I want to change the style of a commonly used component whose style is applied by framework, only in one case (component). I'm using Devextreme as framework with React JS.
I can mutate the corresponding class (.dx-texteditor.dx-editor-filled::after) in browser Inspect. Changing the style of the class in the main CSS or any other CSS file will be applied to all similar components. Also, if I use module.css, it doesn't work because I don't apply the class myself (It is applied by framework). What is the best way to change the style of such a class only for a specific component?
What is module.css? I'm going to assume it's your own CSS file...
I don't know if it will help, but the application of a style sheet depends on the order given in the page.
So your CSS file should be placed after that of DevExtreme's CSS files, if I'm not mistaken.
This means that you should therefore obtain an order like this:
<head>
<!-- ... -->
<!-- DevExtreme -->
<link rel="dx-theme" data-theme="generic.light" href="css/dx.light.css" data-active="false">
<link rel="dx-theme" data-theme="generic.light.compact" href="css/dx.light.compact.css" data-active="false">
<!-- Customs CSS -->
<link href="css/module.css" />
</head>
The 2nd solution to test, but which I do not recommend at all, is to put !important after your CSS properties:
.dx-texteditor.dx-editor-filled::after {
color: red !important;
}
Otherwise you have to go through your own CSS class and add it to the DevExtreme component.
I specify that I have not tested these solutions, but these are some leads that I can give you
I deployed my node js + react app to heroku and for some odd reason some css styles are being overwritten by bootstrap style. (the font too) This worked just fine in development.
I am using separate css files for each react component.
What can be the cause? I noticed that this problem is only with the App.css file. The rules there are being overwritten by bootstrap rules.
How would you suggest to debug this?
There are a few options...
First make sure you link to the bootstrap css before your own styles
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="mystyle.css"/>
CSS applies rules based on how important it reads the code. Including more specific selectors makes css more likely to apply the style. Applying style to an id will apply over applying the style to just an a element.
Using inheritance can also give a style more importance. If you have an li class .nav-item inside a nav tag, using nav>.nav-item will apply the style.
There is also an !important flag in css, so you could use text-align: center !important. This will override any styles. That being said, !important is a poor development practice so I would not recommend using it, especially if there are multiple developers working on your project. See this answer
Currently, I'm trying to code a website with a slideshow shown in this w3school tutorial here : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
The example as shown has their own set of CSS to enable the transitions and effects of the slideshow to be smoothly fading in and out. Upon adding CSS bootstrap, the effects of the slideshow got rough and the transition isn't smooth anymore.
CSS used : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
I linked it before my css file like this :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
followed by
<link rel="stylesheet" href="css.css" type="text/css">
From previous examples I searched, many said to put bootstrap before my own css file so that my own codes will not be overwritten. But I've tried but it does not work in this case. Could anyone advise me on this? Thank you.
Try adding !important to the CSS rules you don't want to be affected.
Try using your browser's inspection tool to see what CSS rules are applying to each element
See for more here:
https://stackoverflow.com/questions/9245353...
you need to namespace the class names used in the slideshow, so that it wasn't affected by the bootstrap styling. It's hard to deal with bootstrap specificity in case classnames override.
My suggestion is to use something like w3_slideshow_ and prefix all the class names with it. class="text" will turn into class="w3_slideshow_text", etc. Then update styling and js accordingly.
If there are still some issues, check the inspector for specificity and override the styling applied by bootstrap with !important (not the cleanest approach) or by applying a more specific selector.
As Giann Dall mentioned, you could try adding !important
I think your CSS attributes may be overwritten by CSS from bootstrap because it is more specific.
For example:
body > p {}
is more specific than
p {}
Therefor, body > p {} is applied
My jQuery UI calender's css styles are overridden by the bootstrap css styles.
See the following snapshot... the calendar's year text color is not black.
The reason is, bootstrap css are overriding the jQuery css. In browser developer view, if I uncheck the style marked in red, then the style in green arrow gets enabled and everything looks normal.
Question:
How should I fix this issue in the css? Any suggestion is appreciated.
There are various rules governing the order that CSS is processed in. Generally, when two rules apply to the same element, the rule called LAST will supercede the rule called FIRST.
Thus, in your case, I would suggest loading jquery-ui.css after bootstrap.css.
The order in your <head> should be:
<link rel="stylesheet" href="path/to/bootstrap.css">
<link rel="stylesheet" href="path/to/jquery-ui.css">
Notes:
Another reason why jquery-ui.css should be place after bootstrap.css is style structure. Bootstrap.css governs the entirety of your document, it is a style and structure framework, while jquery-ui.css is intended to apply only to select elements.
Alternatively, if your aim is to modify the jQuery UI element, I would recommend creating a custom stylesheet (also placed after both documents), as opposed to altering jquery-ui.css or bootstrap-ui.css. However, this is just to maintain a best practice approach.
And as a final (and sloppy) alternative, apply !important to the style you wish to use to override, like so: color: #fff!important;
Im playing around with the front end of a site using the new bootstrap 3.0 and im fine tuning things by irritating in firebug, but there is something odd that i keep noticing
even though my <head> is layed out like this
<link rel="stylesheet" href="bootstrap.css">
<style>
td {padding:0px;}
<style>
With the external css being declared before the internal (which im only using during development) the external styles are still over riding them.
To get the padding:0px; to work i need to set it as padding:0px !important;
Any ideas why this is.. i thought that the last declared peice of css would always override conflicting previously declared css.
CSS precedence is about !important, origin (user vs browser), specificity and then order. Here is a good explanation.