How to get Buttons centered vertically and horizontally inside of a card

Question

I'm currently using this bootstrap template in order to create a Help Desk Ticket App: https://colorlib.com/polygon/cooladmin/form.html

On the index page after the user logs in, I have two cards that will allow the user to chose whether they want to head to the app's dashboard or to create a ticket. I'm trying to get both the dashboard button and ticket button to the center of their respective cards.

Picture of Index page

<div class="container">
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    </div>

    <div class="container" id="ticket-dashboard-container">
        <div class="row justify-content-center">
            <div class="card" id="index-page-my-tickets">
                <div class="card-header">
                    <strong>My</strong> Tickets
                </div>
                <div class="container" >
                    <div class="row justify-content-center">
                        <button class="btn btn-info btn-sm" asp-action="EmployeeMyTicketsView" style="height: 30.8px; width: 86.6px">Tickets</button>
                    </div>
                </div>                    
            </div>

            <div class="card" id="index-page-dashboard">
                <div class="card-header">
                    <strong>Dashboard</strong>
                </div>
                <div class="container">
                    <div class="row justify-content-center">
                        <button class="btn btn-info btn-sm" style="height: 30.8px; width: 100.6px">Dashboard</button>
                    </div>
                </div>
            </div>
        </div>
     </div>
</div>

How would I properly go about centering the two buttons?

Github link: https://github.com/zhadjah9559/HelpDeskTicket/tree/3.LoginAndDB

score 0 · Answer 1 · answered Oct 15 '20 at 00:45

Add align-items-center class after justify-content-center that should solve the issue. If it doesn't please provide live example of your code.

<div class="row justify-content-center align-items-center"> <!-- <-- here -->
    <button></button>
</div>

score 0 · Answer 2 · answered Oct 15 '20 at 00:53

Use margin: auto; and width: 50%;

In my example I added a class called holder to the container holding the button element and added the CSS to that class. I also added a height to the .card to show the element centered.

.card {
height: 150px;
}

.holder{
  margin: auto;
  width: 50%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    </div>

    <div class="container" id="ticket-dashboard-container">
        <div class="row justify-content-center">
            <div class="card" id="index-page-my-tickets">
                <div class="card-header">
                    <strong>My</strong> Tickets
                </div>
                <div class="container holder" >
                    <div class="row justify-content-center">
                        <button class="btn btn-info btn-sm" asp-action="EmployeeMyTicketsView" style="height: 30.8px; width: 86.6px">Tickets</button>
                    </div>
                </div>                    
            </div>

            <div class="card" id="index-page-dashboard">
                <div class="card-header">
                    <strong>Dashboard</strong>
                </div>
                <div class="container holder">
                    <div class="row justify-content-center">
                        <button class="btn btn-info btn-sm" style="height: 30.8px; width: 100.6px">Dashboard</button>
                    </div>
                </div>
            </div>
        </div>
     </div>
</div>

How to get Buttons centered vertically and horizontally inside of a card

2 Answers2