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.
Related
When I included the Bootstrap style file (bootstrap.min.css), it conflicted with my other styles and menu, which makes the page displays incorrectly. I have found this selector below in the Bootstrap CSS file causes the issue. If I download and store the bootstrap file locally, remove that code block, my page will work correctly. However, I will loss other useful options such as "glyphicon".
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
If I include the bootstrap files using CDN like this (which will mess up my page styles because of the above selector *{}), is there a way in my page <style></style> that can remove or disable that block of code above when it loads?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Thanks in advance,
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.
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
}
I have trouble with less.js. Less.js itselfs works fine, but when i want to link other css styles, it seems to loaded them, but it doesnt works. There is problem witch cache probably.
there is generated code:
<link href="http://localhost/less/bootstrap.less" type="text/css" rel="stylesheet/less">
<link href="http://localhost/css/admin.css" type="text/css" rel="stylesheet/css">
<script src="http://localhost/js/less-1.2.2.js" type="text/javascript">
<style id="less:xxx:cz-web-static-less-bootstrap" type="text/css" media="screen">
<script src="http://localhost/js/head.min.js" type="text/javascript">
So what is in bootstrap.less it works, but what is in admin.css doesnt work.
strictly speaking, rel="stylesheet/css", isn't valid. But it's possible there are more problems. We'd need to see some examples of the code. If you are utilizing LESS's nested selectors - each nesting level will potentially override your css elements even if you are calling it after your less file.
More simple put:
#mybody #mydiv p a
{
style
}
which is potentially a very easy string to create with nested LESS structure - WILL override a
a
{
style
}
in your CSS.