0

I want to ask how can I make the buttons Get LenoxBot and Dashboard on the bottom of each card because they currently have different heights.

How it looks currently

I am currently using this code:

<div class="card mt-3 serverscard" style="width: 25rem; margin-bottom: 20px;">
                        <figure style="margin: 20px 60px;">
                            {{#if lenoxbot}} {{#if icon}}
                            <a href="dashboard/{{id}}/overview">
                                <img id="icon-selectserver" class="card-img-top img-fluid" src="https://cdn.discordapp.com/icons/{{id}}/{{icon}}.jpg" height="120"
                                    width="50">
                            </a>
                            {{else}}
                            <a href="dashboard/{{id}}/overview">
                                <img id="icon-selectserver" class="card-img-top img-fluid" src="discordicon.png" height="120" width="120">
                            </a>
                            {{/if}} {{else}} {{#if icon}}
                            <a href="https://lenoxbot.com/invite">
                                <img id="icon-selectserver" class="card-img-top img-fluid" src="https://cdn.discordapp.com/icons/{{id}}/{{icon}}.jpg" height="120"
                                    width="120">
                            </a>
                            {{else}}
                            <a href="https://lenoxbot.com/invite">
                                <img id="icon-selectserver" class="card-img-top img-fluid" src="discordicon.png" height="120" width="120">
                            </a>
                            {{/if}} {{/if}}
                        </figure>
                        <div class="text card-body" style="margin: 0 20px;">
                            <h3 class="text h5 card-title" style="margin-top: 10px; margin-bottom: 10px; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">{{name}}</h3>
                            {{#if lenoxbot}}
                            <h6 class="text h6 card-text" style="margin-top: 10px; margin-bottom: 10px; color:rgb(28, 119, 0);">{{memberscount}} members</h6>
                            <a href="dashboard/{{id}}/overview">
                                <p class="btn btn-primary btn-lg" style="margin-top: 10px; margin-bottom: 10px;">Dashboard</p>
                            </a>
                            {{else}}
                            <h6 class="text h6" style="margin-top: 10px; margin-bottom: 10px; color:rgb(221, 56, 56);">Not using LenoxBot</h6>
                            <a href="https://lenoxbot.com/invite" target="blanc">
                                <p class="text text-white button btn btn-warning btn-lg" style="margin-top: 10px; margin-bottom: 10px;">Get LenoxBot!</p>
                            </a>
                            {{/if}}
                        </div>
                    </div>

Thank you!

Ahmed Salama
  • 2,795
  • 1
  • 11
  • 15
Gilles Heinesch
  • 2,889
  • 1
  • 22
  • 43

1 Answers1

1

Add the following css for your .card element:

.card {
   display: flex;
   flex-direction: column;
}

For your button, add a class to the <a> element and add the following css:

.card-button {
   margin-top: auto;
}

Hope it will work for you..

Shuvo
  • 1,253
  • 9
  • 18