Creating a stylish login form with Bootstrap: How to effortlessly center it on your webpage

My login form is currently positioned to the left. However, I am trying to move it to the center of the page. I attempted some CSS styles without success. Interestingly, when I removed '{% extends "common/base.html" %}' from the code, the form did center itself even without any specific CSS styling or navigation bar present.

Here is my HTML code along with the added CSS style:

{% extends "common/base.html" %}
{% block content %}
<div class="main-login", id="parent">
<form align="center" action="/login" method="POST" >
    <div class="login-screen">
        <div class="app-title">
            <h1>Login</h1>
        </div>
        <div class="login-form">
            <div class="control-group">
            <input type="text" class="login-field" value="" placeholder="username" name="username">
            <label class="login-field-icon fui-user" for="login-name"></label>
            </div>
            <div class="control-group">
            <input type="password" class="login-field" value="" placeholder="password" name="password">
            <label class="login-field-icon fui-lock" for="login-pass"></label>
            </div>
            <input type="submit" value="Log in" class="btn btn-primary btn-large btn-block" >
            <br>
    <p>{{ _('New User?') }} <a href="{{ url_for('auth.register') }}">{{ _('Click to Register!') }}</a></p>
    <p>
        {{ _('Forgot Your Password?') }}
        <a href="{{ url_for('auth.reset_password_request') }}">{{ _('Click to Reset It') }}</a>
    </p>
        </div>
    </div>
</form>
 </div>]

Here is my CSS code:

    .main-login{
  padding-top: 100px;
  text-align: center;
  width:500px;
  /*align-items: center;*/
  vertical-align: middle;
}

     #parent {
   /*display: table;*/
   width: 50%;
   vertical-align: middle;
   text-align: center;

}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
/*background-color: #FFF;*/
padding-top: 1000px;
background-color: #3498DB;
padding: 20px;
border-radius: 5px;
text-align: center;

}

.app-title {
text-align: center;
color: #777;
}

.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}

input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}

input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}

.btn {
  border: 2px solid transparent;
  background: #3498DB;
  color: #ffffff;
  font-size: 16px;
  line-height: 25px;
  padding: 10px 0;
  text-decoration: none;
  text-shadow: none;
  border-radius: 3px;
  box-shadow: none;
  transition: 0.25s;
  display: block;
  width: 250px;
  margin: 0 auto;
}

.btn:hover {
  background-color: #2980B9;
}

.login-link {
  font-size: 12px;
  color: #444;
  display: block;
    margin-top: 12px;
}

I have included an image link below to illustrate the desired outcome where the login button's length matches that of the password field:

https://i.sstatic.net/0yUBr.png

Answer №1

Implement this CSS technique on the primary content section:

margin-left:auto;
margin-right:auto;

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

Switch up the side navigation panel display

Hello, I am a newcomer to bootstrap and I have successfully implemented a collapsing navbar. However, I am looking for a way to make the navbar slide out from the right side when clicked on in mobile view. Can someone provide me with some JavaScript or j ...

The data table appears to be malfunctioning when the table collapses

