I am struggling to properly align the login form in the center of the login page

Can someone please assist me in centering the login form on the login page? I've attempted using align-items-center and justify-content-center but it's still aligning at the top. Any help would be greatly appreciated as I've spent a significant amount of time trying to find a solution.

Thank you in advance.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content='IE=Edge' http-equiv='X-UA-Compatible'>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="app.css">

    <title>Your Real Estate Centre - The Portal for Foreclosure Auctions in Germany</title>
  </head>
  <body id="login" style="height:800px">
  // Navigation and other HTML elements from the original text here...
htmlcssbootstrap-4

Answer №1

Include the CSS property height: 100% 

<section class="container-fluid px-0" style="height: 100%;">
      <div class="row align-items-center justify-content-center" style="height: 100%;">

Visit this link for more details

Answer №2

It seems like your code is good to go as is, just some minor adjustments to text color and size are all that's needed. Also, here is a link to an image: https://i.sstatic.net/iYSYR.png

Here is a snippet of the code:

   
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content='IE=Edge' http-equiv='X-UA-Compatible'>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="app.css">

    <title>Dein Immobilien Centre - Das Portal für Zwangsversteigerungen in Deutschland</title>
  </head>
  <body id="login" style="height:800px">
    <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-xl pt-10 pb-0 fixed-top">
    [...]
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   [...]
    </body>
</html>

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

Which is better for SEO: using H tags or image alt text?

In need of a major website title that stands out. Which SEO solution reigns supreme? Implementing an image with alt text "my crucial page title" Utilizing h1 tags for the "my crucial page title" text ...

htmlseo

Stylish CSS typography options for both Mac and Windows users

When browsing various websites, I've noticed that many of them showcase beautiful fonts without using images. Examples include The Firebug site and Happy Cog. It seems like web designers use CSS tricks and JavaScript to achieve this effect. I'm ...

cssfonts

The position of the carousel items changes unpredictably

My jQuery carousel consists of 6 individual items scrolling horizontally. Although the scroll function is working correctly, I have noticed that 2 of the items are randomly changing their vertical position by approximately 15 pixels. Upon reviewing the HT ...

javascriptjqueryhtmlcsscarousel

Issue accessing image file located outside of script directory

Issue: Difficulty synchronizing images between 2 folders I have a project with 2 image directories: Home/user/public_html/image Home/user/m.fruit.com/image The public_html folder is for the desktop version of the site The m.fruit.com folder serves the ...

phphtml

Achieving consistent vertical alignment of text in different web browsers

I have thoroughly reviewed the existing links on this topic, but none of them have been useful in my specific case. Most solutions suggest a way to vertically move text so that it appears aligned. However, the issue I am facing is that the text is already ...

cssfirefoxgoogle-chromecross-browservertical-alignment

Retrieving the visible text from a webpage with the help of selenium and BeautifulSoup

I am looking to extract all visible content from a specific webpage, like for instance this page. I am currently utilizing a headless Firefox browser remotely using Selenium. The code snippet that I have implemented is as follows: driver = webdriver.Remo ...

pythonhtmlseleniumbeautifulsoup

When adjusting to mobile dimensions, the responsive website design struggles to center the navbar properly

I am currently developing my senior year portfolio website and I am struggling to center the navbar (Work About Contact) when it is in mobile mode. My goal is for it to be positioned directly below the logo, perfectly centered, but so far nothing I have tr ...

htmlcssiphoneresponsive-designmedia-queries

Turn off scrolling but allow dragging on iPhone

Is it possible to disable scrolling but still allow dragging on the <canvas> element in iPhone? Currently, when you drag the <canvas>, the entire page also scrolls, which is not the desired behavior. <meta name="viewport" content="wid ...

htmlioscss

Mobile Bootstrap4 NavBar Bug Fix

I am currently working on coding a website with Bootstrap. The navbar functions perfectly on desktop, but when accessed via mobile device, the button containing all the links does not work. Here is a picture for a more accurate description Below is my HTM ...

htmlmobilebootstrap-4navbar

Show the precise selection from one dropdown menu based on the chosen value in another dropdown menu

How can I retrieve the scheduleID value from a specific MovieID value within a comboBox? Movie Selection Box: <?php $query = "select * from ref_movies ORDER BY MovieID"; $result = mysql_query($query) or die (mysql_error()); echo '<s ...

phphtmlmysql

Building a multi-form application with HTML5 validation and Vue.js

I am working on a vue.js form that consists of multiple steps and requires HTML5 validation to be simplified. Here is a snippet of the code: <template> <div> <div v-if="activeForm === 1"> <h2> ...

javascripthtmlvalidationvue.js

Show spinner until the web page finishes loading completely

Could anyone guide me on how to display Ring.html for a brief moment until About.html finishes loading completely? I need the Ring.html page to vanish once About.html is fully loaded. As a beginner in web development, I would greatly appreciate your assist ...

javascripthtmlcss

Creating a JavaScript function to imitate the pressing of the Enter

I am attempting to mimic the pressing of the Enter key using JavaScript within a specific TextArea. Below is the code I have written: function enter1() { var keyboardEvent = document.createEvent('KeyboardEvent'); var initMethod = ...

javascripthtmldom-eventskeyboard-eventsenter

No data returned in AJAX response while trying to connect to a RESTful service

After creating a WCF REST service that returns a JSON response like {"Id":10,"Name":"Peter"}, I noticed that when trying to access it using the provided HTML5 code snippet, the status returned is always 0. Can anyone help me figure out what might be caus ...

ajaxhtmlrest

Complications arising from IE when using strict doctype with CSS and jQuery

Here's the code I'm using for a sliding caption effect on my gallery site: I specifically implemented the last effect which is the Caption Sliding (Partially Hidden to Visible). $('.boxgrid.caption').hover(function(){ $(".cover", th ...

jquerycssinternet-explorer

Tips for maintaining the responsiveness of both images and text within a div container

I'm completely new to HTML and CSS. Everything looked perfectly aligned until I added text inside the three divs and now my images are unbalanced, even though I've set the same width and height: Here is the code snippet: #wrapper{ display:fl ...

htmlcssgoogle-web-designer

Ways to assign a boolean value to HTML using Angular?

Can someone help me set the initial value of showProduct to false for the app-product HTML selector? showProduct:boolean = false; <button (click)="showProduct=!showProduct">Show Product</button> <div *ngIf="!showProduct"> <app-p ...

htmlangulartypescriptboolean

Styling columns alternately with CSS - an even-odd approach

I'm having an issue with my html code structure. Here's how it looks: <article></article> <article></article> <article></article> <article></article> <article></article> <article> ...

htmlcsscss-selectors

Do CSS Modules consistently generate the same class name for a specific CSS class defined within the module?

I have defined the following classes in my CSS module: .container-styles { height: 20px; width: 90%; background-color: rgb(128 , 128 , 128); } .filler-styles { height: 100%; border-radius: inherit; background-color: rgb(27, 150, 40); text-al ...

htmlcssreactjscss-modules

Issue with HTML Form Data Not Being Reflected in SQL Database

After creating a form to insert values into the database, there seems to be an issue where the database is not being updated despite no errors. Here is the HTML code for the page: <!DOCTYPE html> <html> <title>css</title> <body ...

phphtmlsqlajaxinsert