Why isn't this button aligning in the center properly?

I'm currently using Bootstrap V5 and trying to center the login button in the div. I've attempted using mx-auto and text-center, but so far, none of them seem to be working. Can anyone point out where I might be going wrong?

<div class='container my-auto w-50' style={{backgroundColor: "#E8D2A6"}}>
   <div class="text-center my-4" style={{fontSize: "2.5rem"}}>Login</div>
   <div class="form-group row">
   <label htmlFor='userid' class='col-3 col-form-label' style={{fontSize: "1.3rem"}}>Enter UserID:</label>
   <div class="col-8">
   <input type="text" id="userid" class='form-control' placeholder='Enter user ID'/>
   </div>
   </div>
   <div class="form-group row my-3">
   <label htmlFor='userid' class='col-3 col-form-label' style={{fontSize: "1.3rem"}}>Enter Password:</label>
   <div class="col-8">
   <input type="text" id="userid" class='form-control' placeholder='Enter Password'/>
   </div>
   </div>
   <button type='button' class="mx-auto btn btn-danger btn-block text-center">Login</button>
   
</div>
htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Here's a solution for you:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="432b26263d3a3d3b28297c2228256739161143779647d">[email protected]</a>/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96e4e9e9f2f5f2f4e7e6aae5faf5eaf0">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61616a6d6a6c7f6e3b646f606a6b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>


 <div class='container my-auto w-50' style={{background-color:"#E8D2A6"}}>
   <div class="text-center my-4" style={{fontSize:"2.5rem"}}>Login</div>
   <div class="form-group row">
   <label htmlFor='userid' class='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter UserId:</label>
   <div class="col-8">
   <input type="text" id="userid" class='form-control' placeholder='Enter user id'/>
   </div>
   </div>
   <div class="form-group row my-3">
   <label htmlFor='userid' class='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter Password:</label>
   <div class="col-8">
   <input type="text" id="userid" class='form-control' placeholder='Enter Password'/>
   </div>
   </div>
   <div class="form-group row">
     <button type='button' class="w-auto mx-auto btn btn-danger btn-block text-center">Login</button>
   </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

Here is an example of how to use a script tag to check the value of a select tag in HTML:

Hi there! I'm working on a piece of code where I need to retrieve the selected value from a dropdown menu in an HTML select tag and display it in the element with the id='h1' at the bottom. The script tag is already included within the head ...

javascripthtmlselectreturndropdown

Dealing with content extending into the previous column within CSS columns

I used this code pen example to perfectly illustrate the concept. To demonstrate, I applied the following CSS code. Try hovering over the second card in the top row. .custom-hover:hover { transform: scale(1.5); } In essence, when the top element of a ...

cssbootstrap-4

What is the process for setting up both an open and closed status for my accordion?

After browsing through multiple threads on accordions, none seem to match my current structure which I believed was effective. In an attempt to learn and build elements from scratch, I created the following accordion with some help from Google and experi ...

javascriptjquerycss

Having a concise way to submit forms with Javascript and JQuery

Seeking a more concise way to submit form data to Electron in JSON format as a beginner in JavaScript and jQuery. How can this code be rewritten for brevity? <section> <input id="server" type="text" placeholder="Server"> <i ...

javascriptjqueryhtml

Range slider in Bootstrap showing values as labels

After reviewing the Bootstrap 4 documentation and various responses on Stack Overflow, I am still unable to locate a method for the range slider to show the value as the track is adjusted. https://i.sstatic.net/Iu0ug.png I have come across open-source pr ...

twitter-bootstrapbootstrap-4

Ways to modify the values of a Bootstrap Dropdown using a unique identifier

Here is an example of a typical Bootstrap Dropdown: <div class="btn-group"> <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default option<span class ...

javascriptjquerytwitter-bootstrap

How can I horizontally center an element in CSS/HTML if auto-margin does not produce the desired result?

