3

I am trying to align headers which we define in Title section and buttons which are defined in the Body section aligned the center of web page. Is there any easy way to position the buttons and headers together align vertically in the Center of the Web Page in Flask application?

How to align headers and Buttons to the center of the page in Bootstrap4 ?? 

{% extends 'base.html' %}

{% block head %}

    <h1 align="center"> Please Select A Option </h1>

{% endblock %}

{% block body %}


    <form method="post">
    <input type="submit" class="btn btn-primary btn-lg " name="Enter Logs/Facts" value="Enter Logs/Facts">
    <br>
    <br>
    <input type="submit" class="btn btn-secondary btn-lg " name="View Templates" value="Templates">
    </form>


{% endblock %}

{% block content %}

{% endblock %}

Below Is the Screenshot of the curent HTML page

davidism
  • 121,510
  • 29
  • 395
  • 339
Manoj Deshpande
  • 311
  • 2
  • 18
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D Nov 20 '19 at 16:43
  • Added respective image and code necessary to reproduce it. Thank you. – Manoj Deshpande Nov 20 '19 at 16:53

1 Answers1

0

Read https://getbootstrap.com/docs/4.0/layout/grid/

There is a part on how to center divs horizontally with the class justify-content-center

mikegross
  • 1,674
  • 2
  • 12
  • 27
  • Above solution does not work for me. Is there any way to align buttons and headers in Bootstrap without overriding in our css file as you mentioned. – Manoj Deshpande Nov 20 '19 at 22:58
  • just edited with a link and the potential solution to your problem, but you will have to wrap your input with a div col- and a div row and a div container – mikegross Nov 21 '19 at 10:37