How come the input bar is stuck at the top of the page?

I'm having trouble getting my input box to display in the center of the page like a sign-in form. Despite trying align-items-center, mx-auto, and other styles, it's still stuck in the top-left corner of the page.

.signin {
  margin-top: 5px;
  margin-bottom: 5px;
}

.signin input {
  border: solid 1px gray;
}

.input-group-text {
  width: 90px;
}

.container-fluid {
  align-items: center;
}
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f7fbe6f1d4a6baa5a5baa1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbaeb5a9b5ab">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>


<div class="container-fluid flex-column justify-content-center mx-auto">
  <div class="input-group signin email">
    <div class="input-group-text" id="btnGroupAddon">Email</div>
    <input type="text" placeholder="Enter your email" aria-label="Enter your email" aria-describedby="btnGroupAddon">
  </div>
  <div class="input-group signin password">
    <div class="input-group-text" id="btnGroupAddon">Password</div>
    <input type="password" placeholder="Enter your password" aria-label="Enter your password" aria-describedby="btnGroupAddon">
  </div>
</div>

htmlcssbootstrap-5

Answer №1

To effortlessly center your input fields on the page, simply apply the provided styles to the .container-fluid class.

.container-fluid {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

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

Generating an .html document from a log file

Looking for a way to transform log files into easily accessible .html files that can be viewed by anyone? Check out the script I've been working on: #!/bin/bash ## This handy script converts log files into HTML format, allowing optional GREP search ...

htmlbashgrepcat

CSS deep level selectors

For the following HTML/CSS code, I am trying to target only level 1 "row" elements and not their nested counterparts. However, when using the child selector, it still selects the nested elements. How can I achieve selecting only level 1 "row" elements? ...

htmlcsscss-selectors

Creating a SASS rule for targeting an element only if its parent does not have a specific classname can be achieved by using the '&' symbol in

Before anything else, I want to express my apologies if a similar query has been raised previously. Unfortunately, finding such specific cases can be quite challenging. My objective is to style every "a" element, excluding those enclosed within h1, h2, h3 ...

htmlcsssassparent

PHP 5's HTML Form Library

Currently in search of an alternative to QuickForm. I have encountered performance problems with QF, specifically when dealing with a large number of options in combobox. I prefer something that is more object-oriented like Zend_Form, but without the exc ...

phphtmlforms

Wagtail one-page website

Recently, I created a one-page site in static HTML featuring shiny divs that span the height of the screen, along with a smooth scrolling function in the navigation bar. The site was designed to include a mix of plain text, images, and a card-deck. Everyth ...

pythonhtmldjangowagtail

Is there a way to reduce the excessive bottom margin on Twitter embeds?

Is there a way to adjust the Twitter embed code for tweets so they don't have a large margin at the bottom? Here is an example of the standard Twitter embed code: <blockquote class="twitter-tweet"><p>@<a href="https://twitter.com/gami ...

phpjavascripthtml

Tips for retrieving JSON data from an AJAX call and displaying it pre-filled in an input field

Here is the code snippet I used to receive a response in JSON format, but when I try to display the response using alert(response.Subject);, it shows as "undefined". HTML: <input type="text" id="subject" value='Subject'> Javascript: $.a ...

javascriptjqueryhtmlajaxjson

Content of reusable angular form is not visible on the homepage

I am currently working on creating a reusable Angular form within an Ionic application. Despite following various tutorials and Stack Overflow posts, I have resolved all errors but unfortunately, the content does not display on the parent page. Here is my ...

htmlangularionic-frameworkangular-forms

How to prevent the scroll bar from affecting a fixed div located at the top of the page

Check out this website: I am struggling with setting up a fixed menu div at the top and a content div below it on my site. I want the scroll bar to only apply to the content div and not the header div at the top, but I can't seem to figure out how to ...

htmlcssscrollbaroverflow

It is important for the CSS :active state to transition to an "inactive" state after a certain period of

For mobile, I utilized the :hover and :active pseudo-classes to create a transition effect when tapping on a tab that enlarges the elements for more information. However, I am seeking a way for the activated element to return to its original state after a ...

csshover

The Django URL redirection issue is causing some trouble

I'm having trouble navigating to the next page using buttons like this: <a href="weekly/" class="btn">Weekly Report</a> <a href="daily/" class="btn">Daily Report</a> Whenever I click on the header or another button while on t ...

pythonhtmldjango

Reload a forum in a div without refreshing the entire page

I'm interested in finding out if it's possible for a div to reload similar to how a window does. I have a forum set up, but I don't want the entire page to reload after each form submission. Instead, I'm wondering if only the elements w ...

phphtmlajaxdatabase

How can I use HTML and jQuery to send a button click event to a .py file using AJAX and cgi in web development?

I have encountered a challenge with posting data from button clicks on an HTML page to Python CGI for insertion into a PostgreSQL database. My script seems to be struggling with this task. Here is the structure of my HTML, ajax, and javascript: '&ap ...

javascriptjquerypythonhtmlajax

It appears that the JavaScript code for validating the form is not being executed

My task involves validating a form using JavaScript to display error messages for empty input fields. However, I am encountering an issue where the code does not trigger on submit. http://jsfiddle.net/LHaav/ Here is the HTML snippet: <head> ... ...

javascriptjqueryhtmlformsvalidation

PHP script integration with WHMCS

I've been attempting to add analytic.php into head.tpl in WHMCS, but I keep encountering an error. Analytic.php location: root/analytic.php Head.tpl location: root/whmcs/template/six/includes/head.tpl I read that WHMCS supports Smarty PHP, so I&apos ...

javascriptphphtmlsmartywhmcs

Navigating through directories in an HTML file

In my directory, the folders are named in uppercase letters and have the following structure: ONLINESHOP |-- index.html |-- COMPONENTS |-- CONFIG |-- TEMPLATES |-- CSS |-- main-style.css |-- CONTROLLERS |-- MODE ...

htmlcssrelative-path

Carousel issue with sliding on Bootstrap when deployed on various web servers

I am experiencing a strange issue with my website. I have it installed on two different servers, and while the Carousel works perfectly fine on the first server, it does not slide properly on the second server. Here are the links to each version of the we ...

htmltwitter-bootstrap

Connect a word in one QMD file to a word in another QMD file with a hyperlink

As I work on creating a Quarto book, I am looking to link key terms in the book to corresponding definitions in a glossary. The challenge is to ensure that these links function properly in both HTML and PDF formats. Below are some methods I have explored s ...

htmlcssrlatexquarto

difficulties encountered while inserting a script tag linking to a local file within an android webview

I have created an Android app with a simple WebView that loads a local HTML file from the assets folder in the project directory. The HTML file includes a tag that makes an AJAX call to an external service and expects a response in the form of a String re ...

javascriptandroidjqueryhtmlajax

Utilizing MySql in HTML Buttons Using PHP

PHP $con=mysqli_connect("localhost","root","","mmogezgini"); $menuler = mysqli_query($con,"SELECT * FROM menuler"); while($menu = mysqli_fetch_array($menuler)) { echo "<button class=\"ust_link\" onClick=\"window.location.href ...

phphtmlmysql