'Django/Bootstrap: some basic styles are not working as expected (nav-tab, button)

Using Django with Bootstrap(v5) it seems the "nav-tabs" class is not being styled as tabs, and gray buttons are not being styled as pills. It seems like only part(?) of bootstrap is working. Why is this?

I tried using Bootstrap v4 and v5 with no change.

enter image description here

<!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">&times;</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>
htmlcssdjangobootstrap-5


Solution 1:[1]

Ok, so the tabs worked because the unordered list and each lineitem needed to have special mention in their class syntax like so...

<ul class="nav nav-tabs">
<li class="nav-item">
    <a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#menu2">Menu 2</a>
</li>
</ul>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anthony M

Related Questions