Position of the button in Bootstrap

Question

I’m starting with the bootstrap and I made this code for the site q I’m doing in Django

{% load static %}

{% include 'links-css.html' %}
<link rel="stylesheet" href="{% static 'scrapy/style.css' %}">

<div class="container w-50">
    <h1 class="display-4">Scrapy Data</h1>

    <!-- List group -->
    <div class="col-8 mx-auto my-5 py-5" id="Group">
        <div class="list-group">
            <div>
                <a class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Tipos
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseTipos" data-parent="#Group">Scrapy</button>
                    </div>

                </a>
            </div>
            <div>
                <a class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseHab" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Habilidades
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseHab" data-parent="#Group">Scrapy</button>
                    </div>
                </a>
            </div>
            <div>
                <a class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseCat" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Categorias
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseCat" data-parent="#Group">Scrapy</button>
                    </div>

                </a>
            </div>
            <div>
                <a class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapsePoke" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Pokémons
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapsePoke" data-parent="#Group">Scrapy</button>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

{% include 'links-js.html' %}

When I press one of the links(white cards) the button appears, but I wanted to put it at the end of these cards.

Someone knows how to do?

Answer 1

To solve your problem just put two Bootstrap classes together like the list-group-item you must add in the classes d-flex to leave with display:flex and align-items-center to align the content of list-item vertically in the centre and justify-content-between to align an element on each side of the list-item, left and right.

Follow the image code above:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="container w-50">
    <h1 class="display-4 text-center">Scrapy Data</h1>

    <!-- List group -->
    <div class="col-8 mx-auto my-5 py-5" id="Group">
        <div class="list-group">
            <div>
                <a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Tipos
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseTipos" data-parent="#Group">Scrapy</button>
                    </div>

                </a>
            </div>
            <div>
                <a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseHab" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Habilidades
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseHab" data-parent="#Group">Scrapy</button>
                    </div>
                </a>
            </div>
            <div>
                <a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseCat" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Categorias
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseCat" data-parent="#Group">Scrapy</button>
                    </div>

                </a>
            </div>
            <div>
                <a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapsePoke" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Pokémons
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapsePoke" data-parent="#Group">Scrapy</button>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>