61

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?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Suan
  • 34,563
  • 13
  • 47
  • 61

4 Answers4

86

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;
}
Suan
  • 34,563
  • 13
  • 47
  • 61
  • 13
    I would not recommend over-riding bootstrap classes. Instead I would create a new CSS file called eg. bootstrap-extras.css and define a new class eg. pre-x-scrollable (similar to their pre-scrollable) that applies your behavior above. That way you don't get clashing classes when you upgrade bootstrap from source in the future. – tatlar Dec 28 '12 at 21:27
  • 5
    for bootstrap3: `pre code` and remove the `overflow:auto` – Davy Landman Mar 13 '14 at 15:01
  • Just a heads up, `word-wrap` is [changing](https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap) to `overflow-wrap` in CSS3. – Alex W Jul 17 '14 at 00:19
  • Setting `white-space: pre-wrap` was the trick for me to have the pre block actually wrap as desired – UnionP Aug 29 '17 at 01:16
25

This worked for me:

pre {
    overflow-x: auto;
}
pre code {
    overflow-wrap: normal;
    white-space: pre;
}
KyleMit
  • 30,350
  • 66
  • 462
  • 664
Matt Morey
  • 984
  • 1
  • 11
  • 14
  • [`overflow-wrap`](http://dev.w3.org/csswg/css-text/#overflow-wrap) still has [spotty implementation](http://css3clickchart.com/#overflow-wrap). For now, you should use the older [`word-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap) which is supported by all browsers. – KyleMit Jan 02 '14 at 01:02
  • 4
    @KyleMit For now, you should use both. Then, when `overflow-wrap` starts gaining support you won't have to go back and update all of your CSS. – Alex W Jul 17 '14 at 00:24
16

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;
}
Rick Glos
  • 2,466
  • 2
  • 29
  • 30
2

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;
}
jarhill0
  • 1,559
  • 1
  • 11
  • 19