Tips for aligning buttons in the center of a card both vertically and horizontally

I am currently utilizing the following bootstrap template to develop a Help Desk Ticket App:

After the user logs in on the index page, there are two cards available for the user to choose between heading to the app's dashboard or creating a ticket. I am attempting to center both the dashboard button and ticket button within their respective cards.

View Picture of Index Page

<div class="container">
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn more 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>

Any suggestions on how to effectively center the two buttons?

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

htmlcssbootstrap-4centering

Answer №1

Try adding the align-items-center class directly after the justify-content-center class in your code snippet provided below. This adjustment should help resolve the issue you are facing. If this solution does not work, please share a live example of your code for further assistance.

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

Answer №2

To center the element, use margin: auto; and set the width to 50%;

In this scenario, I introduced a new class called holder to the container that encompasses the button element and applied the CSS styles to that specific class. Additionally, a height was added to the .card to demonstrate the centered element visually.

.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>Explore <a href="https://learn.microsoft.com/aspnet/core">the world of ASP.NET Core web app development</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

react-full-page is causing my webpage to not open in a specific ID location, such as http://localhost:3000/#someIdWhereIWantThePageToBeOpened

I'm currently utilizing the react-full-page package and while it's almost working well, I've come across two issues: After clicking on an anchor link like <a href='#someId'>Go There</a>, the scroll goes to the designat ...

javascripthtmlcssreactjsscroll

Choosing a root element in a hierarchy without affecting the chosen style of a child

I am working on a MUI TreeView component that includes Categories as parents and Articles as children. Whenever I select a child item, it gets styled with a "selected" status. However, when I click on a parent item, the previously selected child loses its ...

javascriptcssnext.jsmaterial-uitreeview

Stop the external animation on the SVG

One way to stop an SVG animation is by utilizing document.getElementById("mysvg").pauseAnimations(). Nonetheless, this method appears to only be effective for inline SVGs. Is there a technique available to halt an SVG animation that has been imported usin ...

htmlsvg

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Currently, I am developing an application using Rails, Vue, and TailwindCss 1.0+ I am facing an issue while creating a dropdown menu for my products. When I click on the dropdown button, the items in the dropdown fly off to the edge of the screen instead ...

htmlcssvue.jstailwind-css

Trying to locate the subsequent div element following the current one

Here is an example of some HTML code: <div style="display: inline-block; position: absolute; top: 84px; bottom: auto; left: 5px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="2 1 8 1 start top><strong>CRED ...

javahtmlseleniumxpathselenium-webdriver

Tips for implementing varying styles depending on the number of columns in a table

I am working with multiple tables that share similarities, but differ in the number of columns each table has. I am looking to create a styling rule where depending on the number of columns, the width of each column will be set accordingly. For example, if ...

htmlcss

The background colors are not extending to the full width of the screen

I am facing an issue in my CSS code while trying to create a footer. The background color is not filling the width of the screen, and I had encountered the same problem earlier. Here is how it looks: (https://i.sstatic.net/5VxYU.png) HTML Code: *{ ma ...

htmlcss

When you click the button, the page refreshes with no content

Every time I click on a button, an empty page reloads after invoking the button's onClick event. The code snippet on the page is as follows: <html> <head></head> <body>2015</body> </html> I am ...

c#htmlasp.net

Conceal table rows with JQuery in html

I need assistance in hiding a row in an HTML Table that contains a value of 0.00 in the third column. I've attempted using JQuery and CSS, but so far no success. Below is the code snippet: <%@ page language="java" contentType="text/html; charset= ...

jqueryhtmlcss

Decoupling the Top Navigation Bar from the Side Navigation Bar

I currently have a top navigation bar with some menus and a side navigation bar with additional menus. I have applied styling to the vertical navigation bar, but it seems to be affecting all the navigation bars, resulting in an output as shown in the image ...

htmlcsstwitter-bootstrap

What is the procedure for making the menu background color transparent?

I need help changing the background color to transparent on my menu in desktop view. ul.dropdown-menu li { background-color: transparent !important; } <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul id="menu" class="menu"> ...

htmlcsswordpress

Notifying Users of JavaFX Applet Web Page Refresh and Closure

Is there a way to detect when a user closes or refreshes a web page with a JavaFX applet embedded in it? I need to perform some clean-up tasks in my code when these events occur. In the past, Java Applet had callback methods for this purpose. How can I ac ...

javahtmlbrowserappletjavafx

Changes to attributes of an HTML tag cannot be made by jQuery code during an AJAX call

Could someone help me figure out why this jQuery code is not functioning properly? I have already tested it outside the $(document).ready block with no success. Note: The unusual "{{ }}" and "{% %}" syntax is typically used in Django. jQuery $(document) ...

javascriptjqueryhtmldjango

Using Jquery to hide or show objects within a <div> when clicked

My goal is to create a webpage that displays three different contents based on which button is clicked. Below is the code for reference: I want the page to show three specific sections: A search bar only when the 'search' button is clicked, T ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Attempting to remove my user profile, but encountering technical difficulties with my code

I am facing an issue with my ajax code while trying to delete a user. The problem is that the ID of the selected user is not being picked up by the ajax script. The delete option for the user is located within a table that is generated through another aja ...

htmljquerysql-serverajaxasp.net-mvc

Loading templates dynamically within ng-repeat is a powerful feature that enhances the flexibility and

I need help loading a template dynamically while using an ng-repeat: <ul> <li ng-repeat="prop in entity" > <div ng-include src="prop.template"></div> </li> </ul> The value of prop.template is the URL of ...

htmlangularjs

Adjusting the width of titles in a CSS menu upon hover

I am currently creating a basic CSS menu. However, I am facing an issue where selecting a menu title in the menu bar causes the width of the title to extend to match the width of the associated menu, which is not my desired outcome (the title's width ...

cssmenuwidthtitle

Move the DIV element to the bottom of the webpage

On my website, I have implemented a countdown timer and a responsive wallpaper. My goal now is to center the div at the bottom of the page and make sure it always stays there. I've tried some code snippets from StackOverflow, but they either gave me a ...

htmlcss

When utilizing the `express.static(__dirname)` function in Node.js with Express, the visitor may be directed to an incorrect HTML page

My website consists of a login page named login.html and an index page named index.html. I want to implement authentication so that only logged in users can access the index page. I have not set up the post method on the login HTML page. Therefore, I have ...

javascripthtmlnode.jsexpress

Guide to pulling and showcasing information from XML at 30-second intervals using JQUERY AJAX and HTML

Seeking assistance as a beginner. Looking to retrieve and showcase data (HTML / PHP page) from XML every 30 seconds. XML FILE : <MAINData> <LiveData> <Field no="1">ENG ODI</Field> <Field no="2">ENG</Field> ...

javascriptjqueryhtmlajaxxml