[protonfish]

I am currently maintaining an application originally developed with Bootstrap and it has cost us hundreds of hours in extra maintenance so far. I'll give two examples.

Any grid-based CSS framework breaks content/layout separation - one of the best features of HTML5/CSS. Instead of naming elements based on document role, they are labelled by row and column position. After the prototype was finished, the designer wanted to add a banner at the top of the page. With normal CSS/HTML this would have been an insignificant change, but because we were using a grid, all HTML had to be rewritten because row 1 now equaled row 2, etc.

#2, The CSS in Bootstrap changes the global defaults of all HTML attributes. I have probably written as much CSS to undo bootstrap styles than to add new. I hope you like writing "line-height: normal" over and over again.

I could conclude saying that bootstrap should only be used to build prototypes, then throw it all away before developing the production app, but I don't know why you need fancy formatting in a prototype app. I'd recommend you build the first version in black-and-while/wireframe style, then hire a professional designer for the final decoration. If you are not a graphic designer, focus on writing maintainable, compliant HTML and CSS.

[gavinballard]

I'd suggest that your problem might not so much be the tool itself, but the wrong tool for what you want.

I'd be interested to see what "normal" CSS/HTML you would use to achieve a fluid, responsive grid in a relatively cross-browser fashion, that maintained all of this semantic magic. As much as the "content/layout separation" ideal is lauded, it's pretty difficult to achieve in reality - and just because something is in HTML, I don't believe that makes it "content".

Addressing your two examples: first, you shouldn't have to rewrite "all" of your HTML to add a banner to the top of the page. There aren't any "row1", "row2" etc classes in Bootstrap. If that was a requirement, I think someone's done something funky with your layout.

Second, part of the appeal of Bootstrap is that it changes the global defaults of HTML elements. Such resets are commonplace and give you a consistent look and feel across browsers. If you're looking to "undo" Bootstrap's styles, then you probably shouldn't be using it in the first place.

[protonfish]

Here is an example of a generic HTML doc that changes layout by changing only CSS: http://protonfish.com/csssatori/ It's been a few years since I wrote it and it was just a prototype, but it should be a good example of what you asked to see.

Separating content and layout takes a little effort to learn but I assure you it is possible and effective. In my opinion, grid-based layouts are table-based layouts with a coat of paint.