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.
Related
I've read that bootstrap.css already includes a version of the code from normalize.css, so is it redundant to use both files?
In other words, if I am using bootstrap do I not need to use normalize.css? Or should I use both files to thoroughly ensure cross-browser compatibility?
Bootstrap does have normalize.css included, so it would be redundant to include it elsewhere.
Bootstrap's documentation on normalize.
Bootstrap 4 (Beta) uses Reboot, which builds on Normalize, which would also make including it elsewhere redundant.
In our project we are using WIREFRAME( Base 16 columns) css framework, we want to change the framework to Bootstrap, IS there any easy way to change, or do we need to re write entire css again.
You shouldn't have to convert to Bootstrap unless there are particular styles that Bootstrap offers that Wirefy doesn't. Wirefy is meant to work as a foundation that you can build your entire app on. This means that you can include additional frameworks or stylized classes on top of it without having to convert.
If you still feel you need to convert then it really depends on the types of classes you've included into your wireframe and how they align with that of Bootstrap.
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.
I am trying to implement bootstrap in my current code which is built over existing codebase for few years. The current codebase has several stylesheets and all.
I am using nav-pills and nav-tabs from bootstrap. However, icnluding the bootstrap.css, bootstrap.responsive.css messes up with the current layout elements like header, footer, input etc. I have tried removing some of the properties from bootstrap css files but they are over 7000 lines of code and it is not a good idea to go through every line of code in bootstrap.
Is there a version of bootstrap or way where i can select which component of bootstrap i want to use and my css files are populated accordingly. For eg i want nav-pills and nav-tabs and i believe including lal dependencies code should not be over 50-100 lines. Which is easy to debug and modify as well.
I believe this is what you are looking for:
https://getbootstrap.com/customize/
You can deselect the base CSS to not have it interfere.
You should use the LESS Code from the Bootstrap GitHub Repository. Just download the latest tagged version. You also need a LESS compiler.
In addition you should first include your bootstrap file and afterwards your own stylesheets to make sure it overrides if necessary.
You can customize your 'needs' on project page.
http://twitter.github.com/bootstrap/customize.html
I'm using Twitter Bootstrap right now ver 2.0 and notice that the space is not enough using the 12 column grid.
I think they're using 940px.. so how do I use a custom width without breaking the 12 column grid?
Thanks..
The simplest way would be to customize your own download. Focus on the Grid section.
Alternatively you could edit the LESS or compiled CSS files directly.
You can also create a new stylesheet (or add to an existing one) that simply overrides the values of those variables. This way you don't have to worry about bootstrap updates rewriting your changes. Just make sure you declare the variables after the bootstrap CSS and JS have loaded.
In fact, personally I think that's a better option otherwise you have to remember to re-edit the CSS file every time you install a bootstrap update and this is never a good idea.
This is especially problematic if you're using bootstrap as a gem (say for Rails). That's why I never like overwriting include files directly.