Difficulty with aligning input boxes in ASP.NET Core Razor Pages

I'm struggling to center some input boxes within my ASP.NET Core web application. I've experimented with CSS solutions and tried various HTML approaches like using the class = "text-center", but so far, I haven't achieved the desired results. Below is the code snippet I'm currently working with in an attempt to centralize these input boxes on the page:

@page
@model CustomerPageTest.Pages.Customer.AddCustomerModel

@{
    ViewData["Title"] = "AddCustomer";
}

@{ 
    Layout = null; //Added
}

<div class="container align-content-center" style="border:solid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3 text-center">
            <div class="form-group">
                <label asp-for="Customer.name">Name:</label>
                <input asp-for="Customer.name" class="form-control text-center" type="text" />
            </div>
            <div class="form-group">
               <label asp-for="Customer.notes">Notes:</label>
                <input asp-for="Customer.notes" class="form-control text-center" />
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-dark text-center" />
            </div>
        </div>
    </div>
</div>

This screenshot shows the current layout of the application when executed: https://i.sstatic.net/xrkwp.png

Apologies for the small size of the image, I'm unsure how to enlarge it. Nonetheless, everything remains aligned to the left. Is there a specific bootstrap file that needs to be imported in order to resolve this issue?

Answer №1

It seems from your code and result image that the bootstrap or jquery libraries are not being imported successfully. As a result, the bootstrap classes are not functioning correctly in your HTML.

To resolve this, I recommend including the bootstrap CSS and JavaScript in your razor page and adding justify-content-center to the row. This should align all your controls to the center.

Here are the references for importing bootstrap and jQuery:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Your HTML code snippet:

<div class="container align-content-center" style="border:solid">
    <div class="row justify-content-center">
        <div class="col-md-6 col-md-offset-3 text-center">
            <div class="form-group">
                <label asp-for="Customer.name">Name:</label>
                <input asp-for="Customer.name" class="form-control text-center" type="text" />
            </div>
            <div class="form-group">
                <label asp-for="Customer.notes">Notes:</label>
                <input asp-for="Customer.notes" class="form-control text-center" />
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-dark text-center" />
            </div>
        </div>
    </div>
</div>

Result image:

https://i.sstatic.net/ArVT7.png

If you want the label and input on the same row, you need to modify the HTML structure to place each form control inside its own row like below:

<div class="container" style="border:solid">
    <div class="form-horizontal col-md-offset-3 justify-content-center">
        <div class="form-group ">
            <label asp-for="Customer.name" class=" col-md-2 control-label">Name:</label>
            <div class="col-md-4">
                <input asp-for="Customer.name" class="form-control text-center" type="text" />
            </div>
        </div>
        <div class="form-group ">

            <label asp-for="Customer.notes" class=" col-md-2 control-label">notes:</label>
            <div class="col-md-4">
                <input asp-for="Customer.notes" class="form-control text-center" type="text" />
            </div>
        </div>
        <div class="form-group ">
            <div class="col-md-6 text-center">
        	    <input type="submit" value="Create" class="btn btn-dark text-center" />
		    </div>
		</div>
</div>

Updated Result image:

https://i.sstatic.net/BZWky.png

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

Here is a basic example of an HTML image tag with the crossorigin attribute set to "use-credentials

I duplicated the http server using: git duplicate https://github.com/http-party/http-server Within a command prompt, I ran the following command: node ./bin/http-server --username test --password image --cors The http server is currently active at http:/ ...

Implement the use of HTML buttons to dynamically change the source attribute of an image using

