what can I do that "bootstrap/less/bootstrap.less" is not overwriting all my css -styles (I could only use the .less files I only needed(e.g.: bootstrap/less/buttons.less ), but I need all classes).
When I import "bootstrap/less/bootstrap.less" it's going to overwrite my bootstrap menu and all standard selectors like input, textarea ..., but I want only to overwrite the css classes i want, but not everything ...
thanks :)
[UPDATED: 09-04-2014]
Background information for my project:
Important NuGet Pakages:
Bootstrap (v 3.0.0 ) -> imported in the master page
Bootstrap.Less (v 2.3.2 ) ->these files I use for impor in
"Site.less")
dotless (v 1.4.0.0)
html5shiv (v 0.1.0.8)
Modernizr (v 2.6.2) -> imported in the master page
Respond JS (v 1.2.0)
Visual Studio 2013
MVC5
my "Site.less" looks like
/*#import "bootstrap/less/buttons.less";*/
#import "bootstrap/less/bootstrap.less";
.BWButton {
.btn;
}
Its a little bit strange when I only import "bootstrap/less/bootstrap.less" everthing is going to be overwritten, it doesn't matter which order of the css/less import I have made in the master page and when I use only "#import "bootstrap/less/buttons.less"" no effect is on the page not even if I remove all css/less imports in the master page...But intelli sense works on both imports("bootstrap/less/buttons.less" and "bootstrap/less/bootstrap.less") (when imported inside the site.less), but on the client site Site.less(when i import "bootstrap/less/buttons.less" before in site.less ) is empty(when I select "Site.less" in fire bug)..
my master.page(Shared/_Layout.cshtml) looks in the header like this:
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/dataTable.css")
#Styles.Render("~/Content/popup.css")
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
#Styles.Render("~/Content/Site.less")
#Styles.Render("~/Content/bootstrap.css")
#Styles.Render("~/Content/site.css")
the output on the client side:
<script src="/speScripts/modernizr-2.6.2.js">
<link rel="stylesheet" href="/Content/dataTable.css">
<link rel="stylesheet" href="/Content/popup.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="/Content/Site.less">
<link rel="stylesheet" href="/Content/bootstrap.css">
<link rel="stylesheet" href="/Content/site.css">
May be this helps you a little bit more :)
In your html , make sure you include your own stylesheet at last !
<head>
<link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/style.css" rel="stylesheet">
</head>
In my example above, my custom stylesheet will overrule the bootstrap.min.css sheet.
Related
I am using Laravel 6 and want to change the structure of some of my routes in the web.php file. When registering the following route like this:
Route::view('/my-article', 'articles.my-article')->name('my-article');
everything works as it should.
But when changing the URL like this, adding /articles:
Route::view('/articles/my-article', 'articles.my-article')->name('my-article');
Suddenly no CSS is applied anymore. No Bootstrap, Fontawesome or own stylesheet. JS script on the other hand, and HTML of course, were loaded.
Oddly (for me): The other routes worked fine, all CSS stylesheets loaded.
I tried the same with another route that had a Controller action. I changed it from
Route::get('/{continent}', 'ContinentController#index')->name('continent');
to (adding /continents)
Route::get('/continents/{continent}', 'ContinentController#index')->name('continent');
And again, no styles were applied. Only JS scripts and HTML.
Why is that so? Why can't I add something to the URL by hand and why does it affect the loading of the CSS stylesheets?
Thanks and best regards.
EDIT:
Here is the part of my template.blade.php file where the styles are included:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Font Awesome Icons CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Own CSS -->
<link rel="stylesheet" href="css/style.css?{{ time() }}">
The issue is CSS Does not effect on website after bundle although all of bundle process is fine
From the view source code page i can see the css file but it does not take any effect on website. The code bellow is what i used to call css and saw from view source code page and from my layout file.
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
Does anyone have any idea for this?
Thank you.
You used
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
your code
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
try like ths
src should change to href
<head>
<link rel="stylesheet" type="text/css" href="/path/yourcssfilename.css">
</head>
I'm currently working on an email template with thymeleaf in a jhipster application.
My problem is that i can't use bootstrap css in thymeleaf template.
I understand that thymeleaf is a server-side technology and cannot load bootstrap css that exists on client-side (via node_modules), but when i saw answers to these two questions question1 and question2 i tried by similarty to import my css like this
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/vendor.css|}" />
but thymleaf still can't load this two files, i have no errors on console but css classes (bootstrap and mine) are just ignored.
PS : global.css contains my css classes, and vendor.css is the default jhipster file that calls bootstrap
vendor.css
#import '~bootstrap/dist/css/bootstrap.min.css';
#import '~font-awesome/css/font-awesome.css';
My template is located under
/src/main/resources/mails/applicationReport.html
My css is located under
/src/main/webapp/content/css/vendor.css
/src/main/webapp/content/css/global.css
So how can i use css classes from global.css and vendor.css in thymleaf?
UPDATE
After Gaël Marziou's answser i added these two lines to /demain/webpack/webpack.common.js
{ from: './src/main/webapp/content/css/global.css', to: 'global.css' },
{ from: './src/main/webapp/content/css/vendor.css', to: 'vendor.css' },
and in /src/main/resources/mails/applicationReport.html i call these two files like that
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/vendor.css|}" />
but Thymleaf stills ignore my css classes
Your CSS files are bundled by webpack, so content/css/global.css does not exist in your built webapp and cannot be accessed by URL, check it by unzipping your war file.
However, you could have both bundled stylesheets and original css files in your war file by adding these files to the configuration of CopyWebpackPlugin see in webpack-common.js file.
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">
I'm trying to use one of the styles from http://bootswatch.com/. I would like to apply the .less version of their styles to bootstrap.css. To do so I'm doing the following as described in http://lesscss.org/#usage:
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="variables.less" rel="stylesheet/less">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
But it doesn't work, i.e. I still have the default bootstrap theme.
To simplify I've merged variables.less into bootswatch.less, so the code now looks like this:
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
But still I get the default bootstrap theme.
I've checked with the debugger and all files are properly linked, so I guess I'm doing something wrong in the usage.
If you use the less files from bootswatch, I think you also need to use the less files from bootstrap. The variables.less file will overwrite the values from the original file.
What I did to make it work is download the bootstrap less files, copy the bootswatch.less and variables.less to the same folder (I renamed to variables-bootswatch.less for forward-compatibility, if bootswatch is not up to date).
Then I modified the bootstrap.less file to include those aforementioned files :
// Header and everything before variables.less
#import "variables.less"; // Modify this for custom colors, font-sizes, etc
#import "variables-bootswatch.less";
// everything else, then at the end
#import "bootswatch.less";
Lastly, you just need to import this file (no CSS)
<link href="bootstrap.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
It appears that there is one project on github that is meant to build you swatch themes : swatchmaker on github. It should produce the appropriate CSS files.
I think you need to change the order of script file as follows
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<script src="less.js" type="text/javascript"></script>
<link href="bootswatch.less" rel="stylesheet/less">