Disable (exclude) bootstrap for one div on a page

Question

I have an application that pulls custom old emails and displays them on a page in DOM. I want to exclude a div that contains this HTML email from bootstrap css. Something like this:

<div class="email_container">
<!-- bootstrap CSS shouldn't apply here-->
<div class="email">
<!-- neither here-->
</div>
</div>

Is there a way this can be done? I did some research and saw people talking about LESS and SASS to solve this but is there a way to do this without them as I don't want to include LESS or SASS in my project just for this purpose.

Dichlamydeous

Might sound dirty, but you could possibly put the HTML email contents into an iframe, this way your styles wouldn't cascade down. – Lamothe

About excluding look here – Lectionary

Overwrite the rules with !important. – Airily

@Lamothe I did think of that but I can't because I have to do DOM manipulations on that email HTML – Dichlamydeous

@DannyFardyJhonstonBermúdez I can't overwrite as the styles are also coming in from a remote source and I will have to manually override each of them which isn't most optimal – Dichlamydeous

@Dichlamydeous - could you not place the js thats doing the dom manipulations inside the iframe too...? – Lamothe

Related: #22863367 – Kraut

Answer 1

I think you should use this class for reseting all the CSS under email_container. In the CSS it says .reset-this * so for the elements under .reset_this will get reseted, then you can add what you want.

This was not created by me, it was taken from the link resetting CSS

JSFiddle Demo

HTML

<div class="email_container reset-this">
<!-- bootstrap CSS shouldn't apply here
<div class="email">
<!-- neither here-->
</div>
</div>

CSS:

.reset-this * {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

Shay

Answer 2

One quick and dirty way to achieve this is to recompile the whole bootstrap stylesheets with a CSS preprocessor after wrapping it into a CSS class like :

.bootstap-include{  
   /* Content of bootstap.css .. */
}

To make it work, the file needs some tweaks :

• Replace the :root selector at the top of the file with a &
• Replace the body selector at the top of the file with a &
• Remove the charset declaration @charset "UTF-8";

See a working pen here : https://codepen.io/kisaure/pen/WNXOBdz

I didn't test it but I think bootsrap.js functions and some other stuff may be broken.

Lavoisier

Answer 3

You can't not exclude some css style, if bootstrap affect all divinto the site, eg:

div {
  color: #000;
  font-size: 10px;
  /* some other styles */
}

if bootstrap or just another css framework has that, so you can't omit the style written above, so the alternative you have to it, is just add a custom class to your "exclude div", try this

<div class="myCustomClassToExclude">
</div>

and in your css style

.myCustomClassToExclude {
  color: #FFF; /*override color*/
  font-size: 20px; /*override font-size*/
  /* here you need to override all the style already set by bootstrap */
}

Subastral