Having a challenge with aligning a form in a view, as neither bootstrap nor plain CSS seem to be helping with centering it correctly

What techniques can I use to center this form properly in both bootstrap and plain CSS? So far, I have been able to center some parts of it, but when I try to center others, they shrink and create a mess. When I use bootstrap to center the elements, they become very small, so I believe I am not taking into account the

col-sm-2

class that they have. How can I resolve this issue?

<h2>Operazione Spot</h2>
<h2>@Model.Heading</h2>
<hr />

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="form-group">

        @Html.LabelFor(m => m.Valuta, new { @class = "col-sm-2 control-label" })
        <div class="col-md-3">
            @Html.TextBoxFor(m => m.Valuta, "{0:dd-MM-yyyy}", new { @class = "form-control", @Value = @DateTime.Now.ToShortDateString(), @readonly = "readonly" })
        </div>

        @Html.LabelFor(m => m.Sell, new { @class = "col-sm-2 control-label" })
        <div class="col-md-3">
            @Html.EditorFor(m => m.Sell, new { htmlAttributes = new { @class = "form-control", placeholder = " eg 34.55" } })
            @Html.ValidationMessageFor(m => m.Sell, "", new { @class = "text-danger " })
        </div>

        @Html.LabelFor(m => m.Buy, new { @class = "col-sm-2 control-label" })
        <div class="col-md-3">
            @Html.EditorFor(m => m.Buy, new { htmlAttributes = new { @class = "form-control", placeholder = " eg 34.55" } })
            @Html.ValidationMessageFor(m => m.Buy, "", new { @class = "text-danger " })
        </div>

        @Html.LabelFor(m => m.Cliente, new { @class = "col-sm-2 control-label" })
        <div class="col-md-3">
            @Html.DropDownListFor(m => m.ClienteId, new SelectList(Model.Cliente, "Id", "Name"), new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Cliente, "", new { @class = "text-danger " })
        </div>

        @Html.LabelFor(m => m.Note, new { @class = "col-sm-2 control-label" })
        <div class="col-md-3">
            @Html.TextAreaFor(m => m.Note, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Note, "", new { @class = "text-danger " })
        </div>

        <div class="col-md-offset-2 col-md-10">
            <button type="submit" class="btn btn-primary">Apply</button>
            <a class="btn btn-default" href="@Url.Action("Index", "Home")"> Cancel</a>
        </div>
    </div>
}

Answer №1

Success guaranteed!

.element-wrapper {
display: flex;
flex-direction: column;
justify-content:center; //align vertically at center
align-items:center; //align horizontally at center
}

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

Exploring Font Choices: Customizing Your Text Style

I've been attempting to incorporate my own font into my website, but despite researching several Stack Overflow articles, I'm facing various browser-specific and path-related issues. Sadly, I haven't been able to successfully display my font ...

Struggling to locate a control within the GridView edit item template?

I'm struggling to identify the dropDownList ID of SupplierSelectDropDown in the sqldatasource update command using the code below. However, my attempts so far have proven unsuccessful. The ID I tried to use was ctl00$Content$DetailsPageControl$Purcha ...

Enhance the appearance of a custom checkbox component in Angular

I developed a customized toggle switch for my application and integrated it into various sections. Recently, I decided to rework it as a component. However, I am encountering an issue where the toggle switch button does not update in the view (it remains t ...

Ways to access nested div children without using identifiers

To customize the width of a specific div using jQuery, I need to target the following structure in my HTML code. Although parts of it are generated by a lightbox plugin, the part that sets it apart is the unique class "xxxgallery": <div class="xxxgalle ...

Creating a toggle feature to display or hide specific table columns in Crystal Reports based on user selection

While working on my Crystal report, I have successfully managed to show and hide dynamic columns. However, I am facing an issue with showing/hiding the corresponding table grid lines. Even though I drew lines to create a table grid, the problem is that the ...

What could be causing the failure in revealing these elements?

Within my Meteor application, I utilize Template.dynamic to seamlessly replace the current Template with the next one. In my "main" html file, the setup looks like this: <div class="container"> {{> postTravelWizard}} </div> </body> ...

Loading Animation for Pages and Tables

I'm experiencing a choppy and sudden transition when switching between two pages that contain tables populated using ng-repeat. Upon loading, the footer is positioned halfway up the page below the table heading until the table loads and the layout adj ...

Tips for eliminating the border surrounding the entire table in Material-ui

Is there a way to edit a table in Material-ui without displaying it as a card? I'm looking to remove the border around the entire table, but I couldn't find any information on how to do that. Can someone help me out? Here is a link about the com ...

I am unsure of the process for implementing an OnClick event to modify the colors of a square

Seeking guidance from the more experienced individuals here as I am just starting out. Any help would be greatly appreciated! This might seem simple to many of you, but for me it's quite challenging. This is how my HTML code looks: <html> < ...

Navigate through pages using scrollspy without losing your position when returning

Hey all you web geeks out there, I could really use your help solving a little issue. I've been working with Bootstrap to build a website that utilizes scrollspy for navigating different sections of the page using the navbar. The only way I could sto ...

When using the onclick function, an unexpected behavior occurs where instead of displaying content, the page

Below is a summarized version of my code: HTML <a onclick="showHideDiv('bio')" target='_self'> bio <div id="bio" class="shadowScreen" style="display: none;"> <p class="showBio"> Bio! </p> &l ...

Is there a way to decipher a JSON string within an ASPX page?

One method I'm using to send data in JSON format from my server to a remote server involves utilizing an ASPX page. Here's an example of how it works: function httpPost($url, $params) { $payload = json_encode($params); $ch = curl_i ...

What is the best way to ensure items are aligned to the top of the navbar as a picture is enlarged?

I have searched through various similar questions, but none of them have provided a solution to my specific issue. I have attempted multiple suggestions, but none have been successful. (I am working with bootstrap4) Here is the html code I am using: < ...

Setting the display property to none continues to impact the positioning of elements

Currently, I am in the process of making my portfolio website responsive by using media queries. For mobile screens, I have successfully implemented a nav select drop down menu. However, when it comes to iPad screens, I want to display a regular menu. To a ...

Changing the height of a Bootstrap 3 row without using less variables

Can someone please explain how to adjust the .row width in Bootstrap so that the col grid still functions correctly, but certain .rows are tighter than default? Thank you. ...

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Desired Outcome for my Javascript: I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition() ...

Perfectly aligning the Update Progress Animation in real-time

I am currently utilizing the Ajax UpdateProgress with a loading gif attached. The issue I am facing is how to ensure that the loading.gif always appears in the center of the screen, even if the user is at the very top or bottom of the page. Is there a meth ...

Unable to display background image and color on Internet Explorer

The background beneath the slider and footer appears normal in most browsers, but there seems to be an issue with Internet Explorer. Check it out at this link: Do you have any suggestions on how to fix this? ...

Interested in customizing the hover color of the header links in WordPress?

I'm currently working on customizing the hover color of the links in my WordPress header created with Elementor Page Builder. I tried several CSS solutions by inspecting elements and adding them to the custom CSS section in WordPress, but none seemed ...

Images for the background of the table header and sorting icons

Currently, I am utilizing jquery.tablesorter for table sorting functionality. However, I have a desire to apply a pattern to my table headers using a background-image. Unfortunately, when I do so, the .headerSortUp and .headerSortDown classes on the sorted ...