"Creating a Two-Column Layout with ASP.NET Core and Bootstrap through POST

I have been working on a simple form for testing and learning purposes. Initially, I used Scaffold New Razor Page in VS to create the form.

Afterward, I attempted to modify it in order to have two columns on the create page. Despite trying various methods, including CSS and Flexbox, I have been unsuccessful in achieving this. The form still displays everything in a single column.

I'm at a loss as to what I might be missing. The form does function correctly in terms of submitting and updating the database, but the layout remains a single column.

 style>
* {
    box-sizing: border-box;
}

.row {
    display: flex;
}

/* Create two equal columns that sit next to each other */
.column {
    flex: 50%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}
</style>

<h2>Create</h2>

<div class="row">
    <form method="post">
        <div class="column" style="background-color:#aaa;">
            <h2>Column 1</h2>
            <p>Some text..</p>
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="RebateDetail.RebateProgramId" class="control-label"></label>
                <select asp-for="RebateDetail.RebateProgramId" class="form-control" asp-items="ViewBag.RebateProgramId"></select>
            </div>
            <div class="form-group">
                <label asp-for="RebateDetail.RetailerId" class="control-label"></label>
                <select asp-for="RebateDetail.RetailerId" class="form-control" asp-items="ViewBag.RetailerId"></select>
            </div>
        </div>
        <div class="column" style="background-color:#bbb;">
            <h2>Column 2</h2>
            <p>Some text..</p>
            <div class="form-group">
                <label asp-for="RebateDetail.FirstName" class="control-label"></label>
                <input asp-for="RebateDetail.FirstName" class="form-control" />
                <span asp-validation-for="RebateDetail.FirstName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="RebateDetail.LastName" class="control-label"></label>
                <input asp-for="RebateDetail.LastName" class="form-control" />
                <span asp-validation-for="RebateDetail.LastName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create Simple" class="btn btn-default" />
            </div>
        </div>
    </form>
</div>

UPDATE: I've moved the Form up and also realized that I wasn't using BS4. The current version works, and I am now going through tutorials to upgrade to BS4.

 /* Create two equal columns that sit next to each other */
    .inputColumns {
        flex: 50%;
        padding: 70px;
        background-color:bisque;
          }
</style>

<h2>Create</h2>
<form method="post">
<div class="row">

    <div class="inputColumns" style="background-color:darkgray;">
        <h2>Rebate Details</h2>
        <p>This section is for the rebate amounts and info</p>
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="RebateDetail.RebateProgramId"> Rebate Program ID</label>
            <select asp-for="RebateDetail.RebateProgramId" class="form-control" asp-items="ViewBag.RebateProgramId"></select>
        </div>
        <div class="form-group">
            <label asp-for="RebateDetail.RetailerId" class="control-label"></label>
            <select asp-for="RebateDetail.RetailerId" class="form-control" asp-items="ViewBag.RetailerId"></select>
        </div>

Answer №1

Can you explain the column style? It should be col or col-<modifier> (sm, md, lg) or you can use

col-<modifier>-<number>
e.g. col-md-4, with the maximum number being 12

Please note that current asp.net core templates do not include bootstrap 4. You will need to manually update the styling to include bootstrap 4.

In your case, you may want something like this:

<div class="row">
  <div class="col-6">
     <!--- column 1 ---->
     <div class="form-group">
     </div>
  </div
  <div class="col-6">
     <!--- column 2 ---->
      <div class="form-group">
     </div>
  </div>
 </div>

Using something that is already written saves time and prevents unnecessary additional selectors assuming you have correctly referenced the bootstrap files for it to work properly.

http://getbootstrap.com/docs/4.1/layout/grid/

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

Retrieving information from a dynamically generated HTML table using PHP

I have successfully implemented functionality using JavaScript to dynamically add new rows to a table. However, I am facing a challenge in accessing the data from these dynamically created rows in PHP for database insertion. Below, you will find the HTML ...

Compatibility issues with jQuery observed in Firefox and Internet Explorer 11

Check out the code here: jsfiddle demo HTML CODE: <div class="first"> <!-- Part one --> <div class="acord_col"> <div class="img_class" id="exist_site"></div> <div class="intro_text"> </div> </div&g ...

Aligning a set of list items horizontally within an unordered list is a great way to maintain a clean