I am in the process of creating a webpage with 25 different images that will be displayed one at a time. Each image represents unique combinations from two sets of items: (ant, blueberry, ladybug, marshmallow, mushroom) and (blimp, truck, moon, ocean, redw ...

Incorrect height of div on iPhone 6 and 7 is observed when utilizing flexbox and setting the height to 100% dimensions

I'm experiencing an issue with the display on iOS devices, specifically iPhone 6 and 7. I am creating a news card layout where I set the content height to 100%. However, on these specific iPhone models, the height is being displayed incorrectly (as se ...

In Angular 4, when choosing an option, only the Display Id is shown, not the Name

I'm currently working with Angular 4 Web API to display packingtypename when an option is selected. Everything is working fine, but I am facing an issue where only the packingtypeID is saved when clicking the add button. I would like to save both the ...

Vanishing border around the sticky table header

While working on creating a table in an excel style using html and css with a sticky header, I noticed that the borders on the table head appeared strange. Take a look at the code snippet below: table { border-collapse: collapse; position: relative ...

Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Here is a sample of my JQuery code: $(document).ready(function() { $(".neverseen img").click(function() { $(".neverseen p").slideToggle("slow"); return false; }); }); Below is the corresponding HTML: <div class="neverseen"> <h1> ...

Is there a way to conceal the parent element when the child element is hidden from view?

Wanting to remove the stars badge in the review section of a Shopify store when there are 0 reviews for the product. The goal is to have the badge appear automatically once a review is received. Here's the code snippet: HTML <div class="spr- ...

Swap the content of one div with another div using client-side code only

Currently, I am in the process of developing my personal website. To enhance user experience, I have implemented a vertical navigation bar on the left side of the page. My goal is to replace the content of a specific div with content from other HTML files ...

What is the reason behind the default disabling of bootstrap multiselect options?

Just diving into the world of bootstrap and I'm puzzled as to why my simple multiselect options aren't responding when clicked. UPDATE The first multiselect option on the test-site linked below is the one giving me trouble. I've tried it o ...

Is it possible to execute the Go compiler within a web browser?

Just discovered that Go can be compiled to WebAssembly. How awesome! According to this Go documentation, the Go toolchain is actually written in Go itself. This got me thinking, is it possible to run the Go compiler in a browser? Can I create a website w ...

Enhancing the appearance of an image upon hovering in ReactJS: A step-by-step guide

My issue arises from my desire to border an image and display a Card with information upon hovering, but the problem is that this style is being applied to all images rather than just the one being hovered over. After pulling data from a movie API, I stor ...

Enigmatic blank space found lurking beneath the image tag

Recently, I made a change to the header image on my website. Previously, it was set using <div style="background-image... width=1980 height=350> and now I switched to <img src="... style="width:100%;"> This adjustment successfully scaled do ...

How to position a static element using CSS

I'm trying to align an image in the center of the screen, but I've run into some trouble. Typically, this is easy by setting the width of a div and using margin: auto;. However, I also need the div to have the position: fixed; property, which see ...

Tips for retrieving specific values from drop-down menus that have been incorporated into a dynamically-sized HTML table

How can I retrieve individual values from dropdown menus in HTML? These values are stored in a table of unspecified size and I want to calculate the total price of the selected drinks. Additionally, I need the code to be able to compute the price of any ne ...

Why did the creators choose to integrate a dropdown menu into Twitter Bootstrap?

While exploring Twitter's Bootstrap framework, I couldn't help but be impressed. However, one feature that has left me a bit puzzled is the dropdown navigation menu. First of all, to view child links, you need to click on the parent. I understan ...

Creating an invoice or money receipt using HTML is a straightforward process that involves using specific code and

Currently, I'm in the process of developing an application for a land developer company. The administrator of this application will be responsible for creating invoices, money receipts, and bills. I am looking to design these documents to resemble th ...

What is the best method to eliminate an invalid element from the DOM?

Below is the code snippet showing the xpaths where the value of $value can be found. We have noticed an abnormal tag td1 in the given URL (visible in the image) which is missing a closing tag. It seems like the developers intentionally placed it there, as ...

To add a code snippet to the right side of a paragraph using CSS, place it at the end of the

Is there a way to insert code at the end of each paragraph and have it aligned to the right on the same line as the last sentence? Update: I initially tried using float:right, but encountered an issue with vertically aligning the code with the last line ...

What are the potential issues with my validation function specifically designed for the select element?

After 3 years of working with JavaScript, I found myself unable to use simple validator libraries. So, I made the decision to create my own. This validator works by adding the attribute jmust to all inputs, select elements, textareas, etc. (I haven't ...

What are some creative ways to enhance the appearance of a deactivated radio button?

In a table cell, I have a set of radio buttons with a background color that differs from the rest of the page. At times, based on another input, I need to disable certain radio buttons. When a radio button is disabled, its interior color blends with the t ...