flask内でcropperjsを使う方法

Question

flask内でcropperjsを使う方法が分からずに困っています。bootstrapが邪魔をしている所までは分かりましたが、解決方法が分かりません。
以下のjinjaファイルではcopprjsは問題無く動作するのですが、base.html側でbootstrapを使うとcopperjsが動作しなくなります。bootstrapが原因なので、cssに関する設定の問題なのかと想像していますが、解決方法をご存知の方がいらしたら教えて下さい。

<!-- {% extends "base.html" %} この一文を入れるとcropperjsが動作しなくなる -->
{% import "bootstrap/wtf.html" as wtf %}
{% block page_content %}

<form action="/example" method="post" enctype="multipart/form-data">
  <div id="menu_name_area" class="form-group">
    <div id="menu_name_div">
      {{ form.hidden_tag() }}
      {{ wtf.form_field(form.menu_name, id="manu_name", class="form-control col-6") }}
    </div>
  </div>
</form>

<script type="text/javascript" src="{{ url_for('static', filename='cropper.js') }}"></script>
<canvas id="testCanvas" width="600" height="600" style="border: 1px solid black;" >Your browser does not support canvas.</canvas>
		
<script type="text/javascript">			cropper.start(document.getElementById("testCanvas"), 1); 
function handleFileSelect() {
	var file = document.getElementById("fileInput").files[0];  
	var reader = new FileReader(); 
	reader.onload = function(event) {
	var data = event.target.result; 
	cropper.showImage(data); 
	};
				
reader.readAsDataURL(file); 
}
</script>
<input type="file" id="fileInput" onchange="handleFileSelect()" />
<input type="button" onclick="cropper.startCropping()" value="Start cropping" />
<input type="button" onclick="cropper.getCroppedImageSrc()" value="Crop" />
<input type="button" onclick="cropper.restore()" value="Restore" />
		
{% endblock %}		

以下がextend すると問題を起こすbase.htmlです

<!-- base.html. -->
{% extends "bootstrap/base.html" %}
{% block content %}
   <div class="container">
       {% block page_content %}{% endblock %}
   </div>
{% endblock %}