I am using CSS flexbox to make the header of my page with display:flex;
Somehow, when I am linking Bootstrap 4 CDN link to my HTML, the flexbox doesn't behave like flexbox and different divs within flexbox come down to different lines.
Please help me out. Thank you.
Your custom CSS class is now conflict with Bootstrap-4 CSS class. If you want to avoid this conflict you have to do following:
First add the Bootstrap-4 CDN then your custom CSS. It will overwritten bootstrap CSS by custom CSS.
Example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="your-custom.css" />
<!-- Your custom CSS -->
If above solution isn't fix your issue go to your html change bootstrap class to custom class.
Example:
<nav class="navbar"></nav>
<!-- -->
Above class are reserved by bootstrap. If above class are conflict with your .navbar class please change that class.
<nav class="my-navbar"></nav>
<!-- OR -->
<nav class="navbar my-navbar"></nav>
If above solution not working then use !important after CSS property. It will overwritten bootstrap CSS by custom CSS.
Example:
.navbar{
display: flex !important;
}
Note: Try to avoid !important CSS property. Use new class to overwrite bootstrap CSS.
It's likely your css is overruled by the css of bootstrap. Since you are using CDN you can't change the bootstrap css.
I suggest you add '!important' to your header styles just to see if this will override BS css.
You can check to see which styles are used bij looking at your page in Chrome, press F12.
Select the 'Elements' tab. Select your header on the left side, and check the Styles on the right. It will show you which styles are used.
Related
This question already has an answer here:
Find definition of CSS class in external stylesheet
(1 answer)
Closed 3 years ago.
The problem i am having is that I can't really understand which classes belong where.
I have got a project which uses bootstrap and some custom stylesheets. So, when some classes are declared for an element then how can I say which classes are from bootstrap and which classes are from any other custom css that we declare?
Is there any way to do this? or even with any IDE?
For example:
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css>
</head>
<body>
<b class="text-warning test test2">Hello World</b>
</body>
custom CSS
.test2{
color: blue;
}
.test{
color: red;
}
*text-warning is a bootstrap class, which colors the text yellow.
CSS always takes the style from the latest defined class/id/tag... when they are using the same properties. In this case the property color with the value red from the class "test".
So normally you include in your html-header at first the bootstrap css and then your custom css. With this order your custom css overwrites the bootstrap css. But you can use !important in your css style to force your style.
I'm making a website about Vanilla World of Warcraft using Bootstrap. To get the items tooltips to work, I'm using this resource from db.vanillagaming.org:
<script type="text/javascript" src="http://db.vanillagaming.org/templates/wowhead/js/power.js"></script>
I tested it, and it didn't work. After some searching I've noticed that if I removed bootstrap.min.css it works. Some CSS styling of Bootstrap is removing the ability to show the items tooltips.
So, my question is how can I remove the Bootstrap CSS styling of a specific element? In this case an a element.
Shield Specialization
Here is a example: http://codepen.io/diogocapela/pen/QGxLYj
As Bootstrap and db.vanillagaming.org both have some styles for class .tooltip they override each other.
To make it work, You can add one fix : make .tooltip visible
.tooltip { opacity : 1; } should fix your problem.
http://codepen.io/anon/pen/JbZjjZ
I am working on a plugin for a wordpress page and in the theme it's going in, there is a style.css for that theme. In that style.css there are CSS attributes that apply to all img and p tags and that is messing up the appearance of my plugin. How can I make it so my plugin, which has its own stylesheet, ignore the style of the theme's css?
Include your stylesheet after the style.css
So:
<link rel="stylesheet" type="text/css" href="/path/to/style.css">
<link rel="stylesheet" type="text/css" href="/path/to/yourStylesheet.css">
If this still is not working use !important, but try to avoid this.
!important is placed after the style rule, like so:
p {
color: red !important;
}
You can also use more specific styles like #SarahBourt said.
#news-item > p {
color: red;
}
Craete a new CSS file and include your stylesheet after the default bootstrap css file, your styles will override the bootstrap styles
If still you are getting some problems you can also use !important next to that style
!important will ensure that your style will be given first preference
Ex:
p{
display:inline-block !important;
}
You can place styles in your stylesheet specifically to override the theme's styles.
Assuming your stylesheet is loading after the default theme stylesheet, then you can do the following.
In your web inspector, find the offending style in the theme's stylesheet. Copy it into your stylesheet, and replace every value with 'initial' to reset it to the defaults, or with your custom styles if that's more appropriate.
If your stylesheet is loading before the theme's styles, then you can still override the theme styles, even if they include !important. To override !important, create a more specific selector than the theme uses (Read about CSS specificity to figure out the best way of doing this), and add !important only to those which have !important in the theme style. If the style you're overriding doesn't use !important, just use the more specific style, as including too many !important tags can make it harder for you or someone else to modify your code later, as you're experiencing now.
In addition, you want to be sure that your overrides only get applied to your plugin, and not the rest of the site. So, wrap the plugin with a div or other element if it isn't already, and give the wrapper a unique class or id, e.g. class="my-plugin". Preface all of your overrides with this class to avoid breaking other areas of the site.
HTML:
<div class="my-plugin>
<!--plugin HTML-->
</div>
CSS:
.my-plugin img {
//override styles
}
.my-plugin p {
//override styles
}
Overriding original styling like this can get messy, but sometimes it's the only way to get things done when you don't have access to the other .css files. Just do the minimum necessary to make your styles more specific and you should be okay.
Just wondering how I can change the background colour of a Thumbnail to transparent or different colours in TW Bootstrap?
Normal practice when using Bootstrap is to load the bootstrap.css file then straight after that load another custom stylesheet of your own e.g.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
In this new stylesheet you can modify any of the Bootstrap default styles to suit your own design requirements e.g.
.thumbnail {
background: #000;
}
There is two ways to do that , the first one is to customize bootstrap from the official websites http://getbootstrap.com/customize/
Change value of #thumbnail-bg
Seconde solution is to override bootstrap classes like #Billy Moat said
This is hard to sum up in a title, so forgive me.
Basically, here is what I have:
a img {
/ * style * /
}
However, I want to affect the a tag in this instance. Is there any way to do so in CSS without resorting to JavaScript wizardry?
Unfortunately the cascading in CSS only goes one way. From your example, I'm guessing you are trying to do something like this:
<a><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->
<a>Hello</a> <!-- This A is normal -->
Most developers would accomplish it by simply adding a class.
<a class="icon"><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->
Even better, use that class to make the icon a background image and add padding.
<style type="text/css">
a.icon { background:18px left center no-repeat; line-height:18px; }
</style>
<a class="icon" style="background-image:url('icon.gif');">Hello with icon</a>
Put all your icon images into classes too and you have some pretty clean HTML!
You want to apply styles to the tag only if it has an image correct? In short, using straight CSS there is no way to do that.
EDIT
BUT, if you wanted to do this w/ jquery you could do it like so:
$('a').has('img').addClass('hasImg');
then use .hasImg as your hook
a.hasImg{background:lime;display:block;height:200px;width:200px;}
Here's a demo on JSBin I put together (view source): http://jsbin.com/owafi4
CSS selectors can not ascend. It is a limitation of the language.