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
Related
This question already has answers here:
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 6 months ago.
Is it similar in using media query in CSS to using container utility in CSS bootstrap? I find the media query somewhat ridiculous in its implementation?
Media query: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Introduction: Bootstrap is based on normal css (which include the media queries you posted) combined with js and html. But you have some classes and components (html tags) already customized in order to help you. Now it depends on what you mean by similar. You can use pure html, css and vanilla js to accomplish everything bootstrap offers (since this is what bootstrap is based on). But a lot of bootstrap features have a lot of code behind, so it would be quite complicated for some of them.
The response: Since the containers from bootstrap are based on css + js + html (some of them containing media queries as well) your html container won't behave the same by default (you can accomplish similar results only with some extra code).
The mdn link you posted is showing the normal behavior of css media queries. You can use them to extend bootstrap features or to create a custom html element that fits your needs (depending on the case, it can be easier to create the component from scratch rather than modify one with a lots of unneeded features behind).
Getting back to the question: some of the customized bootstrap elements have some media queries integrated (or some other custom options, including js) that might not work with pure css or they would be pretty hard to achieve. This is why the answer is kind of generic (as the question)
Conclusion: even though bootstrap might seem way easier in some cases I strongly advise you to try to understand the basics of css (media queries included). On the long term, this would help you a lot when you need to customize a component or create a new customizable component yourself. Also an advice: if you ever need to customize a component try to avoid !important rulles in css. To accomplish this try to also understand css specificity.
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 have asked myself (not tested) if it is possible to integrate both bootstrap and materializecss into the same project
Since both frameworks are for the same purpose and probably overlapping in some class definitions etc. is it still possible to combine both frameworks in order to expand my styling options?
Materialize is not based on Bootstrap nor just a "visual layer", using both frameworks may lead to a lots of incompatibilities or at least overlap a lot as most of their functionalities are redundant (grids, menus, icons, etc).
I personally use this project Bootstrap material design which is a theme for Bootstrap and works very well.
If you don't need/want Bootstrap you can also use Material Design Lite that has been recently released by Google. It is a light CSS framework based on Material Design guidelines. Light in comparison to Angular Material or Polymer also using Material Design guidelines but part of or requiring other javascript frameworks (i.e. Angular).
I added Materialize to my bootstrap website and it worked fine, like JC Borlagdan said though there is some overlapping. I just use a website inspector and (usually right click > inspect element) then just turn off the bootstrap or materialize property to see which one I like more and remove the styling from the one I don't like. Just make sure you get the non minified versions of materialize and bootstrap.
It is possible, I already tested both framework in a single web form, though some properties of the controls overlapped, especially to the <div> tag that calls the container class for the tag.
For the grid, it actually follows still the bootsrap, for some reason, (that I don't know). Because I tried rearranging the order of <script> tags, still bootsrap grid still the one used by the webpage/webform.
you need to set the order of CSS files like
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>
Now you can override bootstrap css classes or ids, and can make your own CSS styles.
You could remove the GRID from materialize.css and just compile a custom bootstrap package with BT GRID and without the buttons, labels etc.
Don't use any BT jQuery Plugin, then compile and load bootstrap.min.css first in your template and then the modded materialize.css and materilize.min.js.
You can also integrate just buttons, cards or colors by picking them out of materialize.css and insert in your template.css / style.css to overwrite
bootstrap styles or to add alternative css classes to your GRID.
I'm not sure that's possible. Material Design is something new from Google, and includes responsive as part of it, while the Bootstrap library is from Twitter and seems to be mostly responsive-oriented.
Check out this conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
I suspect that they are not going to be integrated with each other, and will conflict badly, but maybe someone else has more information.
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.
Skeleton is made to scale to also fit mobile browsers, following the principles of responsive web design. Does Bootstrap offer the same?
Not yet - http://groups.google.com/group/twitter-bootstrap/browse_thread/thread/6db57d09f654a326?pli=1
But it will be, at some point. The Roadmap has this in for version 2.0. It's lightweight enough that in my experience you can add in your own media queries without much trouble.
EDIT - As of 1 Feb 2012, version 2.0 is out, which is responsive down to mobile out of the box.
EDIT - As of 19 Aug 2013, version 3.0 is out, which is not only responsive but takes a mobile-first approach:
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
Apparently it should support it now.
Originally built with only modern browsers in mind, Bootstrap has
evolved to include support for all major browsers (even IE7!) and,
with Bootstrap 2, tablets and smartphones, too.
Source: http://twitter.github.com/bootstrap/#grid-system
If you go to the site and resize your browser, you will se it's fitting nicely.
Yes Twitter Bootstrap's 2.0 version is based on responsive web design. look at their website: http://twitter.github.com/bootstrap/. You will have to play around with it when you download, cause the download version does not have it. You will have to rename the responsive css, best option is to look at their website and try to reverse engineer it.
Mobile-friendly has many meanings. Bootstrap is responsive, which is a mobile-friendly attribute. It's also extremely heavy (it's designed for applications) - which is not mobile-friendly, especially for websites.
The Yahoo Pure framework is about 1/10th the weight, and provides the same feature set for websites. I'd suggest something similar over Bootstrap for a mobile website.