I'm struggling with centering the alignment of li elements within a ul. Below is the excerpt from my code: ul.nav { width: 1000px; margin: 0 auto; list-style-type: none; } .nav li { float: left; width: 300px; } #government { clear: left ...

Enhancing text display and spacing in Safari versions 5 to 6, as well as Chrome

After creating an introductory animation using jquery, I noticed that it displays correctly on my machine in Firefox, Chrome, and Safari. However, when viewing it on the client's devices, the animation is not working properly. The client provided a s ...

Websites experiencing horizontal scrolling functionalities

I have noticed that in my angular project, the website becomes horizontally scrollable when I log in. This only happens after logging in, and does not occur beforehand. I'm using angular calendars and Bootstrap for styling. What could be causing this ...

Failure to display masonry arrangement

I am working on creating a stunning masonry layout for my webpage using some beautiful images. Take a look at the code snippet below: CSS <style> .masonryImage{float:left;} </style> JavaScript <script src="ht ...

Ensure that the width of the sibling div matches the width of its sibling image

I need help displaying an image with two buttons positioned below it. The dimensions of the image can vary, so I've set a max-width of 60% and max-height of 80%. However, I'm struggling to align the buttons correctly under the image - with the le ...

What's the reason for not being able to customize classes for a disabled element in Material-UI?

Currently, I am utilizing Material-UI to style my components. However, I am facing challenges when trying to customize the label class for disabled buttons. Despite setting a reference as "&$disabled", it does not yield the desired results. import Rea ...

Tips for incorporating form validation into a modal in ASP.NET MVC

My task involves designing a form within a modal window with one mandatory field. The user should be able to submit the form only after filling out the required field; if left empty, an error message must display. What is the best approach to implement t ...

Adjust the size of the input field as text is being typed in

Can a text input box be automatically resized as text is entered? I've been looking online but haven't come across any solutions. ...

Active Arrow Link

I'm currently working on customizing the appearance of my WordPress site's categories sidebar by adding an arrow to the left side of the active link. After tweaking the CSS to achieve the desired behavior and making some color adjustments for te ...

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

Here is the HTML code I am working with: <div class="app-bar"> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> </div>' ...

Issues with jQuery scroll effect not functioning properly in Firefox due to transformation errors

I've encountered an issue with implementing a scroll effect in Firefox. The code works perfectly fine in Chrome, Safari, and Opera, but for some reason, it's not functioning properly in Firefox. I have carefully reviewed the '-moz-transform& ...

The padding of elements changes accordingly as the dimensions (width/height) of the header are adjusted

Currently, I'm tackling the challenges of working on my website and trying to understand JavaScript better. I am facing an issue where I want my aside menu's padding to adjust when my header shrinks in height. Furthermore, at the end of the web ...

CSS: Issue with rounding errors in Em units

Recently, I decided to update the CSS file for a website I'm working on by making most elements and fonts dynamic in size using the em unit instead of px. The new sizes seem to be working, but there's an issue that's been bothering me. It s ...

Unable to showcase information in the center of an HTML document

Hello, I'm facing an issue with my HTML page that has a left vertical nav-bar. Despite my efforts, I can't seem to display content (text) in the center of the page as shown in the screenshot with the red oval. I've attempted inserting text ...

Is it possible to adjust the height of input fields in MUI Reactjs?

Having trouble adjusting the height of input textfields using in-line css. <FormControl sx={{ "& .MuiOutlinedInput-notchedOutline": { borderColor: "blue", }, "&.Mui-focused .MuiOutlinedInpu ...

SVG fails to render in the browser upon page initialization

I am experiencing difficulties with rendering SVG icons in Google Chrome and other browsers when added through CSS on my website, specifically in a custom dropdown background. Here is a sample of the SVG code: background: #fff url("data:image/svg+xml ...

Using Javascript and JQuery to create an alert that pops up upon loading the page is not effective

I am having trouble making an alert show up when my website loads. The Javascript code is functional when directly included in the HTML, but once I move it to a separate file named script.js and link it, nothing happens. Can someone please help me identify ...

Elevate Your Design with Bootstrap 4 - Rearrange Rows with Ease

I have been browsing the Bootstrap documentation, but I am unable to locate the specific class needed to achieve a certain effect. Is there a method for shifting or offsetting a div Row if the parent row has a column that pushes down the bottom div? Can th ...