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
Related
<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.
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
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;
I saved and am using the bootstrap css but it conflicts with my main css.
it has tags body, html, a, img, p... and my css loses configuration
how can I use the bootstrap css without colliding?
thank you
Try importing your custom CSS after Bootstrap CSS.
In CSS, the “!important” suffix was originally intended to provide a method of overriding author stylesheets. Users could define their own “user stylesheets” and could use this suffix to give their rules precedence over the author’s (website creator’s) styles.
Unfortunately, and quite predictably, its usage has spread massively, but not in the right direction. Nowadays, it’s used to counteract the pain of having to deal with CSS specificity, otherwise known as the set of rules which dictate that “div h1 a” is more specific selector than “div a”. Most people that use CSS on a daily basis don’t know enough about CSS specificity to solve their problems without using the “!important” suffix.
1.over ride those styles in your css file by using !important property. bootsrtap css either override or extend your css with bootstrap css so if you want to override entire css of some class best to use !important property.
2.if your are using script in your code so its very easy to differentiate the css styles.
Try combining into one CSS, multiple CSS slows down the sites.
Even, Bootstrap has its own body,html, etc tags. You have to edit them or delete/comment them. So it avoids conflicts.
Generally, the last CSS property will be applied, so if you put your body, html etc at the end of Bootstrap.css, that might work, but not recommended.
I am currently using Twitter Bootstrap in developing an web app. Now I also need to use jqgrid for the same app. So, I have a couple of CSS included for a page.
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/flick/jquery-ui-1.8.19.custom.css" rel="stylesheet">
<link href="../css/ui.jqgrid.css" rel="stylesheet">
However, the grid table generated by jqgrid on the page looks a bit odd since you find Twitter-ish cells in the jgrid table.
So I am wondering if there are any ways to disable one CSS out of several CSS files that I include for a certain element of the page? This time, I want to disable bootstrap css for div tag with id=grid where the grid will show up.
Pretty vague, but here's your solution: use the dev tools in your browser of choice, but i'm going to explain using Chrome:
hover over the affected jqgrid table and click inspect element. dev tools will open up and you should see all the styles being declared on that element, from the separate stylesheets.
if you see any styles crossed out (being overridden) that come from jqgrid, you need to out specify them in your jqgrid style sheet, for example, by adding a class, id, parent selectors or chaining.
also, if there are styles bootstrap is declaring that jqgrid doesn't address (these you're going to have to sift through manually), the same solution applies: add these styles to jqgrid, while specifying the styles you desire and adding specificity to your declarations so they override bootstrap.
If you posted a link, i could show you, which i think would be much easier then this explanation. but this will achieve the style(s) you desire.
You can't disable a stylesheet reference, but you can change the selectors in it to be more descriptive. e.g. if both of these stylesheets just style div, you'll of course get conflicts. However, if you modify bootstrap's selectors to be #twitter div, you'll get much more precise results.