Currently, I am working on an application that utilizes Bootstrap 3. Unfortunately, the Bootstrap 3 files (.css/js) have undergone extensive modifications. My task involves integrating the SummerNote Text editor, and although everything is functioning correctly, the styling is chaotic due to the previous customizations. Is it feasible to utilize Bootstrap 4 exclusively for that specific modal?
Below is a snippet of the code for reference. Thank you!
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<title>bootstrap4>
<!-- My application is based on Bootstrap 3, heavily customized -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css>
<!-- My application is based on Bootstrap 3, heavily customized -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote-bs4.css" rel="stylesheet>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote-bs4.js></script>
</head>
<body>
<!-- Triggering the modal using a button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal>Summer Note</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog>
<div class="modal-dialog>
<!-- Modal content -->
<div class="modal-content>
<div class="modal-header>
<button type="button" class="close" data-dismiss="modal>×</button>
<h4 class="modal-title>Modal Header</h4>
</div>
<div class="modal-body>
<div id="summernote></div>
</div>
<div class="modal-footer>
<button type="button" class="btn btn-default" data-dismiss="modal>Close</button>
</div>
</div>
</div>
</div>
<script>
$('#summernote').summernote({
placeholder: '',
tabsize: 2,
height: 100
});
</script>
</body>
</html>