Flask // bootstrap // navbar not rendering properly

Question

I am fairly new to Flask, and Bootstrap, and I am trying to recreate a navigation bar from (https://getbootstrap.com/docs/4.0/components/navbar/)

I have my base.html file:

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

    {% block title %}
        {% if title %}{{ title }} - Title{% else %}Title{% endif %}
    {% endblock %}

    {% block navbar %}


    <div class="navbar navbar-fixed-top navbar-expand-lg navbar-dark bg-primary">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </div>
{% endblock %}

{% block content %}

{% endblock %}

Then I have my app.py:

from flask import Flask, render_template, request
import pandas as pd
from flask_bootstrap import Bootstrap

def create_app():
    app = Flask(__name__)
    Bootstrap(app)
    return app

app = create_app()


@app.route('/')
def index():
    return render_template('index.html')

app.run()

And my index.html:

{% extends "base.html" %}

{% block content %}
<h1> Test </h1>
{% endblock %}

But unfortunately, my nav-bar renders like so: navbar

Any idea what could be going on?

Can you include code from bootstrap/base.html that your base is extending? Just a note there is a newer version of bootstrap available above 4.0 which would be recommended. — djnz
– djnz, Commented Jan 14, 2020 at 21:17

Grey Li · Accepted Answer · 2020-01-18 03:12:28Z

1

The HTML code you use is for Bootstrap 4, however, the Flask extension (Flask-Bootstrap) you use only supports Bootstrap 3. It will include Bootstrap 3's resource in the bootstrap/base.html template.

You can either change the HTML code to Bootstrap 3 or use another Flask extension that supports Bootstrap 4.

answered Jan 18, 2020 at 3:12

Grey Li

13k4 gold badges60 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flask // bootstrap // navbar not rendering properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related