Skip to content

Bootstrap setup

Jump to bottom
Manish Sah edited this page Sep 20, 2020 · 3 revisions

Integrating bootstrap

we can add bootstrap in our application by copying these lines inside head tag

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

you can visit this link to get more information.

lets add bootstrap to our home.html file

templates/home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Title</title>
</head>
<body>
This is home page

</body>
</html>

Also lets do the same for our about file

templates/about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    {% if title_name %}
    <title>{{ title_name }}</title>
    {% else %}
    <title>Title</title>
    {% endif %}
</head>
<body>
<h1>This is the about page</h1>
</body>
</html>

Template Inheritance

We have successfully added bootstrap in our application but there is still a problem.

As we can see here, there are lots of code that are same for both home.html and about.html and this is not good as we have to change the same code at two different places. There is a concept called DRY(don't repeat yourself). We can achieve this by creating a layout.html file which will have common code required for all the html files and other html files will extend this layout file.

lets create a layout.html file in our templates directory. In this file we will add codes for bootstrap integration, navigation,footer,etc

templates/layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    {% if title_name %}
    <title>{{ title_name }}</title>
    {% else %}
    <title>Title</title>
    {% endif %}
</head>
<body>

{% block content %}
{% endblock content %}

</body>
</html>

Now home and about html file will extend this layout file and add code which is specific to those pages inside the {% block content %}{% endblock content %}

now home file will look like

templates/home.html

{% extends 'layout.html' %}
{% block content %}
<h1>This is home page</h1>
{% endblock content %}

similiarly about file will look like

templates/about.html

{% extends 'layout.html' %}
{% block content %}
<h1>This is about page</h1>
{% endblock content %}

As we can both home and about extends layout file by simply adding the line

  • {% extends 'layout.html' %}

Implementation can be found over this commit

Clone this wiki locally