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">
Related
After compile and build the Meteor application for production. All the js and css files have been minified and concatenated as one js or css file like this:
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/668709f5b029ed3db7692654ebb3c305ae2d1b1a.css?meteor_css_resource=true">
<script type="text/javascript" src="/327435ecda451157c3d8a0af70c6172f58fe77cf.js?meteor_js_resource=true"></script>
These files' URL start with root. My question is: How to add extra level in it? the expected result should be:
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/a_extra_level_here/668709f5b029ed3db7692654ebb3c305ae2d1b1a.css?meteor_css_resource=true">
<script type="text/javascript" src="/a_extra_level_here/327435ecda451157c3d8a0af70c6172f58fe77cf.js?meteor_js_resource=true"></script>
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 am using bootstrap-4 in my Vue webapp, But I am not able to customise this as is explained here.
I have my index.html which uses Bootstrap CDN, like following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sample</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="/static/custom.scss" type="text/x-scss"> ==> where I am overwriting variable
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</head>
<body>
<div id="app"></div>
<script src="/dist/client-vendor-bundle.js"></script>
<script src="/dist/client-bundle.js"></script> -->
</body>
</html>
I also tried changing the order of custom.scss and bootstrap.css in index.html as well.
Following is custom.scss, where I am overwriting variables:
$body-bg: #f5f5f5;
$body-color: #f5f5f5;
$enable-flex: true;
But this is not working.
I also tried importing this in my app component, like following:
<style lang="scss">
#import 'custom.scss';
// Following also did not work
$body-bg: #333;
$body-color: #999;
</style>
How do I overwrite these variable to customise my webapp.
You can make this a lot cleaner by using the npm package and a webpack customisation.
If you first install bootstrap in your project:
npm install bootstrap#4.0.0-alpha.5
and make sure you can use sass-loader in your components:
npm install sass-loader node-sass --save-dev
now go to your webpack config file and add a sassLoader object with the following:
sassLoader: {
includePaths: [
path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
],
},
projectRoot should just point to where you can navigate to node_packages from, in my case this is: path.resolve(__dirname, '../')
Now you can use bootstrap directly in your .vue files and webpack will compile it for you when you add the following:
<style lang="scss">
#import "bootstrap";
</style>
To customise it I'd recommend pulling in the bootstrap _variables first and then you can reference everything like normal, i.e.
#import "_variables";
// example customisation - I'd recommend importing a file here to store them all
$body-bg: $gray-dark;
// just place all your customisation work above the below import of bootstrap
#import "bootstrap";
This will mean you need to remove any CDN CSS versions or they could overwrite things, but you should now be able to fully customise bootstrap.
As another benefit this method allows you to strip out any bootstrap components you are not using. To do so rather than #import "bootstrap"; which is the entire bootstrap library, instead navigate to that file, i.e. node_modules/bootstrap/scss/bootstrap.scss and then copy across the #import's you actually want. Essentially optimising your project...
I tried following approach which worked:
cloned the bootstrap repo
modified _custom.scss in this directory.
ran npm install
ran grunt dist as is in documentation
copied generated bootstrap css and js files from here in my index.html
so my index.html has following:
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script href="/static/bootstrap.js"></script>
As of now, I don't think customising is possible when using CDN link of bootstrap.
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.
I'm very new to web design...okay, now that that's out of the way, where do I declare variables in the LESS/CSS framework?
I'm using NetBeans IDE 7.0.1
I'm also using Bootstrap 2.0 (not sure if this matters).
I downloaded the latest version of LESS from lesscss.org but it only downloads the minified version.
Here are my links and script tags in the header:
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/realcardio.css" media="all">
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/Main.js"></script>
<script type="text/javascript" src="bootstrap/js/less-1.2.1.min.js"></script>
Can't wait to start assigning values to variables but I'm just not sure what file to do this in?
Thanks all!
You do it in your less file!
sample.less
#font_color: #666;
#font_size: 15px;
body {
color: #font_color;
font_size: #font_size;
}
Then you include this .less file:
<link rel="stylesheet/less" type="text/css" href="sample.less">
<script src="less.js" type="text/javascript"></script>
Before you include the less.js file.
FYI, I find it's actually a much better model to hook up something so that every time you save your .less file in your editor, it compiles it using the node lessc compiler into a .css file and you just include that .css file in your page.
This way I don't have to run a convert before we do a deploy at work.