CODEWITHSUNDEEP
pythontwitter-bootstraptwitter-bootstrap-3flask
Jordan
Jordan

Reputation: 912

Bootstrap template inheritance not working for 3 column layout

I am trying to make a simple skeleton template that is the general layout of my site. I changed it to make the three columns be inherited by child templates. But for some reason nothing at all shows up except the navbar. Also, my title and inheritance seems to not be working. That is gonna be my next question. :p

base.html

{% extends "bootstrap/base.html" %}

{% block head %}
    {{ super() }}
    <meta name="viewport" content="width=device-width, initial-size=1">
    <title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}

{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">MyFlask</a>
            </div>
        </div>
    </nav>
{% endblock %}

<body>
    <div class="col-xs-2">
        {% block sidebar_left %}{% endblock %}
    </div>

    <div class="col-xs-8">
        {% block center %}{% endblock %}
    </div>

    <div class="col-xs-2">
        {% block sidebar_right %}{% endblock %}
    </div>
</body>

index.html

{% extends "base.html" %}

{% block title%}Index{% endblock %}

{% block sidebar_left %}
    <p>Text.</p>
{% endblock %}

{% block center %}
    <div class="alert alert-info fade in">
        Sample info popup.
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    </div>
    <div class="text-center h2">Session info:</div>
    <p class="text-center"><b>Browser:</b> <kbd>{{ browser }}</kbd></p>
    <hr>
    <div class="btn-group btn-group-justified">
        <div class="btn-group">
            <button type="button" class="btn btn-warning">Button 1</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-warning">Button 2</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-warning">Button 3</button>
        </div>
    </div>
{% endblock %}

{% block sidebar_right %}
    <p>Text.</p>
{% endblock %}

Upvotes: 0

Views: 223

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9476

There is a lot wrong with your code.

First of all, your nav element should be within the body tag. I guess this is the reason why nothing shows up. Basically ALL 'visible' html should be within the body tag.

Second, you need to wrap your .col-xs-x classes with a .container and .row element for the bootstrap grid system to work properly. Bootstrap grid system

Upvotes: 1

Related Questions