How do you override a BootStrap CSS file? I have created another file called site.css and linked it to the index.html file; however, this still does not allow me to override. Is this not a correct action?
If you want to override the bootstrap CSS so you can try this trick.
put your bootstrap css and site.css in head section like below example
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="site.css">
now site.css will be override to bootstrap.css :)
Proper way to override bootstrap is to create your own style class.
<div class="bootstrapclass yourownoverrideclass"></div>
in your css
.bootstrapclass.yourownoverrideclass {
margin: 5px; //override content
}
Related
I have imported some css files in my component.
<template>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdnglobal.immowelt.org/global-assets/4.0.0/fonts/fontello.css">
<link type="text/css" rel="stylesheet" media="screen" href="https://cdnglobal.immowelt.org/global-assets/4.0.0/legacy/0/base.css">
...
<template>
The thing is I want this styles to apply on this component.
They affects on other parent and sibling templates.
Is it possible to enable this to be applied on one template's elements?
If you are writing .vue single file components you can use this:
<style scoped src="./something.css">
</style>
you can try to import your CSS in component with
<style scoped>
#import url("https://cdnglobal.immowelt.org/global-assets/4.0.0/legacy/0/base.css")
#import url("https://cdnglobal.immowelt.org/global-assets/4.0.0/fonts/fontello.css")
...your CSS...
</style>
I use Fontello too with Vuejs, are you trying to use your own icons?
Where and how do I add a custom class like:
.my-custom-class {
color: red;
}
The reason is so it won't change all of the Semantic UI elements too.
In which file do I add it for it to be included in the dist file?
If you don't want to change the Semantic-UI elements, why don't you just have a completely separate CSS file for custom styling?
It's completely fine (and quite common) to have multiple CSS files, such as with the following structure:
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
Then in custom.css, simply include your additional custom styling:
.my-custom-class {
color: red;
}
The order in which the external stylesheets are loaded directly corresponds to the specificity; loading your custom stylesheet after Semantic-UI will give it more specificity in the case of a tie.
Hope this helps! :)
I want to make my buttons inherit from Bootstraps .btn-primary. Do I have to reference or include Bootstrap's less or if I know that my bootstrap.min.css is included before my compiled less file can I just say:
.my-btn {
.btn-primary;
}
In my HTML file:
....
<link href="bootstrap.min.css" rel="stylesheet" media="all"/>
<link href="compiled-less.min.css" rel="stylesheet" media="all"/>
You can't include class within another class once you're working with already compiled css - that only works in less. I'm usually including whole bootstrap less to my custom less, where I alter/overwrite original bootstrap properties, add my custom stuff and compile it to one minimized css file.
Suppose we have the following in stylesheets/myFilename.css.scss:
...
.carousel-control.left, .carousel-control.right {
background-image: none;
}
...
This will not perform as intended unless I modify it to:
...
.carousel-control.left, .carousel-control.right {
background-image: none !important;
}
...
However, if instead of having the css in the stylesheets folder, I put it directly into myfile.html.erb, I don't need !important. How do I resolve this issue?
I assume that it has something to do with the ordering/combination of the css from stylesheets, but I'm not certain. If anyone could shed some light, that would be great.
This is because CSS has a cascading hierarchy that it follows. In your case:
Inline styles
Internal stylesheet
External stylesheet
Internal stylesheet is prioritized more than External stylesheets, so if you declare it directly in your html, you won't need !important anymore to override any other external stylesheets that cause this conflict.
Further reading on css hierarchy and specifity:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://www.w3schools.com/css/css_howto.asp
If you need a !important in your external stylesheet, that means you have a css conflict somewhere else. Being more specific in your selector is always better than using !important, so you can do it like so:
/*Use an ID in your html*/
#my_id .carousel-control.left, #my_id .carousel-control.right {
background-image: none;
}
You should add your stylesheets/myFilename.css.scss file after the main stylesheet.
Suppose, your all css style getting from styleshees/style.css
Now your should write (stylesheets/myFilename.css.scss) it after that ( styleshees/style.css) in your index or associate header file.
Example,
<link rel="stylesheet" type="text/css" href="/styleshees/style.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/myFilename.css.scss">
not
<link rel="stylesheet" type="text/css" href="/stylesheets/myFilename.css.scss">
<link rel="stylesheet" type="text/css" href="/styleshees/style.css">
Bootstrap includes some (very nice) styling for HTML inputs/selects/etc. However, for the project I'm on, they already have styling for these HTML elements that they want to keep.
Is there a way for me to turn off Bootstrap styles for inputs? Perhaps with some kind of css class? Or, do I have to override them manually?
The order of inclusion of the stylesheets can help you.The inclusion of bootstrap.css followed by your own stylesheets makes elements in your stylesheet to override those in bootstrap.
For example,
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="/static/jquery.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<link type=text/css rel='stylesheet' href=/static/main.css><!-- custom stylesheet -->
For eg,
If the main.css contains
body
{
background-color:red;
}
And bootstrapp.css contains
body
{
background-color:blue;
}
The site will be with a red background.