Currently, I am utilizing Google's prettyprint alongside bootstrap to exhibit SQL statements with syntax highlighting. However, there seems to be a disconnect in terms of responsiveness, as it does not adhere to the column width of 12 in bootstrap. Instead, it maintains its own fixed width and height. Despite my attempts with the prettyprint class and bootstrap's grid system, I have been unsuccessful in altering this behavior.
<div class="col-md-12">
<h4>Query Output</h4>
<code class="prettyprint">Select name, description From android_db.group Where id='1';</code>
</div>