How to use Python and Bootstrap for Web Development

29/12/2020
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.

Reference list:

https://pypi.org/project/bootstrap4/
https://pypi.org/project/cubicweb-bootstrap/#history
https://pypi.org/project/django-bootstrap-fields/#history
https://github.com/gocept/js.bootstrap4
http://mkdocs.github.io/mkdocs-bootstrap/
https://cssselect.readthedocs.io/en/latest/

ONET IDC thành lập vào năm 2012, là công ty chuyên nghiệp tại Việt Nam trong lĩnh vực cung cấp dịch vụ Hosting, VPS, máy chủ vật lý, dịch vụ Firewall Anti DDoS, SSL… Với 10 năm xây dựng và phát triển, ứng dụng nhiều công nghệ hiện đại, ONET IDC đã giúp hàng ngàn khách hàng tin tưởng lựa chọn, mang lại sự ổn định tuyệt đối cho website của khách hàng để thúc đẩy việc kinh doanh đạt được hiệu quả và thành công.
Bài viết liên quan

Pandas read_csv Tutorial

Pandas .read_csv I have already discussed some of the history and uses for the Python library pandas.  pandas was designed...
28/12/2020

Python inspect module

Overview Ever wondered how cool would it be to have the power to actually get the source code of some other Python module...
28/12/2020

How to Create and Manage Python Virtual Environments

It is pretty common to see Python developers installing and upgrading packages from standard and non-standard sources to...
29/12/2020
Bài Viết

Bài Viết Mới Cập Nhật

SỰ KHÁC BIỆT GIỮA RESIDENTIAL PROXY VÀ PROXY DATACENTER
17/02/2024

Mua Proxy v6 US Private chạy PRE, Face, Insta, Gmail
07/01/2024

Mua shadowsocks và hướng dẫn sữ dụng trên window
05/01/2024

Tại sao Proxy Socks lại được ưa chuộng hơn Proxy HTTP?
04/01/2024

Mua thuê proxy v4 nuôi zalo chất lượng cao, kinh nghiệm tránh quét tài khoản zalo
02/01/2024