Bootstrap is a Powerful Framework for Building responsive sites. I use it in all my themes, without putting much thought to whether i should use it or not. But, users may sometime not understand or like to behaviour bootstrap gives to certain components. For example, the <pre>  tag.

Bootstrap’s CSS for pre tag looks like this:

Notice the word-break and word-wrap attributes. They are of interest here. They are set to break word wherever they must be broken, rather than moving it to the next line. For Example, the line can end at ‘welc’ and the next line would start at ‘ome’. The word “welcome” got split into 2 lines, at an unnatural breakpoint. But, that’s how <pre> tags, are supposed to work.

W3Schools, recommends <pre> tag to be used when displaying text with unusual formatting, or some sort of computer code. But, users may use pre tag to display something else, something which doesn’t have unusual formatting. In that case, we will fix the code by overriding it with the Following 2 Attributes.

This should fix it for good.