Apply Bootstrap to a specific region of WordPress post

I applied Bootstrap (v5.0.2) to a specific region of WordPress post.

1. When creating a new post for this blog, I selected Text tab in Classic Editor and entered the following text.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<a href="#" class="btn btn-primary">Bootstrap button</a>

I pressed the Preview button to check it out and the following page was displayed. Unlike other pages, LeafWindow text under the logo was converted to a blue underlined text.

2. So I searched the web and decided to try a method to apply Bootstrap only inside a specific div element. The steps are described below.

2.1. Download bootstrap.min.css (v5.0.2) from Bootstrap page and save it as bootstrap-v5.0.2.min.css.

2.2. Copy bootstrap-v5.0.2.min.css as bootstrap-v5.0.2.min.scss.

$ cp bootstrap-v5.0.2.min.css bootstrap-v5.0.2.min.scss

2.3. Create a file bootstrap-v5.0.2.scss with the following contents.

.bootstrap-v5-0-2 {
  @import "bootstrap-v5.0.2.min"
}

2.4. Compile bootstrap-v5.0.2.scss with the following command.

$ node-sass bootstrap-v5.0.2.scss bootstrap-v5.0.2.css

$ sudo apt install npm
$ sudo npm install -g node-sass

$ sudo npm cache clean -f
$ sudo npm install -g n
$ sudo npm install -g npm
$ sudo npm config set user 0
$ sudo npm config set unsafe-perm true
$ sudo npm install -g node-sass

2.5. Copy bootstrap-v5.0.2.css generated by node-sass command to an appropriate directory. I created the following directory (external-css/bootstrap-v5.0.2/) in my WordPress directory (/var/www/html/wordpress-05/) and copied bootstrap-v5.0.2.css.

$ cp bootstrap-v5.0.2.css /var/www/html/wordpress-05/external-css/bootstrap-v5.0.2/

3. Check to see if Bootstrap is applied only to specific areas

3.1. I entered the following text in the text area of the Classic Editor (Text tab), expecting Bootstrap to be applied only to the html elements in the div area with the class=”bootstrap-v5-0-2″ attribute.

<link rel="stylesheet" href="https://www.leafwindow.com/wordpress-05/external-css/bootstrap-v5.0.2/bootstrap-v5.0.2.css">

<div class="bootstrap-v5-0-2">
    <a href="#" class="btn btn-primary">Bootstrap button</a>
</div>

3.2. I confirmed that the Bootstrap is applied without affecting other elements, such as LeafWindow text under the logo.