Flask: how to open my map only in mid section of my page?

1

Hello, I have created a small web app in Flask. It works well, so now I am having a look at ‘cosmetics’.

I am using bootstrap and everything looks like it should.

It is basically a simple app. On the home page there is a button to launch a map tool.

The map opens covering the whole page.

I would like the map to open in the mid section of the page, leaving the header and footer as they are.

I am not that great with HTML coding, and I think this might be a simple HTML fix, or?
What HTLM code/tags should I add ‘around’ my map button to have it open in the mid section of the page only? Or should I add some Flask in there?

See my code under. The button to open the map is now in the <main> section.

Thanks in advance for any help,
Cheers
Anne

<body class="text-center">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <header class="masthead mb-auto">
            <div class="inner">
                <h3 class="masthead-brand">Title here</h3>
                <nav class="nav nav-masthead justify-content-center">
                    <a class="nav-link active" href="{{ url_for('home') }}">Home</a>
                    <a class="nav-link" href="#" target="blank">Github</a>
                    <a class="nav-link" href="#">Contact</a>
                </nav>
            </div>
        </header>

        <main role="main" class="inner cover">
                <h1 class="cover-heading">Well Map</h1>
                <p class="lead">Text here.</p>
                    <p class="lead">
                        <a href="{{ url_for('well_map') }}" class="btn btn-lg btn-secondary">Click here to launch map</a>
                    </p>
        </main>

        <footer class="mastfoot mt-auto">
            <div class="inner">
                <p>© Anne Estoppey {{year}}</p>
            </div>
        </footer>
    </div>
</body>