I am trying to work with Django CMS and templates. but get an error while editing a template

I want the css and js file to load. It will display the error "Invalid block tag on line 15: 'static'. Did you forget to register or load this tag?" is displayed. but I have created the data correctly. does anyone see the error in my html file?

Here is the code where I suspect the problem

    <!-- Bootstrap core CSS -->
    <link href="{% static  'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static  'css/modern-business.css' %}" rel="stylesheet">

Here is the complete code

{% load cms_tags menu_tags sekizai_tags %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="{% page_attribute 'meta_description' %}">
    <meta name="author" content="Life Imaging Services GmbH">


    <title>{% page_attribute "page_title" %}</title>
    <!-- Bootstrap core CSS -->
    <link href="{% static  'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static  'css/modern-business.css' %}" rel="stylesheet">

    {% render_block "css" %}

</head>

<body>
{% cms_toolbar %}
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="index.html">Start Bootstrap</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                {% show_menu 0 100 100 100 %}
            </ul>
        </div>
    </div>
</nav>

<!-- Page Content -->
<div class="container">

    <!-- Page Heading/Breadcrumbs -->
    <h1 class="mt-4 mb-3">Full Width
        <small>Subheading</small>
    </h1>

    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="index.html">Home</a>
        </li>
        <li class="breadcrumb-item active">Full Width</li>
    </ol>

    <p>Most of Start Bootstrap's unstyled templates can be directly integrated into the Modern Business template. You
        can view all of our unstyled templates on our website at
        <a href="https://startbootstrap.com/template-categories/unstyled">https://startbootstrap.com/template-categories/unstyled</a>.
    </p>

</div>
<!-- /.container -->

<!-- Footer -->
<footer class="py-5 bg-dark">
    <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Your Website 2020</p>
    </div>
    <!-- /.container -->
</footer>

<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}></script>
{% render_block "js" %}

</body>

</html>

Solution

That is because you are not loading the static.

What to do?

Go to the top of the file
Add this {% load static %}

Now you can use the static because you have loaded it.

Read more about it here: https://docs.djangoproject.com/en/3.0/howto/static-files/