Documentation is thorough, well organized and full of live examples and templates ready for use. Every component and every part of the framework is explained and covered in depth.
Bootstrap has an out-of-the box filesize of ~276K, which is pretty large considering it's just CSS. Most of those styles aren't even used in 90% of web pages built with Bootstrap. By only including the required styles it can be trimmed by 70%-75%.
If the initial Bootstrap colors and styles are not changed or edited, different websites start looking the same even if they have nothing to do with each other and they are made by different developers.
Bootstrap is developed to be instantly compatible with all sizes of screens, so you don't have to worry about which device the user is accessing your site from. Yet if you prefer, you can disable responsiveness of Bootstrap.
Bootstrap is designed to get a site up and running quickly. Each of it's components is pre-configured to help with getting a site up and running quickly.
The grid layout with the predefined CSS elements and JavaScript components make it easier to have consistency across different browser versions and even different devices.
Bootstrap can be customized in a variety of ways. Either by overriding the default CSS styles with new CSS styles or by editing the .scss Bootstrap files.
If you don't want to download the full Bootstrap framework. Custom builds of Bootstrap can be created, including only the desired CSS, CSS components, and JavaScript components. This can be done directly from the Bootstrap website by simply choosing what components to download.
Bootstrap is very popular and has a large community. As a result of this it is much easier to find help with anything you might need. This also gives you a treasure trove of prebuilt components to use and add to your site.
Bootstrap's over-reliance on HTML classes for styling can get very messy very quickly. There's also an overabundance of DOM elements which have a lot of classes and are more often than not nested inside DOM elements with even more classes. This gets problematic down the line because the maintainability of the project gets harder when the project starts to get large.
Foundation was one of the first frameworks to adopt a mobile-first philosophy. By focusing on mobile design first, Foundation makes designers think on what kind of content is important, relevant and interesting to the users without thinking too much on the space.
Foundation uses REMs instead of pixels, meaning you don't have to state an explicit height, width, padding, etc, for every device. Simply put, using REMs means you can just state font-size: 80%; and have the whole component (and its nested elements) shrink by 20%.
This is great for making your site mobile friendly. There is also a Sass function in Zurb that converts pixels to REMs so if you're used to thinking in pixels, you don't have to learn a different system.
Foundation comes with Interchange, it makes use of media queries to load images responsively and create content that's suited to different browsers and devices.
There's a variety of front-end templates, icon fonts, responsive table examples, SVG icons and stencils that help you quick-start or easily improve on your site.
This problem will bring attention when used with Angular, React and other JS framework. It is important to know that they create app version of this framework.
Foundation has a feature called block grid. Block grid gives designers the power to divide the contents of an unordered list into a grid that is evenly spaced. Furthermore, Foundation also takes care of collapsing columns as well as removing gutters.
Just by looking at the name, Foundation merely provides designers with a foundation of sorts on which they can build their design. It can be customized easily through SASS, a powerful CSS pre-processor or by overriding the default CSS styles.
Since Foundation is built to be customizable, it's default style may not be very appealing for most. While it's true that most production-ready websites shouldn't be using the default style of a css framework (they would all end up looking the same), this is even more true for Foundation.
Compass isn't a UI components library like Bootstrap. It doesn't have tabs, tooltips, modals or even badges. You won't see any of these in their demo (there isn't a demo per se).
There are plenty of ready to use themes available from the official website. You can choose the theme that you want to use from the dropdown menu and then download the CSS, LESS or SASS file for that theme to use for the website.