I'm starting to work on a large application styling files. As Bootstrap 4 offers SASS files, I decided to follow that path.
I have built the following files structure:
theme.scss: general definitios for the theme like colors and fonts. Today there is just one but there could be more in the future.
global.scss: includes Bootstrap, some Bootstrap overrides and application componentes -i.e. a field with its label as part of the top border.
site.scss: general application styles.
additional page-specific SCSS files. I.e.: login.scss.
The problem I'm having is that global.scss -the one that imports Bootstrap- is then imported by site.scss as well as other files like page-specific SCSS files. So, Bootstrap styles end up in more than one compiled CSS. Compiled CSS files are what the application actually references.
I've previously used LESS and I could solve this using #import (reference) "bootstrap" instead of just plain #import "bootstrap". With SASS I haven't been able to find any solution to this problem without modifying Bootstrap core files.
Is there any other recommended way to organize the files and avoid this problem? Am I missing something or doing anything wrong?
Here are the files contents (they are large files but I'm posting only enough contents to show the problem I'm having):
theme.scss
$my-primary-color: #04459a;
global.scss
#import "../theme.scss";
$primary: $my-primary-color;
#import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
#import "global.scss";
div.field {
#extend %field;
}
// [...]
login.scss (or many other)
#import "global.scss";
// [...]
In the application I'm referencing site.css and login.css (in the loign page, of course) and both of them include Bootstrap styles.
I've built something that works for me, not sure if it's the best solution or which drawbacks it has, though.
I took some ideas from this article: My favored SCSS setup with Bootstrap 4. Here's what I've built:
First I created two SASS files for importing Bootstrap (similar to what the article does with bootstrap/_config.scss but splitted):
bootstrap/_sass-componentes.scss
#import "../../terceros/bootstrap/scss/_functions.scss";
#import "../../terceros/bootstrap/scss/_variables";
#import "../../terceros/bootstrap/scss/_mixins";
bootstrap/_config.scss
#import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
#import "../../terceros/bootstrap/scss/_root";
#import "../../terceros/bootstrap/scss/_reboot";
#import "../../terceros/bootstrap/scss/_type";
// [...]
#import "../../terceros/bootstrap/scss/_utilities";
#import "../../terceros/bootstrap/scss/_print";
Then in global.scss I changed the bootstrap.scss import line to import only bootstrap/_sass-componentes.scss
Finally, in site.scss I included global.scss (such as it was before) and then full Bootstrap files trough bootstrap/_config.scss. **
** After importing _config.scss I also import my Bootstrap customizations. For doing them I followed the recomendation of the linked article although they do not apply directly to my own question.
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.
I downloaded a free HTML theme named dashgum from the internet. I'm implementing it for an Angular2 application using angular-cli. I converted the css files to .scss and pasted the code to the angular application. I then imported the files in the global styles file named styles.scss to apply the styles to the application like this:
#import url('./scss/bootstrap.scss');
#import url('./scss/font-awesome/css/font-awesome.scss');
#import url('./scss/zabuto_calender.scss');
#import url('./scss/gritter/css/jquery.gritter.scss');
#import url('./scss/lineicons/style.scss');
#import url('./scss/style.scss');
#import url('./scss/style-responsive.scss');
The problem that I'm facing during debugging is that all the styles appear as embedded styles in the browser like this (notice the style tag):
I want the style to appear as external styles while inspecting like in the theme. Please notice it in the following screenshot:
These are the default settings in Angular 2 as I made no apparent changes for the styles to appear embedded when inspecting. Is there any known way to change the settings in Angular 2 for the styles to appear as external styles when inspecting? The embedded styles make it harder for me to debug. Any help pointing out towards the solution would be appreciated.
My first advice (like official Angular CLI documentation says) is to put your global library inside .angular-cli.json like this:
...
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"styles.scss"
],
...
Then just run the app with the --extract-css parameter to see in the browser inspector the source files:
ng serve --extract-css
And you will have this:
I have learned that the styles imported in the global styles.scss file always appears embedded when inspecting in the browser. If we want the css to appear as external styles, we will have to use it in components.
Edit:
See toioski's answer above.
The theme.less file that comes with tablesorter seems to be for the non-bootstrap themes - is there a .less file that was used to create the bootstrap theme in table sorter? Having some difficulty recreating a bootstrap css with different color schemes. In particular, I need the white icons that would be used for a dark theme, for example for the .unsorted icon.
I just modified the basic theme.less theme to work with Bootstrap.
Check out the demo here.. so for now, copy the less code from that demo. I'll add the actual file in the next update.
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";