How to Use Bootstrap in Django

How to use bootstrap in django framework?

In the command prompt, ensure your virtual environment is active, and execute the following command:

Step 1:-

Step 2:-

After it your project structure will be like this :-

First of all download bootstrap css file from cdn network link given below

https://getbootstrap.com/docs/5.3/getting-started/introduction/

from here we will copy bootstrap.min.css file link and open any browser and paste this url

https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css

when you open this link then you will see following

After it save it (press ctrl + s)

And save this file bootstrap.min.css file inside your static folder of your hello (app folder ) as shown below inside css folder.

Step 3:- open settings.py file of your webproject folder and add 'hello', as shown below :-

Step 4:-urls.py file code of your webproject folder :-

from django.contrib import admin
from django.urls import path,include

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

Step 5:- views.py file code of your hello app folder :-

from django.shortcuts import render

# Create your views here.
def about(request):
      return render(request, 'about.html') 


def  index(request):
      return render(request, 'index.html') 

Step 6: create urls.py file inside your hello app folder :-

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),

    path('about/', views.about, name='about'),
]

Step 7:- inside your hello app folder create templates folder and under templates folder create

header.html file :-

 <!-- A grey horizontal navbar that becomes vertical on small screens -->
 <nav class="navbar navbar-expand-sm bg-light">

    <div class="container-fluid">
      <!-- Links -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="{%  url  'index' %}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'about' %}">About</a>
        </li>
        
      </ul>
    </div>
  
  </nav>

footer.html file:-

<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
    <div class="col mb-3">
      <a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none">
        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
      </a>
      <p class="text-muted">&copy; 2023</p>
    </div>

    <div class="col mb-3">

    </div>

    <div class="col mb-3">
      <h5>Section</h5>
      <ul class="nav flex-column">
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
      </ul>
    </div>

    <div class="col mb-3">
      <h5>Section</h5>
      <ul class="nav flex-column">
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
      </ul>
    </div>

    <div class="col mb-3">
      <h5>Section</h5>
      <ul class="nav flex-column">
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
      </ul>
    </div>
  </footer>
</div>

index.html file :-

{% load static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{% static 'css/myfirst.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<body>
<div class="container">

<div class="row">
    {% include 'header.html' %} 
    <form>
        <div class="row mb-3">
          <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3">
          </div>
        </div>
        <div class="row mb-3">
          <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3">
          </div>
        </div>
        
        <button type="submit" class="btn btn-primary">Sign in</button>
      </form>

</div>
{%  include 'footer.html' %}
</div>
</body>
</html>

about.html file:-

{% load static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<body>
    <div class="container">
        <div class="row">
        {% include 'header.html' %} 

        <h1>About Page </h1>
    </div>
    {% include 'footer.html' %} 

</div>
</body>
</html>

After it run it as shown below using command :-

And you will see output:-