How to make Twitter Bootstrap's <pre> blocks scroll horizontally?

Question

Per the examples https://getbootstrap.com/docs/4.3/content/code/#code-blocks, bootstrap only supports vertically-scrollable and word-wrapped <pre> blocks out of the box. How do I make it so that I have horizontally-scrollable, unwrapped code blocks instead?

Answer 1

The trick is that bootstrap overrides both the white-space and the CSS3 word-wrap attributes for the <pre> element. To achieve horizontal scrolling, ensure there's this in your CSS:

pre {   overflow: auto;   word-wrap: normal;   white-space: pre; } 

Answer 2

This worked for me:

pre {     overflow-x: auto; } pre code {     overflow-wrap: normal;     white-space: pre; }