How to make Twitter Bootstrap's 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

 blocks out          


        

Answer 1

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