Ay up mate! I want to share how to I modified flask-bootstrap4 after you installed on your flask application.
Because sometimes bootstrap.css/fontawesome.css/popper.js/jquery.js need an update. This is what I've done.
First, flask-bootstrap4 need to be installed to your flask app. So, you will need to activate your virtual environment first to install flask-bootstrap4, and then run your flask application. I named my virtual environment as venv.
If you're on Windows use command prompt to install, but if you're on Linux/MacOS use terminal.
pip install flask-bootstrap4
After you install, go to flask_bootstrap folder in:
venv > Lib > site-packages > flask_bootstrap
Now, modify init.py
__version__ = '4.4.1'
BOOTSTRAP_VERSION_RE = re.compile(r'(\d+\.\d+\.\d+(\-[a-z]+)?)')
POPPER_VERSION = '1.16.0'
JQUERY_VERSION = '3.4.1'
FONTAWESOME_VERSION = '5.11.2'
...
popper = lwrap(
WebCDN('//cdnjs.cloudflare.com/ajax/libs/popper.js/%s/' %
POPPER_VERSION), local)
bootstrap = lwrap(
WebCDN('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/' %
BOOTSTRAP_VERSION), local)
fontawesome = lwrap(
WebCDN('//cdnjs.cloudflare.com/ajax/libs/font-awesome/%s/' %
FONTAWESOME_VERSION), local)
jquery = lwrap(
WebCDN('//cdnjs.cloudflare.com/ajax/libs/jquery/%s/' %
JQUERY_VERSION), local)
app.extensions['bootstrap'] = {
'cdns': {
'local': local,
'static': static,
'popper': popper,
'bootstrap': bootstrap,
'fontawesome': fontawesome,
'jquery': jquery,
},
}
Next step, we need to go to base.html. It's located in template > bootstrap inside flask_bootstrap folder
venv > Lib > site-packages > flask_bootstrap > templates > bootstrap
Let's update base.html
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
<link href="{{bootstrap_find_resource('css/all.css', cdn='fontawesome')}}" rel="stylesheet">
...
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('umd/popper.js', cdn='popper')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
Finally, run your flask app.
Now all bootstrap.css/fontawesome.css/popper.js/jquery.js have been updated.
For more detail, you can see it on the official github of flask-bootstrap4:
github.com/JeffCarpenter/flask-bootstrap4
Well, that's all for today mate. Have a good day.
Happy coding and see you next time.
Top comments (0)