Disable (Exclude) Bootstrap for One Div on a Page

Disable (exclude) bootstrap for one div on a page

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;
    }
}

Disable bootstrap for one element

Just override the Bootstrap style. As long as Bootstrap is included on your page before your custom CSS then your CSS should override Bootstrap as the specificity of the selector would be the same. Add this to your custom CSS and override the styles accordingly:

input.login_button {
    box-shadow: none;
    border: none;
    line-height: initial;
    /* Etc. */
}

Here input.login_button has a specificity score of 011 whereas Bootstrap's input[type="text"] only has a specificity score of 010, meaning your custom style will be strong enough to override Bootstrap's regardless of the order of your CSS.

How to remove Bootstrap-container only from large screen

BS5 comes with a whole bunch of utility classes.

If you want container only for medium and small then replace:

<div class="container m-organism-category">

with:

<div class="container-md m-organism-category">

or, you can also use container-float for large and container-md for medium and small:

<div class="container-float container-md m-organism-category">

If you want to get rid of the container altogether, then you'll need to reset the base class CSS. Do so with the following CSS:

@media (min-width: 992px) {
  .un-container {
    max-width: inherit;
    padding: inherit;
    margin: inherit;
  }
}

(Drop that in a <STYLE> tag or in an add-on CSS file.)

and then the html will be:

<div class="un-container container-md m-organism-category">

(If you're compiling from SCSS then use the breakpoint-min function in BS' mixins/_breakpoints.scss)

How to disable all div content

Many of the above answers only work on form elements. A simple way to disable any DIV including its contents is to just disable mouse interaction. For example:

$("#mydiv").addClass("disabledbutton");

CSS

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

Supplement:

Many commented like these: "This will only disallow mouse events, but the control is still enabled" and "you can still navigate by keyboard". You Could add this code to your script and inputs can't be reached in other ways like keyboard tab. You could change this code to fit your needs.

$([Parent Container]).find('input').each(function () {
     $(this).attr('disabled', 'disabled');
 });

How to remove responsiveness of a Bootstrap 3 in only one div by ID

The option of using "important" suggested by Rafael above will work.

Another way you can go is to be more specific in your css. Here is an example:

HTML:

<div class="container">
        <div class="row">
          <div class="col-sm-12"></div>
        </div>
        <div class="row">
          <div class="col-sm-2" id="not_responsive"></div>
          <div class="col-sm-4"></div>
          <div class="col-sm-6"></div>
        </div>
        <div class="row">
          ...
        </div>
      </div>

CSS

.container .row #not_responsive
{
     width: 500px;
     min-width: 500px;
}

Is it possible to exclude all css styling for one specific div container?

Unfortunately no, it's not possible to just clear or reset the styles for a specific container from the css it's inherited. You have to override each style that you want manually.

What you can do is you could namespace your classes and all you'd have to worry about would be element styles that you could define with defaults at the beginning of your style sheet. For example, something like:

div,table,span,img,p{
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    line-height: 1;
    font-family: inherit;
    text-align: left;
}

You can of course add !important to ones that you need and add more elements to the list. If you can't trust or don't know the other styles that are going to be loaded and applied to your page, I find it's best to just start with an empty slate.

---

Related Topics