I am customizing the bootstrap using this link http://getbootstrap.com/customize/. When I download there is no LESS file, only CSS files inside the customized bootstrap. How can I get the customized bootstrap with LESS files.
You don't need customized less files. When you use the less version of bootstrap, you can have a look at bootstrap.less - it imports all the different components.
In your custom less file, you can just import the ones you need instead of bootstrap/bootstrap.
Maybe you could start using bower to organize all your dependencies. Tried installing it and run bower install bootstrap and all the files will be automatically downloaded into bower_components/bootstrap folder. The sources included all the less files per components.
Related
I've just started learning a bit about Bootstrap and used npm to install Bootstrap. I noticed under node_modules that there are css files and scss files under Bootstrap. What I know of scss so far is that it's an advanced version of css, so I was wondering what the difference between the css Bootstrap files and the scss Bootstrap files were. Do they contain different things?
I believe what is ultimately rendered to the browser should be identical out of the box. The difference is that to serve the SCSS to the browser you have to have some build process in your development workflow that outputs the SCSS to CSS before serving it. There are, however, some benefits to using the SCSS files in your project, such as easier customization and access to mixins and helper utilities.
I have a web application that uses Bootstrap 3. I'm using webpack, so I npm installeded bootstrap, and I'm referencing it like so:
import 'bootstrap/dist/css/bootstrap.css';
This works well. But now I want to use a different bootstrap theme (Slate), that only changes the css file.
I can think of two options of doing this.
Replace bootstrap.css inside the node_modules directory. Since node_modules is not a part of our source repo, we will need to do this repeatedly. This is clearly not a good option.
Don't use npm for bootstrap at all - put all the bootstrap files in a folder and reference that instead. This will work, but we won't get updates if a new version of Bootstrap is released.
Is there a way to reference bootstrap.css from one place, and all the other bootstrap files from another place? Can webpack do that?
Bootstrap version 3 has a nifty web tool, on their site, that lets you customize the CSS file. You can choose which styles the CSS file will include, such as the grid styles, code styles, or specific components such as navbars, etc.
The bootstrap version 4 site does not have this, yet. I'm trying to figure out how to build this type of CSS file using the cloned repository.
How can I build bootstrap version 4 so that the CSS file only contains the specific styles that I need?
(1) Download bootstrap source from github https://github.com/twbs/bootstrap there is button in green to download if you don't have git.
(2) Install ruby and sass follow instructions at http://sass-lang.com/install
(3) cd into scss folder of the source you've downloaded
(4) change bootstrap.scss file to import only components you need for example if you dont need card remove #import "card"
(5) In terminal or command prompt cd into scss folder
(6) Run sass bootstrap.scss bootstrap-custom.css instead of bootstrap-custom you can put any name you want
(7) file named bootstrap-custom.css is generated use it however you want;
I'm wondering if its okay to import all of bootstrap.less into my own .less file and then overriding anything I wish to change within that one file. My own .less file, style.less, outputs everything into a single style sheet, and I'm NOT including the compiled bootstrap.css file, only the JS files.
bootstrap // folder with all bootstrap less files.
style.less // imports bootstrap folder, and outputs style.css in root directory
Are there any drawbacks to doing it like this, or should I also be including the compiled bootstrap.css file?
Yes, do, you immediately gain access to all the mix-ins and variables. I'd say this is the most powerful way to use bootstrap.
As you're suggesting just import bootstrap.less at the head of your less file. I import any other mixin libraries, like lesshat, after that.
The problem is that you end up with one monolithic CSS file which is a nightmare to debug, but less.js 1.50 introduces source maps which is invaluable when using this methodology: http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/
A faff to set up but saves a lot of head scratching.
I want to set up bootstrap like that Twitter Bootstrap Customization Best Practices
I want though the responsive version. I found this thread Twitter Bootstrap responsive css is not generated form the less files
but it's not clear to me how can I set up bootstrap files so I can customized it using the responsive version ?
If you are wondering how to use less to customise the bootstrap css and then use this in your project, then there are basic approaches.
You can combine your customisation into the base bootstrap css files and import this into your project, or you can leave the bootstrap files untouched, create a second css file for your customisation and import this into your project as well, after the bootstrap css.
Overwrite vs override.
From the first link you give, you can see that both approaches have their supporters.
I've usually used the first method, and this is what I've done.
Download a copy of the less files, here is one source, and add to your project files
Open the bootstrap.less file. You'll see that it orchestrates everything and imports the individual less files
Create theme-variables.less and theme-css.less files and save to this less folder
You need to import these files in the right sequence. Adding the variables file at the end of the Core variables and mixins block with #import "theme-variables.less"; and the theme file at the end of the Base CSS block with #import "theme-css.less"; works for me. Depending on what you are customising, you may need to play with this a bit
That's basically it. Edit your custom files, compile bootstrap.less, and import the resulting bootstrap css file(s) into your project.
Naturally at the start you want to keep good backups incase something goes wrong, and likewise when you upgrade Bootstrap.
Good luck!
First download form https://github.com/twbs/bootstrap less version
How to use Less and less compilers
http://lesscss.org/
http://winless.org/
Bootstrap tutorial
http://www.w3resource.com/twitter-bootstrap/tutorial.php