PrettyPrint with Bootstrap is non-responsive

Question

I am using Google's prettyprint with bootstrap to display SQL statements with syntax highlighting. However, it is not following the responsive features of bootstrap, in the column of 12. It maintains it's own width and height. I'm unable to change this using the prettyprint class or the grid system of bootstrap.

  <div class="col-md-12">
    <h4>Query Output</h4>
    <code class="prettyprint">Select name, description From android_db.group Where id=&#39;1&#39;;</code>
  </div>

Answer 1

The reason for this is simple; there is style associated with the code tag; which makes sense if you consider what the code tag does. I would recommend you use the pre tag - that is

<pre class="prettyprint"></pre>

to avoid it. Also, don't forget to escape < and > with < and > respectively. Or they won't render.