What is the best way to align this form perfectly in Bootstrap 4?

HTML

<div class="container-fluid background">
<div class="row">
    <!-- background effect -->
    <div id="particles-js">
        <div class="login col-12">
            <form class="login-form" method="post" action="">
                <div class="form-group col">
                    <h2 class="login-header">Login</h2>
                </div>
                <div class="col form-group">
                    <input type="text" name="username" placeholder="Username" class="username-input">
                </div>
                <div class="col form-group">
                    <input type="password" name="password" placeholder="Password" class="password-input">
                </div>
                <div class="col form-group">
                    <input type="checkbox" name="remember"><span>Remember Me Next Time</span>
                </div>
                <div class="col form-group">
                    <input type="submit" name="login-button" value="GO" class="submit-button">
                </div>
            </form>
        </div>
    </div>
</div>

This page features a login form that needs to be centered vertically and horizontally. How can this alignment be achieved?

Page https://i.sstatic.net/SQLpc.jpg

htmlcsstwitter-bootstrapbootstrap-4center

Answer №1

Eliminate the row and col classes, place the login box within a flex container that covers the entire screen (h-100), and adjust the margins using m-auto:

html, body { height: 100%; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- flex container -->
<div class="d-flex h-100">
  <!-- login box -->
  <div class="m-auto">
    <form method="post" action="">
      <div class="form-group">
        <h2 class="login-header">Login</h2>
      </div>
      <div class="form-group">
        <input type="text" name="username" placeholder="Username" class="username-input">
      </div>
      <div class="form-group">
        <input type="password" name="password" placeholder="Password" class="password-input">
      </div>
      <div class="form-group">
        <input type="checkbox" name="remember"><span>Remember Me Next Time</span>
      </div>
      <div class="form-group">
        <input type="submit" name="login-button" value="GO" class="submit-button">
      </div>
    </form>
  </div>

Answer №2

To center the row, simply apply the justify-content-center class.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container-fluid background">
<div class="row justify-content-center">
<!-- background effect -->
<div id="particles-js">
    <div class="login col-12">
        <form class="login-form" method="post" action="">
            <div class="form-group col">
                <h2 class="login-header">Login</h2>
            </div>
            <div class="col form-group">
                <input type="text" name="username" placeholder="Username" class="username-input">
            </div>
            <div class="col form-group">
                <input type="password" name="password" placeholder="Password" class="password-input">
            </div>
            <div class="col form-group">
                <input type="checkbox" name="remember"><span>Remember Me Next Time</span>
            </div>
            <div class="col form-group">
                <input type="submit" name="login-button" value="GO" class="submit-button">
            </div>
        </form>
    </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

Has anyone experienced challenges with _POST data getting blocked on a hosting server provided by Godaddy?

Utilizing a form processor known as JotForm, I have encountered an unusual issue. When attempting to print all POST data, I am faced with an empty array, specifically when the page is hosted on GoDaddy. Strangely, while hosting it locally on localhost, no ...

phphtmlformspost

Struggling with eliminating the bottom margin on your website?

I can't figure out where this mysterious margin is coming from in the CSS - there's a consistent 30px of space at the bottom of each web page. Any assistance would be greatly appreciated. I know it's probably something simple, but my brain ...

htmlcss

The background-size:cover property fails to function properly on iPhone models 4 and 5

I have taken on the task of educating my younger sister about programming, and we collaborated on creating this project together. Nicki Minaj Website However, we encountered an issue where the background image does not fully cover the screen when using b ...

javascripthtmlcssbackground

Link the Sass variable to Vue props

When working on creating reusable components in Vue.js, I often utilize Sass variables for maintaining consistency in colors, sizes, and other styles. However, I recently encountered an issue with passing Sass variables using props in Vue.js. If I directly ...

javascriptcssvue.jssass

What are some ways to enhance the specificity of HTML parsing code?

I'm currently facing a challenge where I need to extract hrefs and titles from an HTML page while only focusing on a tags that have both attributes. Some of the a tags do not have a title attribute. How can I modify my code to only display data from t ...

phphtml

Finding the "img" id using jQuery

Here is the code snippet I am working with: <div id="popupContactIMG_4179" class="xxxx"> <a id="popupContactCloseIMG_4179">x</a> <img alt="" src="../IMG_4179.jpg" id="id1&q ...

jqueryhtmlcssjquery-plugins

Capture microphone and audio in a SIP call with sip.js

Greetings Stack Overflow community! I am in need of assistance with a project involving sip.js and VoIP for making real phone calls. The Objective I aim to enable users to record audio from both parties during a call and save the data on a server (either ...

javascriptjqueryhtmlaudiosip

Trouble encountered while attempting to save canvas as PNG

In our TShirt design portal, we utilize fabric.js for creating designs. I have encountered an issue when trying to save the canvas as a PNG using canvas.toDataURL('image/png'). This action throws a "DOM exception 18" error on Google Chrome, while ...

jqueryhtmlcanvassavepng

Strange occurrences within the realm of javascript animations

The slider works smoothly up until slide 20 and then it suddenly starts cycling through all the slides again before landing on the correct one. Any insights into why this is happening would be greatly appreciated. This issue is occurring with the wp-coda- ...

javascriptcsstransition

Div with fixed positioning experiencing glitching until reaching a specific height

I've been struggling to resolve an issue with a script that is supposed to scroll down with the page and stop at a specific height. However, right before it reaches the desired point, it temporarily disappears and then reappears. For reference, here& ...

jqueryhtmlcssscrollposition

Looking for an easy way to use string.Format with <a ... class="button" in ASP.NET MVC?

Example link <div style="float:right;"><a href="<%= Url.Content("~/Home/List") %>" class="button"><span>Return to List</span></a></div> I am attempting to append an Id from my Model to the end of a URL, as shown ...

c#htmlasp.net-mvc-3string.format

How can I retrieve the input value on the current page using PHP?

Hey there, so I'm pretty new to PHP and I have a question. Is it possible to retrieve the input value from an existing input field on a page using PHP when the page loads, and then assign that value to a variable? For instance, let's say I have ...

javascriptphpjqueryhtml

Switch up the position of an element every time the page is refreshed

I have a webpage containing 5 images, each measuring 48px by 48px. I would like these images to be displayed in random positions on the page every time it is loaded. While I am aware that I will need to use CSS and JavaScript for this task (specifically f ...

phpjavascripthtmlcss

Is it possible to refresh the page without using a hashtag and stay on the same page in AngularJS

Is it possible to refresh my view from the navigation bar without displaying the server folder? I have the html5Mode activated: if(window.history && window.history.pushState) { $locationProvider.html5Mode(true); } ...

javascriptjqueryangularjshtml

Customize the style based on the state using styled components

I am currently working with a function component that looks like this: const Navbar = ({setNav, nav}) => { const [justify, setJustify] = useState('space-around') //get localStorage const user = JSON.parse(localStorage.getItem('user& ...

cssreactjscomponentsstate

Resizing a damaged HTML table to fit within a designated width using CSS

Here is a challenge - I have some broken HTML that I can't touch, and don't want to use JavaScript to fix. My goal is to make it fit within a specific width: http://jsfiddle.net/P7A9m/2/ <div id="main"> <table> <tr> ...

htmlcsswidthhtml-table

Adjust the height of column divs to equal the height of their parent container

Looking for a solution: I have multiple divs in a column layout and I want them to expand to match the original height of the parent. The parent's height is not fixed as it is part of a flex-based page design. Can this be done? In the example provid ...

cssflexbox

"Upload a text file and create a JavaScript variable that contains the text within it

I am currently developing a library and I need to add a feature that reads the contents of a text file. Currently, it only returns the path. How can I modify it to return the actual content of the file? function displayFileContent() { var file = do ...

javascripthtmlupload

Determine line-height and adjust positions using JavaScript in the Chrome browser

I am creating a basic text reading application with a line to aid in easy reading. The functionality involves using the up and down arrow keys on the keyboard to adjust the position of a red line based on the line-height property. This is accomplished thr ...

javascriptjqueryhtmlcssgoogle-chrome

Overlap of images on a responsive CSS page

I'm venturing into the world of responsive design for the first time, but I seem to be facing some challenges. In the initial screenshot, you can see that the tower image is overlapping a div and I can't figure out where I went wrong. Check out t ...

htmlcssresponsive-designcss-float