Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable styling on <pre> in bootstrap

I am using HTML's <pre></pre> to render my text as is with \n and spaces in a block. But bootstrap's default behaviour puts a <pre> block in a bordered box with a grey background. I don't want that. I want it to displayed as plain text.

How to disable that styling behavior for pre?

like image 250
MohitC Avatar asked Mar 16 '16 11:03

MohitC


People also ask

Can I use Bootstrap and CSS together?

How to Use Bootstrap CSS. In order to use Bootstrap CSS, you need to integrate it into your development environment. To do that, you simply need to create a folder on your computer. In that folder, save your compiled CSS and JS files and a new HTML file where you'll load Bootstrap.

What is pre style in HTML?

The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code. Also look at: Tag.

Is Pre an inline tag?

HTML pre element is an inline element.

Why my CSS is not working in bootstrap?

These are the possible reasons: You have a wrong or incorrect link to the bootstrap file. browser caching and history is messing with your html. Other CSS files are overriding the bootstrap file.


1 Answers

You can just do this:

pre {border: 0; background-color: transparent;}

Check this Vanilla CSS Un-Reset for default values of other properties.

like image 98
Praveen Kumar Purushothaman Avatar answered Sep 19 '22 04:09

Praveen Kumar Purushothaman