title: Bootstrap nav-pills doesn't work
body: <p>I'm new in Bootstrap, and I'm building a simple application for showing list of products. But I noticed that <code>nav-pills</code> has no CSS effect on the navigation below the table of products.</p>
  
  <p>This is the detailed HTML I'm using as a template:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns:th="http://www.thymeleaf.org"&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;title&gt;Produits&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  &lt;div class="container"&gt;
      &lt;h3&gt;Liste des Produits&lt;/h3&gt;
      &lt;table class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt; 
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Désignation&lt;/th&gt;
                  &lt;th&gt;Prix&lt;/th&gt;
                  &lt;th&gt;Quantité&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr th:each="p:${listProduits}"&gt;
                  &lt;td th:text="${p.id}"&gt;&lt;/td&gt;
                  &lt;td th:text="${p.designation}"&gt;&lt;/td&gt;
                  &lt;td th:text="${p.prix}"&gt;&lt;/td&gt;
                  &lt;td th:text="${p.quantite}"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  &lt;div class="container"&gt;
          &lt;ul class="nav nav-pills"&gt;
              &lt;li role="presentation" th:each="page,status:${totalPages}"&gt;
                  &lt;a href="#" th:text="${status.index}"&gt; &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please note that I'm using Thymeleaf for template engine.</p>
  
  <p>Thanks in advance for your help.</p>