Twitter Bootstrap and SmartClient integration

[fernandomm]

I'm trying to use SmartClient components in a Twitter Bootstrap website but i'm having some problems since Twitter Bootstrap defines things like:

table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Which seems to affect SmartClient components layout. Did anyone else had success with Bootstrap/SmartClient integration? How did you fixed the layout issues caused by Bootstrap?

Thanks.

[Isomorphic]

Bootstrap has this problem with lots of different widget libraries, since it fundamentally changes how the browser renders basic elements.

On some browsers and with quite a bit of work, you can correct for the damage done by Bootstrap by carefully reversing each of Bootstrap's rules with selectors that will hit only content rendered by SmartClient (or whatever other framework).

Because this is diffuclt and error-prone, we'd recommend taking a very careful look at what you need from Bootstrap and considering alternatives.   For example, Isomorphic considered using Bootstrap for our static content on our website until we saw that it was damaging all of our existing layouts, and we decided to just implement the simple mobile vs desktop mode switching behavior we wanted directly instead.