I downloaded a customized bootstrap CSS framework from this link
http://twitter.github.com/bootstrap/customize.html.
And I got only bootstrap.css and bootstrap.min.css files.
But as I am using responsive feature, I also need the customised version of bootstrap.responsive.css. How do I make the bootstrap.responsive.css work according to my new bootstrap.css.
PS: I have made 15 span columns and given new width for each.
Thank you.
Its all included in the single CSS file
Related
I got a Bootstrap template that was built by a company and I am doing a bunch of coding and additions to it but I am new to Bootstrap and I am having a problem. I added the vendor.css and theme.css files to my php header and I added the bootstrap.css file as well. My problem is when I try and use some of the bootstrap classes they dont work because of the vendor and theme css files being used. Some of them work but the appearance and functions are different. Is there any way around this so I can still use some of the bootstrap classes. I put the css files in the header in this order. theme, vendor, bootstrap and then my own css file at the bottom. Is the only way to do this by adding my own css file and make the changes. Any advice would be great. Thanks
As far as I understand from your question that, some of your bootstrap classes are working and some of the them are not working.
In that case, I think it is bootstrap version issue. Obviously updated version class will not work in older version class.
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.
I've been working on site using bootstrap. Rather than calling the unedited bootstrap.css and creating a seperate .css file for customisation I added my css changes directly to the bootstrap.css.
My question is - will this cause problems when it comes to using datatables?
Not necesserily. Depends on which classes are used in datatables. You either search in the source of datatables which classes are used or , what i recommend, make your own css, include it after the bootstrap css and change only what you need. For example with the !important markup.
I am using bootstrap sass:
https://github.com/twbs/bootstrap-sass
but where is the boostrap-responsive.css file? I'm trying to add the classes row-fluid to make a layout as shown in this link, but no classes are being picked up.
jsfiddle.net/SxcqH/52/
As there is no bootstrap-responsive.css within Bootstrap 3.x, the .css is separated for each of the elements within the /assets/stylesheets/bootstrap folder, called and imported by the _bootstrap.scss.
Bootstrap 3.x has no "boostrap-responsive.css" file anymore.
All responsive classes are now being compiled into a single css file.
Bootstrap for Sass is currently based on Twitter Bootstrap 3.3.4.
See also this question.
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.