In one of my old project I am using Bootstrap 2.2 .How to update the Bootstrap version to 3.4 without code change and I need new features in Bootstrap 3.2. How to use 2 versions of BS without any issue?
If your code isn't very complicated, give Bootstrap Upgrader a try, it works pretty decently on "vanilla" Bootstrap 2 sites. Bootply has its own tool as well, but in my own experience, BS Upgrader works better, at least until a few months ago when I used it fr the last time.
This being said, you'll need to take a look at the officila Bootstrap Migration Page to see what has changed, because it won't do you much benefit to migrate your site if you don't have any idea about what has changed
Updating your bootstrap is not generally encouraged. Many classes used in old bootstrap are not available in newer versions. You will need to change your HTML and CSS for the same.
For eg- Class for alignment in bootstrap 2.2 are named as span1, span2 and so on where as classes in bootstrap 3.2 for same purpose are named as col-md-1 , col-md-2 and so on for responsive grid structure.
Using new bootstrap can distort your current HTML structure and design also.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
So I'm working on a project that uses bootstrap 2.3.2 stylesheets and bootstrap 3.0.0 .js scripts. Client side is outdated(a lot) and my first goal is to replace bootstrap files so I can start using the latest version, removing poorly written css and using updated classes and bootstrap v4 stuff.
So, what are my concerns right now? I'm worried that old bootstrap classes won't work anymore. Do newer versions support classes and css from older versions? Do I need to have anything else in mind?
I would compare the bootstrap 2.3.2 docs with bootstrap 4. I dont believe that bootstrap 4 offers any backwards compatibility for 2.3.2 stylesheets and the grid system seems to be radically different.
So I would say the first port of call is to check how you are going to have to update the site layout.
v2.3.2 documentation: http://getbootstrap.com/2.3.2/index.html
v4 documentation: https://getbootstrap.com/docs/4.0/getting-started/introduction/
EDIT: I did some reading up on Bootstrap 2.3.2 and one of the key differences is how responsive bootstrap works. Responsive features are not enabled by default in Bootstrap 2.3.2 but can be enabled by using an additional stylesheet.
If the site is responsive enabled it is probably based on the media queries you can see on this page: http://getbootstrap.com/2.3.2/scaffolding.html#responsive
Compare that with the v4 grid and you will see that the sizes of the media queries are slightly different and that modern bootstrap uses a consistent 30px gutter (15px on either side of a column) as opposed to the inconsistent gutter width in v2.3.2.
The site may also make use of "responsive utility classes" to hide elements on certain screen sizes. If you wish to keep these then your best hope for finding similar classes would be on these pages:
https://getbootstrap.com/docs/4.0/layout/utilities-for-layout/
https://getbootstrap.com/docs/4.0/utilities/visibility/
https://getbootstrap.com/docs/4.0/utilities/display/
Alternatively if the site is not responsive enabled then the you may need to rethink your page layouts. Both versions of Bootstrap use a 12 column grid but the container sizes do not appear to match up.
Other things to watch out for:
As noted in the answer before me support for glyphicons has been dropped. The v4 migration guide does suggest some alternatives
The button classes (and several other basic components e.g. progress bars) seem to pretty much match up however the styling of these and other elements with classes that remain in bootstrap 4 will obviously change
-Dropdowns look like they might still work with the new js or with little adjustment.
I am sure there is more than this but thats what I could find on a quick skim through the old documentation.
Good Luck
I would first consider their tutorial on migrating to v4:
https://getbootstrap.com/docs/4.0/migration/
For our project, the major problem was that the glyphicons weren't supported anymore so that we had to replace them:
https://getbootstrap.com/docs/4.0/migration/#components
I am struggling with PrimeFaces css grid, I am using version 5.3 and can't get it working. Somehow the classes ui-g, ui-g1, etc. do not exist/work.
The link to PrimeFaces css grid.
Problem
My problem was that I used the classes ui-g, ui-g-1, etc. These are used in the examples on primefaces.org. While these classes not existed in version 5.3.
Solution
I switched these classes to the older ones: ui-grid, ui-grid-col-1, etc.
I am using Twitter Bootstrap 2 and thinking to migrate to the newer Bootstrap 3. However, I don't find the buttons in Version 3 as appealing as those from Version 2. Is there any simple way to use those nice buttons from v2 inside v3?
Yes, just include the bootstrap-theme[.min].css file that's an optional part of Bootstrap itself.
The Bootstrap Theme includes nice gradients etc. to make Bootstrap v3 look more skeuomorphic like Bootstrap v2. Here's the official example of it in action: http://getbootstrap.com/examples/theme/
Yes, exclude buttons and download bootstrap from http://getbootstrap.com/customize/ , you can then copy the btn sytles from bootstrap 2.x.x stylesheet and use those in your new website which uses bs3.
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
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.