DEV Community

Sekti Wicaksono
Sekti Wicaksono

Posted on

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

__version__ = '4.4.1'
BOOTSTRAP_VERSION_RE = re.compile(r'(\d+\.\d+\.\d+(\-[a-z]+)?)')


popper = lwrap(
    WebCDN('//' %
            POPPER_VERSION), local)

bootstrap = lwrap(
    WebCDN('//' %
            BOOTSTRAP_VERSION), local)

fontawesome = lwrap(
    WebCDN('//' %
            FONTAWESOME_VERSION), local)

jquery = lwrap(
     WebCDN('//' %
            JQUERY_VERSION), local)

app.extensions['bootstrap'] = {
     'cdns': {
         'local': local,
         'static': static,
         'popper': popper,
         'bootstrap': bootstrap,
         'fontawesome': fontawesome,
         'jquery': jquery,

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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:

Well, that's all for today mate. Have a good day.
Happy coding and see you next time.

Top comments (0)