What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far:

However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My preference would be to have "Register" displayed above the "Username" field.

Below is a simplified version of my current code. If you need the complete code, feel free to ask.

<div class="is-flex" style="justify-content:center;align-items:center;height:100%;">
     
   <form id="addGuestOrCompany"> 
         <div class="control">
             <div class="buttonWrapper">
                <button type="submit" id="registerButton" class="button buy">
                    Register Now
                </button>
             </div>
         </div>
     </form>

     <br />
     <br />
     <br />

     <form id="addGuest"> 
          <fieldset>
              <div class="field">
                 <label class="label subtitle has-text-white" for="userName">Username</label>
                 <input class="input is-success" type="text" placeholder="Username" id="userName" name="userName">
              </div>
          </fieldset>
          <div class="control">
              <div class="buttonWrapper">
                 <button type="submit" id="addGuestBtn" class="button buy">Enter</button>
              </div>
           </div>
     </form>

</div>

I am using the Bulma IO framework. I hope this provides all necessary information. Thank you in advance!

Answer №1

After analyzing the information from your source, it appears that the main container is defined as

display: flex;

by using the class "is-flex", correct? If this is indeed the case, a simple and effective solution would involve including

flex-direction: column;

in its styling properties.

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

Is the Facebook .NET client SDK compatible with universal apps or apps created through AppStudio?

I developed a versatile app using Microsoft's AppStudio. I attempted to integrate Facebook authentication into the app by following the 'Scrumptious tutorial' (). Unfortunately, when I test the app on my phone, I encounter an issue accessin ...

Guide to launching a web browser within a Phonegap app with a button click event

We are developing a PhoneGap application using HTML and JavaScript. Our goal is to integrate PayPal's website so that users can make payments with a simple button click event within the app, and then seamlessly return back to the application afterward ...

Having trouble with PHP form not functioning correctly?

Is there a way to display the var_dump with the 'selected country' information? I am having trouble due to an issue with the $res (array) $id. <?php if(isset ($_POST['submit'])) { $id = $_POST['cata']; $api = new ...

Struggling to make background image behave as desired in CSS

After spending hours scouring forums, I still haven't been able to solve this issue. I am trying to make one of my divs serve as the background for my entire website. Additionally, I want it to start from a specific point and not cover the entire pag ...

Struggling to locate the Twitter direct message input box with Xpath in Selenium

I have been struggling to locate the textbox element using the find_element_by_xpath() method. Unfortunately, every time I try it, I receive an error stating that the element cannot be found. Here is the specific line of code in question: Despite attempti ...

ACTUAL preventing a component from losing its focus

I have been exploring ways to effectively stop a DOM element from losing focus. While researching, I came across different solutions on StackOverflow such as: StackOverflow solution 1 StackOverflow solution 2 StackOverflow solution 3 However, these sol ...

Nest two div elements within a parent div with varying margins

When trying to nest two divs inside another div with different margins, the second one always aligns according to the first one. For example, if we have divs named 'first' and 'second', we might want a layout like this: seco ...

Utilize Bootstrap to combine two tables within a single column efficiently

I am facing an issue with my layout that involves organizing 3 tables in a specific way. Two smaller tables are supposed to take up 3 bootstrap columns on the left side, while one larger table should occupy 9 columns on the right side. However, when I impl ...

Achieve the effect of "background-attachment: fixed" using a div element

I am attempting to replicate a similar effect as seen here, which is accomplished using the CSS property background-attachment:fixed. However, I want to achieve this effect using div elements instead. For instance, could I apply this effect to an h1 tag? ...

How to Modify Button Backgrounds in Angular 8 after Click Events?

Within my Angular 8 Component, I have implemented a row of 4 buttons using the ant design (antd) library in HTML. My Objective: I aim to modify the background-color of a button when it is clicked. The previously clicked button should revert to its origin ...

How well do social media share buttons perform on websites

I'm experiencing issues with the performance of my gallery ever since I added social buttons. Currently, there are around 30 thumbnails in the gallery, each accompanied by four social buttons for different services like Facebook, Google Plus, Twitter ...

Issue with reactivity not functioning as expected within VueJS loop without clear explanation

Struggling with implementing reactivity in vue.js within a loop? The loop renders fine, but firing an event updates the content without visibly rendering the data on the page. The latest version of vue.js is being used with bootstrap and jquery. Despite a ...

Having trouble with Safari on your iPhone? Seeing image outlines peeking through radius borders?

Has anyone encountered a similar issue before? I'm experiencing this problem specifically on Safari for iPhone. Problem: https://i.sstatic.net/ffqWz.jpg Solution: https://i.sstatic.net/z1bUB.png Below is the HTML code snippet: <div class="row"& ...

Submitting a form into a database with the help of AJAX within a looping structure

Trying to input values into the database using AJAX. The rows are generated in a loop from the database, with each row containing a button column. Clicking on the button submits the values to the database successfully. The issue is that it only inserts va ...

ag-Grid incorporating new style elements

For my Angular application, I have a simple requirement of adding a CSS class when a row expands or collapses to highlight the row. I attempted to use gridOptions.getRowClass following the documentation at https://www.ag-grid.com/javascript-grid-row-styles ...

Develop a unique card design using HTML and CSS

I am attempting to recreate a card design similar to the one shown in the image, but I am struggling to identify the name on the right side. Even though it is supposed to be clear, I always rely on the image as a reference. https://i.sstatic.net/hDh22.png ...

Embracing the Power of Sass

I have recently revamped my portfolio website on Github Pages and now I am looking to integrate Sass for my upcoming Portfolio 2.0 project. Although I have worked with Sass before, setting it up from scratch is new to me. Currently, I have installed Sass ...

Leveraging JSON for fetching distinct identifiers from a database

When a user hovers over a parent span containing an empty img tag, I use JSON and jQuery to retrieve the src of the image from the database. The issue arises when the retrieved src is applied to all looped span images on the same page, instead of each imag ...

Acquiring div elements from a collection of divs using selenium in Java

Currently, I am attempting to retrieve a list of all elements using the XPath below. Unfortunately, no matter what I try (class, xpath, etc.), I'm always getting a result size of 1. My objective is to search for records and then loop through them, but ...

What are some ways to remove scroll bars from an iframe?

I'm having trouble with scroll bars appearing in my iframe when inside a fancy box. I have tried everything to remove them without success. For example, you can view the issue here: http://jsfiddle.net/t4j3C/ No matter what I try, nothing seems to w ...