Card Creation With Button In Django

One common UI element that instantly makes a page look professional is a card with a button, think product listings, user profiles, or event announcements. Over the years, I’ve found creating cards with buttons in Django to be easy once you know the right steps.

In this tutorial, I’ll walk you through how to create a card with a button in Django from scratch. I’ll provide full code examples and explain each step clearly, so you can easily implement it in your projects.

Let’s get in!

Table of Contents

What Is a Card with a Button in Django?

A card is a container that groups related information visually. Adding a button inside a card allows users to take action, such as viewing details, making a purchase, or navigating to another page.

In Django, cards are typically created using HTML and styled with CSS frameworks like Bootstrap. The button can trigger a Django view or link to another page.

Check out Create a model in Django

Method 1: Create a Card with a Button Using Bootstrap in Django

Bootstrap is the go-to CSS framework for responsive and clean UI components. I recommend using Bootstrap for cards because it saves time and looks great on all devices.

Step 1: Set up Your Django Project

If you don’t have a Django project ready, start by creating one:

django-admin startproject myproject
cd myproject
python manage.py startapp products

Add the products app to your INSTALLED_APPS in settings.py.

Step 2: Create a Model (Optional)

For this example, let’s create a simple Product model representing a product card.

# products/models.py
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=100)
    description = models.TextField()
    price = models.DecimalField(max_digits=8, decimal_places=2)

    def __str__(self):
        return self.name

Run migrations:

python manage.py makemigrations
python manage.py migrate

Step 3: Create a View to Pass Data

We’ll create a view that fetches products and sends them to the template.

# products/views.py
from django.shortcuts import render
from .models import Product

def product_list(request):
    products = Product.objects.all()
    return render(request, 'products/product_list.html', {'products': products})

Read Union Operation on Django Models

Step 4: Configure URL

Add a URL pattern for the product list view.

# products/urls.py
from django.urls import path
from .views import product_list

urlpatterns = [
    path('', product_list, name='product_list'),
]

Include this in the main project URLs:

# myproject/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('products/', include('products.urls')),
]

Step 5: Create the Template with Bootstrap Card and Button

Create the template file products/templates/products/product_list.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Product List</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container mt-5">
    <h1 class="mb-4">Available Products</h1>
    <div class="row">
        {% for product in products %}
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title">{{ product.name }}</h5>
                    <p class="card-text flex-grow-1">{{ product.description }}</p>
                    <p class="card-text"><strong>Price:</strong> ${{ product.price }}</p>
                    <a href="#" class="btn btn-primary mt-auto">Buy Now</a>
                </div>
            </div>
        </div>
        {% empty %}
        <p>No products available.</p>
        {% endfor %}
    </div>
</div>

<!-- Bootstrap JS Bundle CDN (Optional if you want interactive components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 6: Run the Server and See the Result

Start the Django development server:

python manage.py runserver

Navigate to http://localhost:8000/products/ to see your cards with buttons.

You can see the output in the screenshot below.

Check out Python Filter Not in Django

Method 2: Create a Card with a Button Using Custom CSS in Django

If you want more control or prefer not to use Bootstrap, you can create cards with custom CSS.

Step 1: Set up Static Files

Create a folder products/static/products/css/ and add a file styles.css:

/* products/static/products/css/styles.css */
.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 350px;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.card-text {
    margin-bottom: 15px;
}

.btn-custom {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}

.btn-custom:hover {
    background-color: #0056b3;
    color: white;
}

Step 2: Update Template to Use Custom CSS

Modify product_list.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Product List</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'products/css/styles.css' %}">
</head>
<body>
<div class="container" style="padding: 40px;">
    <h1>Available Products</h1>
    {% for product in products %}
    <div class="card">
        <h2 class="card-title">{{ product.name }}</h2>
        <p class="card-text">{{ product.description }}</p>
        <p><strong>Price:</strong> ${{ product.price }}</p>
        <a href="#" class="btn-custom">Buy Now</a>
    </div>
    {% empty %}
    <p>No products available.</p>
    {% endfor %}
</div>
</body>
</html>

Step 3: Ensure Static Files Are Served

During development, Django serves static files automatically. For production, configure your web server accordingly.

You can see the output in the screenshot below.

Read Check if Python Dictionary is Empty

Additional Tips from My Experience

Reusable Components: Use Django template inheritance and include tags to avoid repeating card markup if you have multiple pages.
Dynamic Buttons: Instead of a dummy # link, connect buttons to real views or external URLs, such as a checkout page or product details.
Accessibility: Always add aria-labels and proper button roles for accessibility.
Responsive Design: Bootstrap cards are responsive by default, but if using custom CSS, test on various devices.
Using Django Crispy Forms: For buttons that submit forms, consider integrating Django Crispy Forms for better styling and validation.

Creating cards with buttons in Django is a simple yet powerful way to improve your app’s user interface. Whether you prefer Bootstrap for quick styling or custom CSS for full control, the approach is easy.

With the examples above, you can build product listings, user profiles, or any interactive card-based layout tailored to your USA-based projects. Keep experimenting with styles and functionality to match your app’s needs.

If you want to dive deeper into Django UI components, feel free to explore more tutorials and best practices.

Card Creation with Button in Django