Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Bootstrap compatibility #145

contra opened this Issue · 6 comments

4 participants


Putting bootstrap and ratchet on the same page mangle eachother sometimes. Probably a wontfix but I figured I would open it anyways.

One example:

.sidebar-nav (bootstrap) gets mangled by


I would love to see this working with Bootstrap. That would be amazing. Can we get this?


I honestly have no idea why anyone would plausibly want to mash two front end frameworks together.


@benschwarz my use case is switching between two templates based on media queries - one bootstrap, one ratchet - while keeping only one front end code base. bootstrap is nice for mobile but ratchet has a better feel to it. i'm sure there are other use cases besides mine


In that case @Contra, you might be better placed to try something like this:

<link rel="stylesheet" media="screen and (max-width: 44em)" href="ratchet.css">
<link rel="stylesheet" media="screen and (min-width: 44em)" href="bootstrap.css">

You'll probably want to use a conditional comment for IE < 8, because media queries are not supported. By using this approach, you'll have entirely different styles loaded for small vs larger viewports.

Bare in mind, ratchet and bootstrap are fundamentally different — using the same markup is not going to yield an equivalent interface for handheld vs wide viewports.

For the rationale described above, I don't believe this to be either plausible or worth the effort required to get a well executed product. YMMV.


@benschwarz I agree - in practice the approach has failed and it is easier to just make two apps but the marketing people love being able to resize and watch the app switch between bootstrap and ratchet views. For some basic use cases it works but anything past 2 or 3 views needs a completely different flow

That solves my issue though - thanks

@contra contra closed this

For what it's worth, I would be interested in having this issue fixed. We are investigating using Ratchet for our cloud-based app designer. In this designer, the app that the user is building is surrounded by chrome (property panes and the like). The chrome is built using Bootstrap and the app under construction uses Ratchet. As the original submitter points out, combining Ratchet and Bootstrap in the same page doesn't work. Scoped style sheets (<style scoped>) or even the Shadow DOM could be used to work around this, but sadly, neither feature has mainstream browser support as of this writing. Our only recourse at present seems to be to modify the Ratchet CSS files manually.

I believe that there are other use cases that also call for making it possible to intermingle Bootstrap and Ratchet. The Ratchet online documentation is one example (which shows a user interface built using Ratchet next to the documentation), but one could also envision design documents incorporating "screen shots" built using Ratchet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.