How to center horizontally and put an element down inside a column

Question

HTML file:

<div class="container h-100">
     <div class="row h-100">
          <div class="col">
                <h1>{{ auction.name }}</h1>
          </div>
          <div class="col">
               <form method="POST" action="{% url 'bid' auction.id %}">
                  {%   csrf_token %}
                  <input name="bid" type="number" required><br>
                  <input type="submit" value="Make a bid!">
               </form>
               <a class="btn btn-warning" href="{% url 'close' %}">Close auction</a>
          </div>
     </div>
</div>

I would like to put the <a class="btn btn-warning" href="{% url 'close' %}">Close auction</a> in the bottom of the <div class="col"> and in the center horizontally, how can I do? Thank you!

score 0 · Answer 1 · answered Aug 05 '20 at 14:36

This is most simply accomplished using a flexbox layout. The following is not tested but according to the bootstrap docs should give you what you want.

<div class="col d-flex flex-column justify-content-between align-items-center">
           <form method="POST" action="{% url 'bid' auction.id %}">
              {%   csrf_token %}
              <input name="bid" type="number" required><br>
              <input type="submit" value="Make a bid!">
           </form>
           <a class="btn btn-warning" href="{% url 'close' %}">Close auction</a>
      </div>

score 0 · Answer 2 · answered Aug 05 '20 at 14:40

In order to make your button in the bottom of your form you should add a new row (new div with the class row), and in order to center it horizontally you should add one of these classes: pagination-centered or text-center as suggested by this answer. The final code may be similar to this :

<div class="container h-100">
     <div class="row h-100">
          <div class="col">
                <h1>{{ auction.name }}</h1>
          </div>
          <div class="col">
               <form method="POST" action="{% url 'bid' auction.id %}">
                  {%   csrf_token %}
                  <input name="bid" type="number" required><br>
                  <input type="submit" value="Make a bid!">
               </form>
               <div class="row pagination-centered">
                    <a class="btn btn-warning" href="{% url 'close' %}">Close auction</a>
               </div>
          </div>
     </div>
</div>

score 0 · Answer 3 · edited Aug 14 '20 at 07:51

Try this. This may take some editing to get it exactly how you like it, but it should put the warning button below the other buttons and in the center. The key here is the bootstrap class "offset-(number of columns)"

<div class="container h-100">
     <div class="row h-100">
          <div class="col">
                <h1>{{ auction.name }}</h1>
          </div>
     </div>
     <div class="row">
          <form method="POST" action="{% url 'bid' auction.id %}">
              <div class="col-3">
                  {%   csrf_token %}
              </div>
              <div class="col-3">
                  <input name="bid" type="number" required><br>
              </div>
              
              </div>
              <div class="offset-5">
                  <input type="submit" value="Make a bid!">
              </div>
           </form>
     </div>
     <div class="row">
          <div class="offset-5 col-1">
                  <a class="btn btn-warning" href="{% url 'close' %}">Close auction</a>
          </div>
      </div>
</div>

How to center horizontally and put an element down inside a column

3 Answers3