Looking to utilize the <pre> tag without any external CSS styles defined in a separate stylesheet?

In my current project, I am using bootstreap v3.2. I am facing an issue where I need to display fetched content from the database on a page using the <pre></pre> tags. However, the problem is that the content is being displayed with the default bootstrap styles applied to the <pre></pre> tag. I want to exclude CSS for this specific tag only. How can I achieve this?

Upon examining the pre CSS, it appears as follows:

pre {
    display: block;
    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;
}

JSFiddle

Answer №1

Locate the following code snippet in your bootstrap.min.js:

pre {
     display: block;
     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;
}

Modify it to:

pre.bootstrap { /* or any other class name */
     display: block;
     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;
}

This will apply default styles to your pre elements. If you prefer to utilize Bootstrap's styles, add the class to the element like so:

<pre class="bootstrap"></pre>

Check out the JSFiddle example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to personalize the icon for this navigation button?

I'm interested in making some changes, especially to the border. I've already figured out how to adjust the color of the 3 bars like so: .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } Modification RESOLUTION .navbar- ...

HTML Brickwork Picture Arrangement

I recently integrated this code into a WordPress theme and encountered an issue where the new images are displaying vertically instead of horizontally. I am seeking assistance in aligning the new images to appear on the green line instead of the red line a ...

Is it possible to achieve a seamless interaction by employing two buttons that trigger onclick events to alternately

I have a specific goal in mind: I want to create two buttons (left and right) with interactive cursors. The left button should initially have a cursor of "not-allowed" on hover, indicating that it cannot be clicked at the beginning. When the right button ...

Troubleshooting problems with scrolling on JavaScript in Edge, Opera, and Chrome

Currently, I am developing a fun CSGO-inspired box opening feature on my food recipe website that randomly selects recipes for users. However, I have encountered some challenges with the scrolling functionality. It seems to be incompatible with certain bro ...

Struggling with the display property d-none in Bootstrap

I'm currently attempting to show a segment of my code exclusively on medium-sized screens and larger, while displaying another portion of the code solely on small and extra-small screens through the utilization of Bootstrap. I made use of Bootstrap&ap ...

Thrilling visual loops in motion with CSS animations

Currently, I am working on developing a captivating 'pulsating rings' animation that revolves around a circular image with the use of CSS animations. The image itself is a circle measuring 400px in width. Although I have successfully implemented ...

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

When the form is submitted, delete the file and its corresponding record

Currently, I have a form that deletes a record from my MySQL database. The database stores the image/file name. I am looking to enhance the statement so that it also removes the file in the website directory with the corresponding image/file name. If bot ...

Implementing CSS in Laravel 8

After placing my CSS file in the public/css folder, I included it in the head section with the following code. <link href="{{ url('/css/app.css') }}" rel="stylesheet"> Unfortunately, the CSS styles are not being applied ...

Can CSS interfere with the execution of the document ready function?

When I have a large CSS file on my page, will my document.ready execution wait for the CSS file to load? <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="large-amount-file.css"> </head ...

Is there a way to create a scroll down and scroll up button that is located outside of the scroll box

A game designer challenged me to create a custom scrollbar with unique up and down button styles, as well as a custom-looking scrollbar. I wanted to achieve this without using the native browser scrollbar on Windows in Google Chrome. I attempted the follo ...

Is it possible to apply border-radius to selections, similar to how it is done in vscode

It was reminiscent of this... Visual Studio Code ::selection{ border-radius: 5px; } I attempted something similar to this, however it was not successful... ...

The successful execution of $.ajax does not occur

Starting out with ajax, I wanted to create a simple add operation. Here is the code that I came up with: HTML: <!doctype html> <html> <head> <title>Add two numbers</title> <meta content="text/html;charset=utf-8" h ...

Styling text by reducing its size with CSS

Utilizing a CSS class to truncate text in the accordion header, which includes both a URL and plain text fields that need to be displayed on the same line. Desired Output: .../abc/xyz Count:42 Current output: .../abc/xyz Count:42/ (An odd slash is ...

Utilize JSON data fetched from a URL to dynamically populate an HTML content

There is a JSON file located at a URL that looks like this: [{"tier":"SILVER","leagueName":"Tryndamere's Wizards","queueType":"RANKED_SOLO_5x5","playerOrTeamId":"91248124", "playerOrTeamName":"NunoC99","leaguePoints":18,"wins":411,"losses":430,"rank" ...

Expanding the size of your Bootstrap 3 input box

Incorporating Bootstrap 3 into a Flask application, I have created a basic layout so far: <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="content"> <div class="pull-middle"> ...

Is the content within the div longer than the actual div itself when the width is set to 100%?

When working with a div of fixed width that contains only an input text box, and the width of the input is set to 100%, you may notice that it extends slightly beyond the boundaries of the div. For demonstration purposes, consider the following code: HTM ...

Tips for positioning images in the center of a footer

Hello, I am new to coding and would like some help adjusting the code for this website: The footer section at the bottom of each page features a row of logos. My goal is to make sure that these logo images display properly on mobile devices (without dropp ...

On smaller screens in portrait mode, CSS automatically incorporates margin adjustments

Here is the code I am working with: <html> <head> <style> body { margin: auto; width: 720px; } </style> </head> <body> <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ip ...

Header with a stable background image that adjusts responsively

While attempting to convert a PSD to HTML, I encountered a small issue. Please refer to the image below: https://i.sstatic.net/5KoIV.jpg As indicated by the red arrow, there is a blue background image in the header of the template! How can I add this bac ...