Ways to restrict Bootstrap CSS and JavaScript to a specific section of the HTML page

Question

Ways to restrict Bootstrap CSS and JavaScript to a specific section of the HTML page

After inheriting a website with an abundance of CSS and JavaScript, the task at hand is adding a toolbar, dialog box, and popper to the existing web page. The ideal choice would be using bootstrap, but unfortunately, there seems to be a conflict between the existing CSS.

An intriguing discovery was made regarding isolating the bootstrap CSS to a specific section of the HTML:

<div class="bootstrap-iso">
  <!-- Any HTML here will be styled with Bootstrap CSS --> 
</div>

The next challenge that emerged was dealing with JavaScript (bootstrap dialog boxes require jQuery and popper.js).

Solution

Ultimately, the decision was made to utilize the uikit library due to its unique features such as "custom-prefix" mode and "scope" mode which effectively address the conflicts faced:

html css bootstrap-4

Answer 1

Answer №1

If you take a look at the provided link, you will see a detailed explanation on how to achieve your desired outcome. Essentially, with a CSS preprocessor, importing Bootstrap CSS can be done from within a custom class.

// Using LESS preprocessor
.my-custom-class {
  @import (less) 'bootstrap.css';
  @import (less) 'bootstrap-theme.css';
}

// Alternatively, with SASS preprocessor
.my-custom-class{
    @import "bootstrap.scss";
    @import "bootstrap-theme.css";
}

As mentioned in the resource, there may be issues with certain classes, such as .my-custom-class body or .my-custom-class html. To resolve this, manual editing using a text editor is necessary.

You need to search for all instances of .my-custom-class body and replace them with just .my-custom-class, as well as do the same for .my-custom-class html.

By following these steps, all your Bootstrap CSS rules will have a specific parent class to target only elements within your designated wrapper:

// Original rule
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

// Updated rule
.my-custom-class .embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

Answer 2

If you take a look at the provided link, you will see a detailed explanation on how to achieve your desired outcome. Essentially, with a CSS preprocessor, importing Bootstrap CSS can be done from within a custom class.

// Using LESS preprocessor
.my-custom-class {
  @import (less) 'bootstrap.css';
  @import (less) 'bootstrap-theme.css';
}

// Alternatively, with SASS preprocessor
.my-custom-class{
    @import "bootstrap.scss";
    @import "bootstrap-theme.css";
}

As mentioned in the resource, there may be issues with certain classes, such as .my-custom-class body or .my-custom-class html. To resolve this, manual editing using a text editor is necessary.

You need to search for all instances of .my-custom-class body and replace them with just .my-custom-class, as well as do the same for .my-custom-class html.

By following these steps, all your Bootstrap CSS rules will have a specific parent class to target only elements within your designated wrapper:

// Original rule
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

// Updated rule
.my-custom-class .embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

Ways to restrict Bootstrap CSS and JavaScript to a specific section of the HTML page

Answer №1

Similar questions

H1 and span elements experiencing abnormal size discrepancies

What is the process for including CSS in the .ashx.cs code-behind file in ASP.NET?

The content of btn-id element in Angular is showing as undefined

Is it possible to use a full-width material-ui Button inside a Badge component?

Retrieving the following element

What is the best way to incorporate animation using Tailwind CSS within my Next.js project?

Implement PHP script to send email upon form submission with POST method in HTML

Resolving DOMException issue in Google Chrome: A Step-by-Step Guide

Implementing a dynamic navigation bar that expands and collapses on mouse hover in a React application

The jQuery focus event appears to be malfunctioning

Synchronize MySQL database structure with HTML5 local storage to enable querying

php$json_data = json_decode($response);

Doesn't seem like jQuery's .blur() is responsive on dynamically created fields

Ways to Retrieve the Index of Elements in the DOM Array Generated by the querySelectorAll() Function in JavaScript

How can I distinguish the search results from the while loop section at the bottom of the page?

Ensure each alternate div has a unique background hue

How can I dynamically display Material-UI's <MenuItem/> within a <DropDownMenu/> using ReactJS?

Placing a Div wrapper around the contents of two corresponding elements

button that takes you back to the top of a mobile website

My code seems to be malfunctioning - why can't I keep the aspect ratio?