title: Tabs layout in Django
body: <pre><code>{% extends "base.html" %}
  {% load bootstrap4 %}
  {% block content %}
  
  &lt;div class="container"&gt;
  
  
    &lt;!-- Nav tabs --&gt;
    &lt;ul class="nav nav-tabs"&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link active" data-toggle="tab" href="#home"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" data-toggle="tab" href="#menu1"&gt;Baby computer Man&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" data-toggle="tab" href="#menu2"&gt;Menu 2&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;!-- Tab panes --&gt;
    &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane container active" id="home"&gt;A "Hello, World!" program generally is a computer program that outputs or displays the message "Hello, World!". Such a program is very simple in most programming languages, and is often used to illustrate the basic syntax of a programming language. It is often the first program written by people learning to code.&lt;/div&gt;
      &lt;div class="tab-pane container fade" id="menu1"&gt;The Manchester Baby, also known as the Small-Scale Experimental Machine, was the world's first electronic stored-program computer. It was built at the University of Manchester, UK, by Frederic C. Williams, Tom Kilburn, and Geoff Tootill, and ran its first program on 21 June 1948, seventy-one years ago&lt;/div&gt;
      &lt;div class="tab-pane container fade" id="menu2"&gt;...&lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  {% endblock content %}
  </code></pre>
  
  <p>In this code the second and the third tabs do not show the content when i click them. It seems the href is not working. Could you please explain what is wrong with it?</p>
  
  <p>Also how can i position the tabs menu in the middle of the page? Through CSS? Could you please show some example of code or give any tips?</p>
  
  <p>Thank you</p>