Having trouble with the data table when adding a collapse tr. Removing the collapse tr fixes the data table issue. Any help on how to resolve this would be appreciated. $('.tableToggleUl').parent('td').css('padding','0 ...

Ways to quickly change a class when clicking (without waiting for mouse button release)

Is there a way to instantly change the color of my span element when it's clicked by the user, rather than waiting for the mouse button to be released? This is the CSS code I'm using for the class: span.active{ color:#bdbcae; } I've tri ...

Tips for creating horizontal dividers with CSS in Vuetify using <v-divider> and <v-divider/> styling

Currently, I am working on a project using Vue.js and adding Vuetify. However, I need to use a component. .horizontal{ border-color: #F4F4F4 !important; border-width: 2px ; } <v-divider horizontal class=" horizontal ...

Rendering HTML strings instead of HTML in ReactJS

When I try to display HTML, all I see is strings var ref = firebase.database().ref('raffle/'); ref.on('value', (snapshot) => { var content = ``; var IDwrapper = document.getElementById('raffleFeed'); snapshot.forEac ...

Seeking the "onChange" functionality while implementing the "addEventListener" method

I've been busy with a React project lately. Instead of adding 'onChange' to each button within the html object like this: <input type='text' onChange={myFunction} /> I'd prefer to include it in the JS code like so: doc ...

The advice I received was to avoid using max-width and instead utilize min-width when styling with CSS

With @media screen and (max-width:700px) { Link to image 1 Whenever I use @media screen and (min-width: 700px) { it messes up. How can I adjust it for min-width without causing issues? Link to image 2 ...

Utilize formData to upload an image to a database with ajax

I'm struggling with the process of uploading an image from an HTML form. The goal is for the form to send the image name along with other data to a PHP page. Instead of using the serialized function, I opted for formData as it has the capability to h ...

How can I make a Material UI element fill the entire remaining width of the Grid?

Is there a way to make the child element take up the remaining width of the grid in Material UI? I am trying to have the "User Name" text field fill up the rest of the space in the grid cell but so far I have not been successful. I have even attempted us ...

Looking to transmit data to your HTML page and incorporate AJAX for your Single Page Application on a NodeJS server with express.js framework?

Is there a way to display the form submitted data on a different HTML page? I am collecting user data on the 1st page (page1.html) and after storing this data in the database, I want to showcase the submitted values on another page, specifically (page4.ht ...

Is there a way to incorporate a forward email button in an HTML email newsletter?

I'm working on sending an HTML newsletter for my website using a combination of PHP and HTML. I am looking to include a forward email link in the newsletter. Can anyone guide me on how to achieve this? Thanks in advance! ...

Using jQuery to modify the contents of a div in real-time is resulting in the loss of HTML encoding

I have come across a situation where I am dynamically changing the HTML content of a div called 'accordion' using the following code: // The variable htmlstring contains some HTML code with special characters like &, ', etc. // For example: ...

Is there a way for me to activate the button upon clicking on a box in the list?

I found my inspiration from the following sources: Below is how my vue component looks like: <template> ... <b-card-group deck v-for="row in formattedItems"> <b-card :title="item.title" img-src=" ...

What is the best way to ensure a dropdown in an input group occupies the full width?

One of the challenges I'm facing involves a row with 2 columns - the first column contains a title and the second column features an input group. Within the input group, there is an icon and a dropdown menu. Unfortunately, the dropdown menu is not oc ...

innerhtml does not display the entire array contents

I'm facing an issue with my innerHTML output where it seems to be displaying one less value than expected from the array. I've been unable to pinpoint the exact problem. await fetch(urlbody, bodyrequestOptions) .then((response) => response ...

Learn how to display a "not found" message in a React.js application

I have a piece of code where I am sending a post request to an API and retrieving all the data from the API in a table. I am trying to find currency data based on the currency name, if found I display the data in a div, if not found I want to print "not ...

Tips for updating multiple bundled javascript files with webpack

I am working on a straightforward app that requires users to provide specific pieces of information in the following format. Kindly input your domain. User: www.google.com Please provide your vast URL. User: www.vast.xx.com Select a position: a) Bottom ...

Ways to update row background color based on specific column values

I need to customize the background color of my table rows based on the value in the "Category" column. For example: Name Category Subcategory A Paid B C Received D If the Category value is 'Paid', I want the ro ...

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Recently delving into the world of reactjs, I find myself facing a challenge with a page that contains 3 distinct blocks formed by divs. Have a look at the layout on my page: My Page This is the code snippet I have worked on: return ( <div> ...

What is the best approach to updating multiple rows instead of just the first row using the update button located on both sides using PHP and AJAX?

Starting fresh, so I might sound like a beginner with this question. How can I make use of the update button to update specific rows instead of just the top row? Every time I try to update, it only works for the top row. Here's the code snippet from ...