Horizontal scroll fix for pre HTML with Bootstrap CSS

When using Bootstrap CSS and <pre>/<code> blocks for sample code, I disappointingly discovered the the code block wasn't horizontally scrolling, and I ended up with a big mess of wrapped code for smaller screen sizes.

For example, you might have some wide spanning HTML like the following snippet:

<pre><code>$ docker-compose ps
   Name                Command                State                    Ports                   
app_mysql_1   docker-entrypoint.sh mysqld      Up      3306/tcp                                 
app_site_1    docker-php-entrypoint apac ...   Up>443/tcp,>80/tcp 

And it rendered like this:

pre html wrap fix - bootstrap css

Definitely not great for mobile viewers!

CSS fix

Adding the following CSS fixed the text wrapping issue:

pre code {
  white-space: pre;
  overflow-x: auto;
  display: inline-block;
  min-width: 100%;

The text stays on the line it's supposed to, without wrapping, and the code block becomes horizontally scrollable too.

Fix for highlight js (hljs)

To throw a spanner in the works when I was using highlight JS to style the Bootstrap CSS code blocks, I found that the above fix wasn't working.

To get around this problem - applying most of the CSS styles above to the .hljs selector, for some specificity battle, triumphed:

.hljs {
  overflow-x: auto;
  display: inline-block;
  min-width: 100%;


Your mobile users will appreciate the non-mangled code, and instead be at peace with the reliable horizontal scroll, and no wrapping text.

Stay up-to-date...

@codechewing is where we always announce the release of any new guide - follow us to keep updated.

Join in

Code Chewing Twitter