HTML CSS Flask Bootstrap Can't Align DIV?

Question

why can't I align this div with bootstrap and flask?

{% extends "_base.html" %}
{% block content %}

<h1 class="text-center">Welcome {{current_user.email}}!</h1>
<div class="input-group mb-3-center">
    <div class="input-group-prepend">
      <label class="input-group-text" for="inputGroupSelect01">Options</label>
    </div>
    <select class="custom-select" id="inputGroupSelect01">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
{% endblock %}

I've also tried text-center which works, but only for the Options text.

Thank you be easy, i'm new to bootstrap. Typically I'd just use the html tags, but that of course doesn't work.

My base.html that has the bootstrap css inside of it fore reference:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flask User Management</title>
    <!-- meta -->
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- styles -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="{{url_for('static', filename="styles.css")}}">
    {% block css %}{% endblock %}
  </head>
  <body>

    {% include "navigation.html" %}

    <div class="container">

      <br>

      <!-- messages -->
      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
          {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
           {{message}}
           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          {% endfor %}
        </div>
        <div class="col-md-4"></div>
      </div>
      {% endif %}
      {% endwith %}

      <!-- child template -->
      {% block content %}{% endblock %}

    </div>

    <!-- scripts -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    {% block js %}{% endblock %}

  </body>
</html>

Could you please add the lines of code you used to include Bootstrap in this code? Thanks. — , Jun 10 '23 at 23:11
@KirillMcQuillin Sure, I just did it. Thank you for your reply — Tom John, Jun 10 '23 at 23:28
@KirillMcQuillin Yes, I'll put it into a post form and add a submit button later on too. I neglected to mention that — Tom John, Jun 11 '23 at 00:05

score 0 · Accepted Answer · answered Jun 11 '23 at 00:26

Solution 1

To center the drop down and it's corresponding label:

{% extends "_base.html" %}
{% block content %}

<h1 class="text-center">Welcome {{current_user.email}}!</h1>
<div class="input-group mb-3-center" style="display: flex;justify-content: center;">
    <div class="input-group-prepend">
      <label class="input-group-text" for="inputGroupSelect01">Options</label>
    </div>
    <select class="custom-select" id="inputGroupSelect01">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
</div>
</div>
{% endblock %}

Utilizing Flexbox, I added style="display: flex;justify-content: center;" to the outermost div. View this SO question for more options on centering an element horizontally in another element.

Solution 2

The first solution will center the drop down and label, but the label will be on the side of the drop down, not the top. This is a solution for centering the 2 elements, while also placing the label on the top of the drop down.

{% extends "_base.html" %}
{% block content %}

<h1 class="text-center">Welcome {{current_user.email}}!</h1>
<div class="input-group mb-3-center" style="display: flex;flex-direction: column;align-items: center;">
    <div class="input-group-prepend">
      <label class="input-group-text" for="inputGroupSelect01">Options</label>
    </div>
    <select class="custom-select" id="inputGroupSelect01">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
</div>
</div>
{% endblock %}

As you can see, I still use flexbox but now I am setting the flex-direction to column, and aligning items to the center.

HTML CSS Flask Bootstrap Can't Align DIV?

1 Answers1