When you want to make a website good looking, you turn to CSS. There is no better way than that. Because there are many intricacies with CSS, developers have come up with ways to package ‘styles’. The most common choice is Bootstrap, originally developed by and for Twitter. This is not, at all, the only CSS framework so you will see more in this article.

Django Bootstrap

When programming in Python, you would typically use a web framework, one very common one is Django. Fortunately, there is a project for using Bootstrap in Django. This is on Pypi.org so installing is the regular routine. Most likely you are running a virtual environment, activate it and install with pip.

$ pip install django-bootstrap3

The same team supports Bootstrap4, that project has a coverage rating of 89% so your particular feature may be missing. You have to make that decision yourself. Now, you need to add this application to your ‘settings.py’ file.

INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘bootstrap3’,
]

Now, you can use Bootstrap in your site code. Since you are using Django, you have a templates directory defined in your ‘settings.py’ file. In the main template, add the below code.

{% load bootstrap3 %}

<form action="/your/url" method="post" class="form">
{% bootstrap_form form %}
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star"%} SUBMIT
</button>
{% endbuttons %}
</form>

The two values in this code that is interesting are “bootstrap*”, these are template tags and filters that you can lookup how to use in the Django-Bootstrap documentation. The {% buttons %} code can also include parameters that determine the text for submitting and resetting the form. When you get more advanced, make sure you add BOOTSTRAP3 to your settings.py. There are also templates for errors and messages that you can use to control how errors display on your website.

Flask Bootstrap

In Flask you also have a module called Flask-Bootstrap, this is installed in your virtual environment using PIP as usual.

$ pip install flask-bootstrap

The module works very similarly, not surprisingly since they both use the Jinja2 templates engine. The import is a more direct way of using the bootstrap functions so you need to import the module in the top of your ‘app.py’ file. You need to add Bootstrap to your ‘app’ definition in the same file.

from flask import Flask
from flask_bootstrap import Bootstrap

def create_app():
app = Flask(__name__)
Bootstrap(app)

return app

When you have this imported you just need to add it to your templates the same way you would in a regular website. The difference is that you have blocks that define how the different pieces on your website looks. Go through the blocks you have available on their website. Otherwise, you call the framework the same way you would in Django. There are many macros available, i.e. WTForms support.

Other choices

You also have similar projects for cubicweb, called cubicweb-bootstrap. The install is as usual, pip install. It contains the whole library and some routines to use it.

If you don’t find a solution that suites you, investigate what Fanstatic can help you with. It creates ways to import JavaScript dependencies into you Python code. This also works with CSS files. This framework is made to leverage any WSGI compliant web framework so look into this for your specific needs.

Conclusion

If you want to use CSS to brighten your website, the most efficient way is to use an existing framework. The interface to those frameworks are already there, just put your styling in your templates and your good to go. Python and most frameworks available have powerful routines for databases, CSS and many other things that will keep you in control and also let you create amazing things quickly an efficiently.