Fix the Twitter Bootstrap and Syntax Highlighter styling bug

Introduction

During the development of this blog, I came across a bug which was the result of a conflict between the CSS styling of Twitter Bootstrap and Alex Gorbatchev's SyntaxHighlighter library. With both Bootstrap and SyntaxHighlighter being very popular tools, I figured that I can't be the only one to experience this issue.

This is why I have written post showing how you can fix it with a few lines of CSS.

The bug

The conflicting CSS style is the use of a class called "container". Bootstrap users will already know that the "container" CSS class is a major style for centering page elements. SyntaxHighlighter however, also uses a class called "container" to enclose its lines of code blocks. This re-use of the "container" class causes the code rendered with the SyntaxHighlighter to skip a line like so:

What looks to be padding or margin that pushes the code down a line is caused by Bootstrap's CSS code for the "container" class.

The fix

To remove this margin/padding, simply add the following CSS code to your main CSS file:

.syntaxhighlighter table .container:before {
    display: none !important;
}