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

Solution 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;
}

Solution 2:

This worked for me:

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

Solution 3:

I keep coming back to this answer when I start new projects and have to read through comments to remember, oh yea, don't override the bootstrap class and don't forget overflow-wrap, etc...

So you have the stock pre-scrollable, which is vertical only scrolling, you may also want:

Horizontal only scrolling

.pre-x-scrollable {
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
}

Vertical and Horizontal scrolling

.pre-xy-scrollable {
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
    max-height: 340px;
}

Solution 4:

Newer versions of Bootstrap apply styles to both pre and code that wrap words. Adding this to my stylesheet fixed the issue for me:

pre code {
        white-space: pre;
        word-wrap: normal;
}