Which CSS framework is best for Django websites?

When it comes to Django, it boils down to rapid development.

Web development projects that would take months would just be completed within weeks whenever you use the Django framework for web development.

And, what is the use of rapid development when you have to style your web application using CSS from scratch?

You know how it is — applying margin; float; flex; and the div doesn’t move a thing!

The best CSS framework you can use for Django websites is the Bootstrap CSS framework. You can add Bootstrap to a Django project using CDN or django-bootstrap5 PyPI package. Django works well with Bootstrap allowing you to style your Django website’s web pages, forms, images, cards, tables, buttons, and typography.

When used with Django, Bootstrap allows easier and fast web development that allows you to implement different typography, buttons, tables, navigation, modals, image carousels, cards, and many other styling and components on your websites.

Not only would your Django website look attractive, but also Bootstrap allows you to create responsive designs compatible with computer and mobile devices.

Bootstrap has a wide range of components and templates that are readily available to be used on your Django projects. You will need a few lines of code to implement when you want to add some cards, buttons, or sections such as nav bars on your Django website.

Traditionally, it would take too many lines of CSS code to implement responsive cards or page templates if you were to use CSS only. However, using Bootstrap with Django reduces the lines of code required to style a component or a page on your website.

Fewer lines of code and fast implementation of CSS styling using Bootstrap reduce the development time.

Therefore, you save time and maximize the time spent developing the functionality of a Django website. Spending too much time writing different functionality allows you, as a developer, to provide an effective solution that covers the project’s business scope.

It is easy to develop well-styled and responsive Django websites whenever you use Bootstrap as your preferred CSS framework.

So, if you are asking if you can use Bootstrap in Django, the answer is: Django can be easily integrated with Bootstrap.

And btw, Using Bootstrap is not cheating or taking shortcuts! Bootstrap allows code reusability, a recommended practice in web development, especially in Django. Provided you understand HTML and CSS well and can write well-styled pages, using Bootstrap isn’t taking shortcuts.

So, if you’re a web designer or Django web developer, use Bootstrap to create responsive web designs that look perfect across different devices and screen sizes.

How to integrate/use Bootstrap with Django

Integrating Django with Bootstrap is a very easy process.

You can use PIP to install Bootstrap on your Django project.

Here’s how you install Bootstrap 5 using PIP in the virtual environment that you have installed Django.

Activate the virtual environment or create one if you haven’t set up a Django project by opening the Terminal and typing the following:

Create a new virtual environment

python -m venv ~/.virtualenvs/djangoBootstrap5Env

Or activate an existing virtual environment

source ~/.virtualenvs/DjangoRoutingEnv/bin/activate  

After activating the virtual environment that you have installed Django, use pip to install the Bootstrap 5 Python package.

pip install django-bootstrap5

After installation, open your project settings.py file and add bootstrap5 to the list of your installed apps.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # new line
    'django_bootstrap5',
]

Create a base template that you will use to initiate the bootstrap tags that you will use across your Django web application.

Create a new directory in the same folder that has the manage.py file.

mkdir templates

Create a new base.html file that you will extend from for all your Django HTML templates

touch templates/base.html

Open base.html and paste the following code to initiate Bootstrap tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% load django_bootstrap5 %}

    {# Load Bootstrap CSS and JavaScript #}
    {% bootstrap_css %}
    {% bootstrap_javascript %}

    {# Load Bootstrap alerts #}
    {% bootstrap_messages %}
    <title>Using Bootstrap 5 on Django projects</title>


</head>
<body>
    {% block content %}

    {% endblock content %}
</body>
</html>

Remember to configure Django to include the templates folder when rendering HTML files. On your settings.py file, replace the TEMPLATES variable with the following code:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Whenever you want to use Bootstrap on new Django templates, you just need to extend the templates from base.html. Every time you create new HTML templates, start with the following lines of code:

{% extends 'base.html' %}



{% block content %} 
    <div class="container">
        <div class="row">
            ... add your HTML code here
        </div>
    </div>

{% endblock content %}

And that is how you do it. You may use Bootstrap classes on your Django HTML code, and it will work for your Django templates.

Using the article link below, you may find more information on how to use Bootstrap 5 to style your Django forms without installing a new package such as Django Crispy Forms.

How to use Bootstrap 5 with Django the right way

And that’s it for this tutorial.

I hope to see you next time.

Oooh, wait, reader!

I haven’t pitched a product or service to you, dear. Hmmm, probably not today, but you should check these hosting services out before leaving: The Ahaaa! hosting services for your Django websites.