Create a Bootstrap Styled Responsive Page
📌 Introduction
Bootstrap is a CSS framework used to create:
- Responsive layouts
- Attractive UI
- Mobile-friendly designs
👉 No need to write full CSS manually.
🎯 Program Statement
👉 Create a Bootstrap styled responsive page.
🧠 Why Bootstrap?
- Fast UI development
- Mobile responsive
- Predefined components
⚙️ Step 1: Create View
📁 File: views.py
🔹 Path:
myproject/myapp/views.py
🔹 Code:
from django.shortcuts import render
def bootstrap_demo(request):
return render(request, 'bootstrap.html')
⚙️ Step 2: URL Mapping
📁 File: urls.py
🔹 Path:
myproject/myproject/urls.py
🔹 Code:
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('bootstrap/', views.bootstrap_demo),
]
⚙️ Step 3: Create Template
📁 File: bootstrap.html
🔹 Path:
myproject/templates/bootstrap.html
🔹 Code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Page</title>
<!-- Bootstrap 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-4">
<h1 class="text-center text-primary">Bootstrap Responsive Page</h1>
<!-- Row -->
<div class="row mt-4">
<!-- Column 1 -->
<div class="col-md-4">
<div class="card p-3">
<h3>Card 1</h3>
<p>This is a Bootstrap card.</p>
</div>
</div>
<!-- Column 2 -->
<div class="col-md-4">
<div class="card p-3">
<h3>Card 2</h3>
<p>Responsive layout example.</p>
</div>
</div>
<!-- Column 3 -->
<div class="col-md-4">
<div class="card p-3">
<h3>Card 3</h3>
<p>Works on mobile & desktop.</p>
</div>
</div>
</div>
<!-- Button -->
<div class="text-center mt-4">
<button class="btn btn-success">Click Me</button>
</div>
</div>
</body>
</html>
⚙️ Step 4: Run Server
python manage.py runserver
🌐 Step 5: Output
👉 http://127.0.0.1:8000/bootstrap/
✅ Output Features:
- Centered heading
- 3 responsive cards
- Styled button
- Mobile-friendly layout
🧠 How It Works
Bootstrap CDN
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
👉 Loads Bootstrap
Grid System
<div class="row">
<div class="col-md-4">
👉 Creates responsive columns
Card Component
<div class="card p-3">
👉 Styled content box
Button
<button class="btn btn-success">
👉 Pre-styled button
🔥 Key Concepts
| Class | Purpose |
|---|---|
container | Page layout |
row | Horizontal grouping |
col-md-4 | Column size |
card | Content box |
btn | Button styling |
⚠️ Common Errors
❌ Bootstrap CDN missing
👉 Page will look plain
❌ Wrong class name
❌ Wrong:
col-4
✅ Correct:
col-md-4
❌ Not using container
👉 Layout breaks
🧪 Practice Questions
- Add 4 cards instead of 3
- Change button color
- Add image inside card
- Create form using Bootstrap
🎤 Viva Questions & Answers
1. What is Bootstrap?
Bootstrap is a CSS framework for designing responsive web pages.
2. What is CDN?
Content Delivery Network used to load external libraries.
3. What is responsive design?
Design that adapts to different screen sizes.
4. What is grid system?
Bootstrap layout system using rows and columns.
5. What is container class?
It provides proper spacing and alignment.
6. What is card component?
A styled box used to display content.
7. What is col-md-4?
Defines column width for medium screens.
8. What is Bootstrap button class?
btn, btn-primary, btn-success, etc.
9. Why use Bootstrap?
To quickly build responsive UI.
10. Is Bootstrap mobile-friendly?
Yes, it is fully responsive.
🔗 Navigation
👉 Next Post: Responsive Navbar and Footer
👉 Back to List: Django Programs (60 Questions with Solutions)
Further Reading
Introduction to Django Framework and its Features
Examples of Array Functions in PHP
Registration Form Using PDO in PHP
Inserting Information from Multiple CheckBox Selection in a Database Table in PHP
- Angular
- ASP.NET
- C
- C#
- C++
- CSS
- Dot Net Framework
- HTML
- IoT
- Java
- JavaScript
- Kotlin
- PHP
- Power Bi
- Python
- Scratch 3.0
- TypeScript
- VB.NET