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.
Related
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've tried this exact code on my other computer and once run it is shown differently. Could you correctly show me how I should insert the references? Also how could I override the style of the default bootstrap?
I think that's all the info you need, but if you need anything else just ask.
I assume that you html file is inside wwwroot folder, so:
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<style>
...
</style>
</head>
Where you have:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove the ~.
I believe that the ~ is a Windows only thing used for finding the path. If it's your mac where Bootstrap is not working, then I'm 98% sure that was the issue. ~ isn't used in the mac environment for paths like it is on Windows.
You will also need to do that for your other paths being found this way.
Going in and changing the bootstrap CSS can get a little complicated so I usually create a new CSS file with my edits. Since CSS is cascading stylesheets, I make sure that my CSS file is the last stylesheet in the head section so it overrides the stylesheets above it.
The location of your CSS file in reference to your HTML file will determine what the file path looks like in your reference. If your HTML file is in the root directory, the reference/paths mentioned in the other answers should work.
As stated above:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove ~.
If you want to overwrite CSS place the default.css or your own css after the one you want to overwrite for example:
<!-- Bootstrap and Custom CSS Style Sheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
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
}
Kind of a newb question. I'm working with Boostrap to create a mobile responsive portfolio. What do you do if you want to make a change to the default Bootstrap classes? Like if I wanted to take the padding off of the class="container"? The links are only connected to the minified version of css and js. So if I make a change to the regular version .css, there's nothing connecting the change. Do I have to change the .min.css version? Should I be able to repeat a class in my own personal css page?(I've tried unsuccessfully) Thanks, any advice would help.
Two methods that I know of:
1) Make edits to the .min.css file, or
2) Add '!Important' to the your personal css, like so:
.testDiv{
font-color: white !Important
}
This will overwrite any classes that have set a font-color for .testDiv
*note: using !important is not a recommended technique, but it gets the job done
You can override the classes in your own CSS file (make sure you import it into your HTML after the original CSS files from bootstrap). Like,
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="path/to/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="path/to/css/bootstrap-theme.min.css">
<!-- Custom Tweaks to theme (Add your changes to this file) -->
<link rel="stylesheet" href="path/to/css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="path/to/js/bootstrap.min.js"></script>
However, if you are going to make lots of modifications like that, I suggest you create your own customized version
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.