I'm relatively new to HTML, Jinja, and CSS and have been playing around with creating a webpage that retrieves data from a sqlite3 database. As of now, I am facing some challenges regarding formatting.
To assist with table formatting and overall aesthetics, I have integrated Bootstrap into my project.
In my setup, I have a base.html file and a page.html file. The structure of the base.html file is as follows:
</style>
</head>
<body>
<div class="centered-wrapper">Nexus Gamification</div>
<div>Points
<li><a href="/teams">Team Points</a></li>
<li><a href="/individual">Individual Points</a></li>
<ul>
<a href="/indivConnect">Connect</a>
<a href="/indivDevelop">Develop</a>
<a href="/indivLead">Lead</a>
<a href="/indivLearn">Learn</a>
<ul>
</div>
<hr>
{% block content %}{% endblock %}
Following this, the structure of my page.html is as below:
{% extends "base.html" %}
{% block content %}
<body>
<div class="col-md-6 col-md-offset-3">
<table class="table table-striped" align="center">
...
</table>
</div>
{% endblock %}
However, instead of the table being displayed directly adjacent to the links on the page, it appears below and slightly to the right of them. My intention was to create a sidebar layout for the links, but it seems like the elements are being placed on separate rows. Can anyone provide insights into why this might be happening? Could it be due to having a body tag in both the base.html and the 'extended' page?