This is a snippet of the CSS code I'm using for my menu: ul { text-align: left; display: inline; margin: auto; width: 50%; position: fixed; top: 0; list-style: none; } I've attempted to use auto-margin left and right ...

htmlcss

The functionality of Javascript stops working once an ajax call is made

My attempt to make an Ajax call to fetch additional data upon clicking a button was successful on the first click. However, subsequent clicks on the button do not trigger the action, and the data retrieved does not apply any JavaScript functionalities like ...

javascriptjqueryhtmlajax

Utilizing Conditional Styling for an Array of Objects within a Textarea in Angular 6

My array contains objects structured as follows: list =[ { name:"name1", value:true } { name:"name2", value:false } { name:"name3", value:true } { name:"name4", value:false ...

javascripthtmlcssangularweb

A method for automatically refreshing a webpage once it switches between specific resolutions

On my page www.redpeppermedia.in/tc24_beta/, it functions well at a resolution of over 980px. However, when the resolution is brought down to 768px, the CSS and media queries alter the layout. But upon refreshing the page at 768px, everything corrects itse ...

javascriptjqueryhtmlcssparallax

What steps do I need to take in Bootstrap 5 to add a search icon to the navbar that reveals a search box beneath it when clicked?

I've made progress on the navbar design Now, I'm looking to add a search icon next to the login button. Clicking on the search icon should reveal a search box below the navbar, similar to the image shown below. My transparent navbar has a relati ...

javascripthtmlcssbootstrap-5

The uncomplicated bar graph and its corresponding axis line up perfectly beside each other in an SVG diagram

I'm currently working on a stacked bar chart in my CodePen project found here: https://codepen.io/a166617/pen/qBXvzQd However, I am facing an issue where the graph is not aligned properly with the x-axis and y-axis lines. The barchart seems to be sli ...

javascripthtmlcssreactjssvg

Customizing Row Background Color in Bootstrap

Currently working on a project www.codepen.io/anon/pen/yMmjZb The problem I am facing is with my 3rd row (the one with the 3 columns) where the background color is bleeding beyond the intended boundary. My suspicion is that it's due to the row span ...

htmlcsstwitter-bootstrap

Discover how to effortlessly unveil JSON data by clicking on data retrieved from an API

After successfully parsing data from a Tumblr API, I encountered an issue when introducing tags within the body description, which includes images and hyperlinks. The main task at hand is to create a list of blog titles where the corresponding blog descri ...

jqueryhtmljsonajaxapi

Create a server directory structure that populates multiple HTML dropdown lists using either jQuery or AJAX

As a novice navigating jQuery and Ajax, I find myself faced with a specific challenge. My current situation involves a structured set of directories on a server. My goal is to populate a dropdown dynamically with this file hierarchy. Upon click ...

javascriptphpjqueryhtmlajax

combine multiple select options values in a single function using jQuery

My HTML code includes two select options for users to choose the origin and destination cities. I need to calculate the cost of travel between these cities. How can I compare the selected options using jQuery? </head> <body> <div> ...

javascriptjqueryhtml

Creating dynamic qtip2 tooltips is an effective way to enhance user interaction on

I am facing an issue where all tooltips work perfectly fine when the page loads, but stop working after data refreshes through ajax. How can I resolve this problem? $(document).ready(function() { // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HT ...

javascriptjquerytwitter-bootstraptooltipqtip2

``Incorporating best practices: Setting the height of the parent container equal to the height of

When designing a container, is it considered beneficial to assign each child within the container its own height property, even if the parent container has already been allocated a specific height? If not, are there alternate methods available for transfer ...

cssheightparent-child

The JavaScript code will automatically execute loops

Let me illustrate my point with two functions. Function 1 This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of ...

javascriptjqueryhtmlcssjquery-ui

Comparison of XPath operators //* versus //element versus //

My mind is a bit muddled when it comes to finding XPath: I'm not sure when to use //* at the beginning and when just // will suffice. For instance, I recently encountered this issue while trying to understand it on . On their homepage, there is a sea ...

htmlxmlselenium-webdriverxpath