Tabs layout in Django

Question

{% extends "base.html" %}
{% load bootstrap4 %}
{% block content %}

<div class="container">


  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Baby computer Man</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane container active" id="home">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.</div>
    <div class="tab-pane container fade" id="menu1">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</div>
    <div class="tab-pane container fade" id="menu2">...</div>
  </div>


</div>


{% endblock content %}

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?

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?

Thank you

What specifically isn't working? Can you post a picture? I put your HTML in a test file and it worked as expected. My only hunch is that your bootstrap may not be loading from your load tag. I usually just link the CDN in the head instead. — Joseph Rajchwald, Nov 11 '19 at 10:19
the Home tab shows the content but when i click "Baby computer Man" tab it does not show the content. Why is that? Is the href wrong or what is the worng with the code? I can't understand. Would appreciate any help or suggestions. — Mial, Nov 11 '19 at 10:38

score 3 · Accepted Answer · edited Nov 11 '19 at 11:24

It works perfectly fine when I replace your {% load bootstrap4 %} tag with the bootstrap CDN. That means you must have set up that tag incorrectly.

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Baby computer Man</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
    <div class="tab-pane container active" id="home">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.</div>
    <div class="tab-pane container fade" id="menu1">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</div>
    <div class="tab-pane container fade" id="menu2">...</div>
    </div>
  </div>
</body>

There're a lot of ways to center elements. Try a few different methods [here](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) and see which one you like best. — Joseph Rajchwald, Nov 11 '19 at 11:16

Tabs layout in Django

1 Answers1