I have read the following article that describes a nice Bootstrap Less project structure that allows customizing bootstrap without editing source code. But it is for Bootstrap 2 I guess:
http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/.
I really like this article that suggests the following structure for less files.
1) Create your own theme.less on top of Bootstrap files
2) Include into your fresh theme.less the following:
// importing all bootstrap.less files, leve them untouched, so you can update bootstrap
#import “../bootstrap/less/bootstrap.less”;
// this is copy of bootstrap variables.less with custom color scheme and other customizations
#import “custom-variables.less”;
// your own overrides anc custom classes
#import “custom-other.less”;
// utilities as the last
#import “../bootstrap/less/utilities.less”;
But as I am new to Bootstrap and Less, I am not sure that this fits Bootstrap 3 for 100%.
1) My questions is whether this project structure fits Bootstrap 3?
2) I do not get why utilities.less should be reimported as the last file (as it is already imported into core bootstrap: bootstrap.less first time and then second time in theme.less )?
3) Bootstrap 2 had responsive.less file together with bootstrap.less. In Bootstrap 2 I had to include responsive.less seperatly, but in Bootstrap 3 not. However, there is responsive-utilities.less, should I include it as the last file after utilities.less?
1) My questions is whether this project structure fits Bootstrap 3?
Not exactly, you need to change some file names and stop importing utilities.less
2) I do not get why utilities.less should be re imported as the last file (as it is already imported into core bootstrap: bootstrap.less first time and then second time in theme.less)?
In Bootstrap 2.X this make sense, since you could use the function, mixins and variables defined there
3) Bootstrap 2 had responsive.less file together with bootstrap.less. In Bootstrap 2 I had to include responsive.less seperatly, but in Bootstrap 3 not. However, there is responsive-utilities.less, should I include it as the last file after utilities.less?
No, in Bootstrap 3 you don't need to import responsive-utilities.less, as is imported by bootstrap.less and is mobile-first by default.
This is the structure I use for BS3:
#import "../bootstrap/less/bootstrap.less";
#import "variables.less";
//Here start customization and I can use my variables defined in #variables.less
#media (min-width: #screen-lg) {
width: 30%;
}
But as I am new to Bootstrap and Less, I am not sure that this fits Bootstrap 3 for 100%.
Foremost, Bootstrap is a framework in itself, you don't create it, but you use it and make changes or add changes as per your need. Bootstrap 3 is built ground up and is different from Bootstrap 2 in some ways. You may want to clone/fork bootstrap to modify according to your need. You can read about customizing Bootstrap3. Although, IMO customizing v2 or v3 would largely be similar. Read Stackoverflow thread to understand primary difference between the two versions.
1) My questions is whether this project structure fits Bootstrap 3?
The structure and order of inclusion of less files can be found in Github Source If you wish to customize it, you can append reference to your less file. That way you would have your changes included in the generated bootstrap CSS.
2) I do not get why utilities.less should be reimported as the last file (as it is already imported into bootstrap.less)?
From the source code(link reference above), I see that its included only once.
3) Bootstrap 2 had responsive.less file together with bootstrap.less. In Bootstrap 2 I had to include responsive.less seperatly, but in Bootstrap 3 not.
Bootstrap 3 is based on Mobile first approach, which implies that it is responsive by default. While in the case Bootstrap 2, one is required to include responsive CSS if needed.
However, there is responsive-utilities.less, should I include it as the last file after utilities.less?
IMO you should be fine without changing anything here, let it it be as is and include your customization at the end.
Related
We are working on an MVP in vue.js and we decided to use bootstrap to have the element styled in a consistent way.
Now we are starting to add the skin/theme to our single-page app, and we found an issue with the css rendered on the page.
We successfully managed to override the styles by using higher specificity css selectors, but we would like to optimise the output code rendered in the browser by removing the unused "base" bootstrap css code.
The question:
How can we setup our environment to make the bootstrap sass code to output clean and non-redundant css code?
Details:
Bootstrap loads its own _buttons.scss file
We are loading our own "theme" _buttons.scss file after bootstrap's one and we managed to have our css with higher specificity.
We run the sass code compiler (on node-sass)
The output css contains BOTH the bootstrap style and our own themed style for the buttons.
(As an example, see the following screenshot)
As you can see our own button style is applied as intended but we still carry over the bootstrap original style.
We would like to have OUR STYLE ONLY rendered in the browser.
Update:
The UI I'm working on uses some classes straight from bootstrap, and obviously some classes specific of our own app.
Sometimes these classes are necessary to override the bootstrap default styles.
We need to override not only the colours (which are customisable through the _variables.scss), but also some other css attributes.
We find ourselves struggling with duplicated css code rendered in the browser, where there is our own style applied and also the default bootstrap generated style which will never be applied as it's low in specificity.
I wonder if there is a way to avoid to compile sass code that doesn't need to be rendered in the browser, and at the same time avoid to "touch" the bootstrap code in ./node_modules/.
Here's how you override Bootstrap (4.x) defaults.
Examine the source
First, look inside bootstrap.scss where you can see how the framework is built, component by component. You could, if you like, comment out optional components you don't need, to downsize Boostrap. But don't do that right now.
Next, look inside _variables.scss. Skim through this file and it should be clear that all customisable Bootstrap styles are defined here, including colors. Thus you can have your custom colors apply not just for buttons but throughout the whole framework. Again, you could start changing the variables you want here right now... but don't, for there is a Best Practice.
Create customisation file
Instead of editing the original source, create a new source file we'll call myproject.scss, somewhere other than the Bootstrap source folder. By keeping all changes separate, we make any future Bootstrap upgrades easy.
Add variable overrides
Now you can start copying variables you want to change. Note that variables in _variables.scss have the !default flag, which means they can be overridden elsewhere. For example if you want a different secondary color, you'll find it defined as $secondary, and so add it to myproject.scss with a new value:
$secondary: #dd5679;
Add as many variable overrides as you want.
Import Bootstrap
After that, import Bootstrap into the file. EITHER take bootstrap.scss wholesale:
#import "relative/path/to/bootstrap/bootstrap";
OR copy-paste the contents of bootstrap.scss, update the pathnames, and comment out the components you don't want:
#import "relative/path/to/bootstrap/functions";
#import "relative/path/to/bootstrap/variables";
#import "relative/path/to/bootstrap/mixins";
...
// #import "relative/path/to/bootstrap/popover";
// #import "relative/path/to/bootstrap/carousel";
#import "relative/path/to/bootstrap/utilities";
#import "relative/path/to/bootstrap/print";
The first 3 imports, "functions", "variables" and "mixins" are core and not optional components; don't exclude them.
Add project styles
After that, add your own styles. If you have a significant amount, organise them into their own partial files e.g. _mybuttons.scss (start names of partial files with an underscore), and import them.
#import "mybuttons";
Your custom Bootstrap source file is now ready.
Compile to CSS
The resulting myproject.css file is what you want to load instead of the original Bootstrap CSS file.
In the newest version of Bootstrap (current version at the time of asking the question is bootstrap#4.0.0-alpha.5) there are 3 different files and a standard one:
bootstrap-flex.css
bootstrap-grid.css
bootstrap-reboot.css
bootstrap.css
Are the first 3 files an extension to bootstrap.css (#4)?
I can imagine, that the bootstrap-flex use the features of CSS Flexbox, bootstrap-grid is probably the old and already existing way, but what about bootstrap-reboot?
Which one do I have to include (especially then, if I use ng-bootstrap with Angular 2)?
Take a look at the source:
bootstrap-flex.scss
Bootstrap with Flexbox enabled
Includes all the imports from the standard Bootstrap project, but enables the flexbox variable.
bootstrap-grid.scss
Bootstrap Grid only
Includes relevant variables and mixins for the regular (non-flexbox) grid system, as well as the generated predefined classes (e.g., .col-4-sm).
bootstrap-reboot.scss
Bootstrap Reboot only
Includes only Normalize and our custom Reboot reset.
bootstrap.scss
The main Bootstrap library
And the answer is yes, the first 3 files are optional for Bootstrap.
The minimum required is bootstrap.css, it already includes bootstrap-reboot.
Replace with bootstrap-grid if you want the Bootstrap's grid only.
Replace with bootstrap-flex if you want to use Bootstrap with Flexbox. It is bootstrap.css with Flexbox features.
As #Nhan said: yes, the -reboot, -flex, and -grid files extend the primary bootstrap.css and if you use one of them, then that file is the only you need to include.
As far as the ng-bootstrap portion of your question, I'm using the same and I've only included the bootstrap.min file as I don't plan to use flexbox and I need more than the grid styles.
Hopefully that adds a bit of clarification about what is strictly necessary within the context of your question.
after I save my changes in the less file, my original css file will also be updated.
The problem here: I use #import "bootstrap" in my less file for some mixins and the entire external bootstrap lines will be copied in my normal css.
How can I just use the mixins without that "Web Essentials 2013 for Update 2" copies the entire source code to my css file ?
You can import only the parts of Bootstrap that you need. This is a really good practice to get into, since as you have seen Bootstrap will include a lot of CSS that you probably don't need. For example, depending on your project's directory structure:
#import "bootstrap/mixins.less";
This is a rather broad question, but I really can't narrow the title down more than this.
I have downloaded Bootstrap 3 and I am making customizations to variables.less while running grunt watch. Whenever I make changes to the LESS, grunt re-compiles everything into the dist directory, which I copy to my target static directory. All of that works fine, but...
Is this really the intended way of doing it? Should I move the Bootstrap source directory to some other directory to work more efficiently?
If I want to add some custom LESS for expressing e.g. "hide all img elements when the the screen is #screen-md pixels", how would I get access to #screen-md in my custom LESS file?
Any tips are highly appreciated, because I've found the documentation really lacking.
My workflow is similar to Matthew Trow, but instead of cloning I prefer to import the bootstrap.less file.
I'm using bower to keep Bootstrap updated, so my folder structure is like this:
> bower_components
> bootstrap
> font-awesome
> requirejs
...
> css
- project.css
> less
- project.less
- variables.less
My project.less looks like this:
// Bootstrap framework
#import "../../bower_components/bootstrap/less/bootstrap.less";
// Font-awesome awesomeness
#import "../../bower_components/font-awesome/less/font-awesome.less";
// Project specific stuff
#import "variables.less";
#import "stuff.less";
I define both my variables and override bootstrap specific ones inside my variables.less:
// Override Bootstrap variables
#font-family-sans-serif: "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
#btn-default-border: #bbb;
#brand-primary: #b02b2c;
#link-color: #08c;
// Override Font-Awesome variables (path relative to project.css position)
#fa-font-path: "../bower_components/font-awesome/fonts";
//Map Bootstrap variables to myproject specific names
#my-customname-float-breakpoint: #grid-float-breakpoint;
#theme-color: #brand-primary;
//Project specific variables
#my-favourite-color: rgb(228, 1, 1);
Then I compile only project.less to produce a compressed .css with everything (in the example there's also Font Awesome).
After the huge variables and classes update with Bootstrap 3, sometimes I feel better to map my custom variables to bootstrap ones inside my variables.less, instead of using directly Bootstrap ones inside my less files.
Importing bootstrap.less you can use any bootstrap variable wherever you want. So, for example:
// Hide all images at a viewport smaller than 992px (aka #screen-md)
#media (max-width: #screen-sm-max) {
img {
display: none;
}
}
My personal way of doing this is to put all the bootstrap less files into a folder called 'bootstrap' and not touch any of them.
I then have my custom less files in a folder, which import bootstrap assets. I effectively clone the bootstrap.less file and prepend it with a project name:
project-bootstrap.less
This then imports files from the bootstrap folder.
At the base of my cloned project-bootstrap.less file, I add my custom less and my bootstrap overides.
For example, I'll have a variables file that only includes parts of the bootstrap file I've overidden and of course, any custom variables.
I do that for any bootstrap file where I make changes and comment accordingly.
My folder structure is usually:
css
> less
> bootstrap
- bootstrap files
- my custom files
I then simply compile my project-bootstrap.less file.
For me, since they add stuff to the variables.less file I import the bs3 variables into my own variables file. I stick Bootstrap in its own folder inside my less directory.
The mixins.less has the grid creation and the grid.less is where those mixins are used. There's no one specific place for all min-width media queries of any size. If there is a desktop min-width for BS3, they stick it right after the stuff outside media queries, so that it's close by.
If you wanted to hide all images at the md width, you can use the responsive utilities OR
#media (min-width: #screen-md-min) {
img.md-hide {display:none}
}
However, the next size up won't see them since md is before lg in the stacking. So it's best to use responsive utilities on the image. I believe it's "hidden-md" is the class to use on stuff you want to hide at only md (992px or whatever you set in the variables.less).
I am just getting started with Bootstrap from Twitter and am wondering what the ‘best practices’ is for customization. I want to develop a system that will take advantage of all the power of a css template (Bootstrap or other), be completely (and easily) modifiable, be sustainable (ie – when the next version of Bootstrap is released from Twitter I don’t have to start over.
For example, I want to add background images to the top navigation. It looks like there are 3 ways to go about this:
Modify the .topbar classes in bootstrap.css . I don’t particularly like this because I will have lots of .topbar items and I don’t necessarily want to modify them all the same way.
Create new classes with my background images and apply both styles (the new and the bootstrap to my element). This may create style conflicts, which could be avoided by stripping the .topbar class into separate classes and then only using the pieces that are not stepped on by my custom class. Again this requires more work than I think should be necessary and while it is flexible, it won’t allow me to easily update bootstrap.css when Twitter releases the next installment.
Use variables in .LESS to achieve the customization. Offhand this seems like a good approach but having not used .LESS I have concerns about compiling css on the client and about code sustainability.
Though I am using Bootstrap, this question can be generalized to any css template.
The best thing to do is.
1. fork twitter-bootstrap from github and clone locally.
they are changing really quickly the library/framework (they diverge internally. Some prefer library, i'd say that it's a framework, because change your layout from the time you load it on your page). Well... forking/cloning will let you fetch the new upcoming versions easily.
2. Do not modify the bootstrap.css file
It's gonna complicate your life when you need to upgrade bootstrap (and you will need to do it).
3. Create your own css file and overwrite whenever you want original bootstrap stuff
if they set a topbar with, let's say, color: black; but you wan it white, create a new very specific selector for this topbar and use this rule on the specific topbar. For a table for example, it would be <table class="zebra-striped mycustomclass">. If you declare your css file after bootstrap.css, this will overwrite whatever you want to.
Bootstrap 5 (update 2021)
As explained in the Bootstrap docs, modifying the existing "theme" colors is done using SASS. As with prior versions, you can also override the Bootstrap CSS by adding CSS rules that follow after the bootstrap.css and use the correct CSS specificity.
Bootstrap 5 - change theme colors
Bootstrap 4
I'm revisiting this Bootstrap customization question for 4.x, which now utilizes SASS instead of LESS. In general, there are 2 ways to customize Bootstrap...
1. Simple CSS Overrides
One way to customize is simply using CSS to override Bootstrap CSS. For maintainability, CSS customizations are put in a separate custom.css file, so that the bootstrap.css remains unmodified. The reference to the custom.css follows after the bootstrap.css for the overrides to work...
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
Just add whatever changes are needed in the custom CSS. For example...
/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
border-radius: 0;
}
Before (bootstrap.css)
After (with custom.css)
When making customizations, you should understand CSS Specificity. Overrides in the custom.css need to use selectors that are the same specificity as (or more specific) the bootstrap.css.
Note there is no need to use !important in the custom CSS, unless
you're overriding one of the Bootstrap Utility
classes. CSS
specificity
always works for one CSS class to override another.
2. Customize using SASS
If you're familiar with SASS (and you should be to use this method), you can customize Bootstrap with your own custom.scss. There is a section in the Bootstrap docs that explains this, however the docs don't explain how to utilize existing variables in your custom.scss. For example, let's change the body background-color to #eeeeee, and change/override the blue primary contextual color to Bootstrap's $purple variable...
/* custom.scss */
/* import the necessary Bootstrap files */
#import "bootstrap/functions";
#import "bootstrap/variables";
/* -------begin customization-------- */
/* simply assign the value */
$body-bg: #eeeeee;
/* use a variable to override primary */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
#import "bootstrap";
This also works to create new custom classes. For example, here I add purple to the theme colors which creates all the CSS for btn-purple, text-purple, bg-purple, alert-purple, etc...
/* add a new purple custom color */
$theme-colors: (
purple: $purple
);
https://codeply.com/go/7XonykXFvP
With SASS you must #import bootstrap after the customizations to make them work! Once the SASS is compiled to CSS (this must be done using a SASS compiler node-sass, gulp-sass, npm webpack, etc..), the resulting CSS is the customized Bootstrap. If you're not familiar with SASS, you can customize Bootstrap using a tool like this theme builder I created.
Custom Bootstrap Demo (SASS)
Note: Unlike 3.x, Bootstrap 4.x doesn't offer an official customizer tool. You can however, download the grid only CSS or use another 4.x custom build tool to re-build the Bootstrap 4 CSS as desired.
Related:
How to extend/modify (customize) Bootstrap 4 with SASS
How to change the bootstrap primary color?
How to create new set of color styles in Bootstrap 4 with sass
How to Customize Bootstrap
I think the officially preferred way is now to use Less, and either dynamically override the bootstrap.css (using less.js), or recompile bootstrap.css (using Node or the Less compiler).
From the Bootstrap docs, here's how to override bootstrap.css styles dynamically:
Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>
To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.
Or if you prefer to statically compile a new bootstrap.css with your custom styles (for production environments):
Install the LESS command line tool via Node and run the following command:
$ lessc ./less/bootstrap.less > bootstrap.css
Since Pabluez's answer back in December, there is now a better way to customize Bootstrap.
Use: Bootswatch to generate your bootstrap.css
Bootswatch builds the normal Twitter Bootstrap from the latest version (whatever you install in the bootstrap directory), but also imports your customizations. This makes it easy to use the the latest version of Bootstrap, while maintaining custom CSS, without having to change anything about your HTML. You can simply sway boostrap.css files.
You can use the bootstrap template from
http://www.initializr.com/
which includes all the bootstrap .less files. You can then change variables / update the less files as you want and it will automatically compile the css. When deploying compile the less file to css.
The best option in my opinion is to compile a custom LESS file including bootstrap.less, a custom variables.less file and your own rules :
Clone bootstrap in your root folder : git clone https://github.com/twbs/bootstrap.git
Rename it "bootstrap"
Create a package.json file : https://gist.github.com/jide/8440609
Create a Gruntfile.js : https://gist.github.com/jide/8440502
Create a "less" folder
Copy bootstrap/less/variables.less into the "less" folder
Change the font path : #icon-font-path: "../bootstrap/fonts/";
Create a custom style.less file in the "less" folder which imports bootstrap.less and your custom variables.less file : https://gist.github.com/jide/8440619
Run npm install
Run grunt watch
Now you can modify the variables any way you want, override bootstrap rules in your custom style.less file, and if some day you want to update bootstrap, you can replace the whole bootstrap folder !
EDIT: I created a Bootstrap boilerplate using this technique : https://github.com/jide/bootstrap-boilerplate
I recently wrote a post about how I've been doing it at Udacity for the last couple years. This method has meant we've been able to update Bootstrap whenever we wanted to without having merge conflicts, thrown out work, etc. etc.
The post goes more in depth with examples, but the basic idea is:
Keep a pristine copy of bootstrap and overwrite it externally.
Modify one file (bootstrap's variables.less) to include your own variables.
Make your site file #include bootstrap.less and then your overrides.
This does mean using LESS, and compiling it down to CSS before shipping it to the client (client-side LESS if finicky, and I generally avoid it) but it is EXTREMELY good for maintainability/upgradability, and getting LESS compilation is really really easy. The linked github code has an example using grunt, but there are many ways to achieve this -- even GUIs if that's your thing.
Using this solution, your example problem would look like:
Change the nav bar color with #navbar-inverse-bg in your variables.less (not bootstrap's)
Add your own nav bar styles to your bootstrap_overrides.less, overwriting anything you need to as you go.
Happiness.
When it comes time to upgrade your bootstrap, you just swap out the pristine bootstrap copy and everything will still work (if bootstrap makes breaking changes, you'll need to update your overrides, but you'd have to do that anyway)
Blog post with walk-through is here.
Code example on github is here.
Use LESS with Bootstrap...
Here are the Bootstrap docs for how to use LESS
(they have moved since previous answers)
you can start with this tool, https://themestr.app/theme , seeing how it overwrites the scss variables, you would get an idea what variable impacts what. its the simplest way I think.
example scss genearation:
#import url(https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700);
$font-family-base:Montserrat;
#import url(https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);
$headings-font-family:Open Sans;
$enable-grid-classes:false;
$primary:#222222;
$secondary:#666666;
$success:#333333;
$danger:#434343;
$info:#515151;
$warning:#5f5f5f;
$light:#eceeec;
$dark:#111111;
#import "bootstrap";