Posted on Feb 9, 2020

Updating flask-bootstrap4 CDN on your flask application

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>