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.
Related
I'm making a react app with styled-components and I want to create a component that will be just like using col col-x and another for row classes from bootstrap.
But my problem is that I can't find the styles for that, I searched for every .col word in the repo and couldn't find anything.
How can I make a component using styled-components that recreates bootstrap col col-x and row without importing the entire bootstrap?
You should be able to get it from the Bootstrap CDN https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.css.
I usually approach this kind of issue by creating a page where I load the library I try to partially emulate and apply it to the structure that I will intend to have. I will extract CSS rules from the dev tools (after loading it in several browsers to find differences of use-cases) and create the same CSS rules into another page, having the same structure, but not using the other library, which is Bootstrap in this case. If there are non-CSS differences, that is, the way that structure is rendered is partially managed by Javascript, then I will make a list of things to achieve and try and find the code for that. In general this will reduce the list of things I have to implement to have only a few items, which tends to be doable.
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.
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 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