Remove bootstrap styling on pre element

Question

I use bootstrap and i have to use <pre> tag in my code but Bootstrap styling it and i don't like it. I know that i have to override it but i don't what exactly attributes i must change in such that <pre> looks like just in html without Bootstrap styling .

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<style type="text/css">
    pre{

    }
</style>

So what code i put in <pre> tag ?

Answer 1

Bootstrap styles the pre tag like so

pre{
    display: block;
    font-family: monospace;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

So I suggest you add those property to your stylesheet and style them to make it look like you want. Each browser is different so asking for the basic styling is kind of a hard task to answer.

Here is the basic styling for html tags in each browser

• Firefox (Gecko): http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css. Or, browse to resource://gre-resources/ and look at html.css.
• Chrome/Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
• Chrome (Blink): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Internet Explorer (Trident), all versions: http://www.iecss.com/

Hope that could help :)