When using Django in combination with Bootstrap v5, I am encountering an issue where the "nav-tabs" class is not being styled as tabs and gray buttons are not taking on the pill style. It appears that only a portion of Bootstrap is functioning correctly. What could be causing this discrepancy?
I attempted to switch between Bootstrap versions 4 and 5, but the issue persisted.
https://i.sstatic.net/Y2BHH.png
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="text-center bg-primary text-white">
<h3>My Site!</h3>
</div>
<div class="container-fluid text-center">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Filter</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<button type="btn btn-outline-primary">Reset</button>
<button type="btn btn-outline-primary">Filter</button>
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong>
</div>
</div>
<div class="col-sm-4">
<h3>Select View</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
<div class="col-sm-4">
<h3>Chart</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</div>
</div>
</body>
</html>