Struggling to get the HTML layout just right on my MVC 5 Razor Page with Bootstrap CSS

I am currently facing difficulties aligning elements and displaying them in the same row. I am using MVC 5 razor pages along with HTML and Bootstrap.css. Despite spending several days on it, I have only made minimal progress since I started. I will provide any additional information required to assist me in resolving this issue – please note that there are more divisions in the table, but I have condensed the information as much as possible.

Below are the screenshots illustrating what I do not want and what I am aiming to achieve: https://i.sstatic.net/gJ2ty.png

Here is the markup code:

 
    <table style="width: 1562px; height: 836px;" cellpadding="1"; cellspacing="0"; border="1"; >

        <caption class = "control-label col-md-2", style = "display:inline; white-space:nowrap">
            @Html.DisplayFor(model => model.Title)<br>
        </caption>
       <tbody>
            <tr>

                @*SECTION TITLE MODIFIED .. CATEGORY*@
                <td colspan="1" rowspan="4" style="vertical-align: middle; width: 244px; margin-left:4px" class="form-horizontal" >
                    <br>
                    <ul style="color: blue; list-style-type: none; list-style-image: none; list-style-position: outside; width: 260px;" class="form-horizontal">
    <li>

        @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })

        @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

    </li>
    <li>

        @Html.LabelFor(model => model.PublishDate, htmlAttributes: new { @class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })

        @Html.EditorFor(model => model.PublishDate, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.PublishDate, "", new { @class = "text-danger" })


    </li>
    <li style="display:inline-block; width:auto">

        <div class="form-horizontal">
            @Html.LabelFor(model => model.ModifiedDate, htmlAttributes: new { @class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })
            <div  style="width:50%">
                @Html.EditorFor(model => model.ModifiedDate, new { htmlAttributes = new { @class = "form-control" , style= "width:50%" } })
                @Html.ValidationMessageFor(model => model.ModifiedDate, "", new { @class = "text-danger", style = "width:50%" })
            </div>


        </div>
</li>
    <li>  <p style="display:inline-block">

        <div class="form-horizontal" id="isActive">
    @Html.LabelFor(model => model.IsActive, htmlAttributes: new { @class = "control-label col-md-1" })
</div>
    <div class="checkbox" style="align-items:flex-end;">
        @Html.EditorFor(model => model.IsActive)
        @Html.ValidationMessageFor(model => model.IsActive, "", new { @class = "text-danger" })
    </div>

</p> 

        <br style="line-height:20px" />
</li>

    <li> <p>

             <div class="form-horizontal" id="ddlCategoryGroup" style="display:inline-block;white-space:nowrap;">
                 &nbsp; 
                 @Html.LabelFor(model => model.CategoryId, "Category", htmlAttributes: new { @class = "control-label col-md-2" })
</div>
                 <br style="line-height:25px;" />
<p>
        <div class="col-md-10" id="ddlCategory">
            &nbsp;   
            @Html.DropDownList("CategoryId", null, htmlAttributes:
                                                 new { @class = "form-control", style = "font-family:'Franklin Gothic Medium', 'ArialNarrow', Arial, sans-serif; font-size:1.2EM; width:auto; display:inline; white-space:nowrap" })
            &nbsp;    
            @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
        </div>
            </p><br/>

        <p style="display:inline-block">
            <div>
                &nbsp;&nbsp;&nbsp;
                @Ajax.ActionLink("New", "Create", "Category", Model.Category,
     new AjaxOptions { UpdateTargetId = "ddlCategory", InsertionMode = InsertionMode.Replace },
     new { htmlAttributes = new { @class = "control-label col-md-2" } }) |
                @Ajax.ActionLink("Edit", "Edit", "Category", Model.Category,
     new AjaxOptions { UpdateTargetId = "ddlCategory", InsertionMode = InsertionMode.Replace },
     new { htmlAttributes = new { @class = "control-label col-md-2" } }) |
                @Html.ActionLink("Delete", "Delete", new { id = @Model.CategoryId }, new { htmlAttributes = new { @class = "control-label col-md-2" } })

            </div>
        </p>

</p>
</li>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
htmlcssasp.net-mvcrazorbootstrap-4

Answer №1

If you're looking to enhance the design of the "published on" and "last modified" input fields, consider utilizing the flex classes provided by bootstrap.

<div class="d-flex">
 <input type="text" />
 <button><i class="fa fa-calendar"></i></button>
</div>

1.Check out the bootstrap doc on flex

2.Explore this cheat sheet for flex boxes

Answer №2

My preferred method for designing is to utilize bootstrap classes and div elements instead of tables and list elements. This approach provides more control over the design process. Take a look at the code snippet below.

To start, create a parent div with the class form-horizontal. Then, create a div with the class form-group for each input.

<div class="form-horizontal">
    <h4>Write a Suitable title for your Form</h4>
    <hr />
       <div class="form-group"> @*Create this div for each form input element*@
                @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-6"> @*Based on your requirement you can change the col-md-3 value any where from 1 to 10*@

                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

            </div>
      </div>
</div>

As you can see:

  1. We use a parent div with the class form-horizontal for the entire form
  2. Each input element is wrapped in a form-group div
  3. Within each form-group, there are a label and a div with class col-md-6 (or any preferred length) that contains the main input element (textbox, dropdown, checkbox, etc)

By replacing li elements with divs with the class form-group, you can resolve many design issues.

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

Steps to modify the border width upon gaining focus

I am struggling to adjust the border width when my input box is focused. Currently, it has a 1px solid border which changes to a 2px different color solid border upon focus. However, this change in border width is causing the containing div to shift by 1px ...

javascripthtmlcssinputborder

Adjust the width of the table's td elements

I am looking to create a table similar to the one shown above. Here is my implementation. Please review my JSFiddle. HTML: <table border="0" id="cssTable"> <tr> <td>eredgb</td> <td><a href="self">0 ...

htmlcss

What is the best way to include PHP code within an HTML tag?

I need help figuring out how to display the value of a variable called 'fname' inside an HTML tag. Below is a snippet of my code where I'm trying to get the input value and print it in a paragraph tag. <?php if (isset($_POST['submit ...

phphtml

What is the best way to retrieve the column name from a specific MySQL table and store it in an

Is there a way to extract column names from a MySQL database? I have been able to retrieve column names using the following code: Array ( [id] => id [BSPKey] => BSPKey [PrintPost] => PrintPost [Barcode] => Barcode [FirstName] => FirstName [ ...

phphtmlmysqlselect

Using ajax to pass date parameters to @url.action

I am encountering a problem in my ASP.NET MVC 4 application where I am using JAX code sourced from a StackOverflow post to pass Date parameters to a controller. Unfortunately, I am receiving an http 404 error that states: "The resource you are looking for ...

ajaxasp.net-mvcasp.net-mvc-ajaxurl.action

Flask does not provide a direct boolean value for checkboxes

After struggling for a week, I am still lost on where to make changes in my code. I need the checkbox to return a boolean value in my Flask application. Below are snippets of the relevant code: mycode.py import os, sqlite3 from flask import Flask, flash ...

javascriptpythonhtmlcssflask

Display or conceal a frame with the help of JavaScript or jQuery

Is there a simple way to hide the "topFrame" and "menu" frames when clicking an image or button, and then unhide them by clicking again? Apologies for not including the "topFrame" and "menu" jsp files, as they are dynamically generated in my application. ...

javascriptjqueryhtml

Issue with jSignature transitioning properly from display:none to display:block within a multi-page form

After searching through numerous resources, I have been unable to find a solution to my specific issue. I have a multi-page form that incorporates jSignature as the final tab. The structure closely follows the example from the W3Schools website, tailored t ...

javascripthtmlcssformsjsignature

The issue of not being able to type in the sweetalert 2 input within a material UI modal in a

Within a card displaying an order, there is a sweetalert2 popup that opens when trying to cancel the order, asking for a cancellation reason. This feature works seamlessly on the orders screen. https://i.sstatic.net/RWhOA.png <Grid item md={8} sm={12}&g ...

cssreactjsmaterial-uisweetalertsweetalert2

Navbar active class not updating on jQuery page scroll

My one-page website has a fixed navbar that I want to change its active status when scrolling down to specific div positions. Even though I tried using jQuery, the code doesn't seem to work as intended. Here is the snippet: // SMOOTH SCROLLING PAGES ...

javascriptjqueryhtmlcss

Comparing between bootstrap-flex, bootstrap-grid, and bootstrap-reboot: similarities and distinctions

The latest iteration of Bootstrap (current version as of the time this question was posed is <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7a45f757b757b766a776f762b606">[email protected]</a>) in ...

cssangularbootstrap-4twitter-bootstrap-4ng-bootstrap

What is the correct syntax for implementing scrollTop and transform CSS effects in jQuery?

I find myself in a bit of a quandary, as this question may seem rather simple but it's causing me some confusion. I'm trying to navigate the CSS transform syntax within a jQuery script that calculates window height. Here is the code in question: ...

javascriptjquerycssjquery-ui

submit the data to the database

How can I successfully pass the value from the Ajax code to the database in this program aimed at displaying user details? There seems to be an error in the code for passing the value. What steps should I take to rectify this issue? function showUser() ...

javascriptphphtmlajax

Is there a way to display two cards side by side in mobile view?

On a desktop view, 2 cards are displayed in a row. I would like them to also appear in a row on mobile view. I tried using col-sm-4 but it's not working. How can I get the cards to display in a row on mobile view so that I can see both the product pho ...

htmlcssbootstrap-4

What is the best approach to animating a specified quantity of divs with CSS and javascript?

How neat is this code snippet: <div class="container"> <div class="box fade-in one"> look at me fade in </div> <div class="box fade-in two"> Oh hi! i can fade too! </div> <div class="box fade-in three"& ...

javascriptcss

What is the best way to define a styleClass for applying this CSS?

Is there a way to create a unique styleClass for the tabbed menu section of the form without affecting anything else? Currently, the CSS I have is applying to everything on the form. a.tab-menu-link:link, a.tab-menu-link:visited { display:block; width:1 ...

css

"Enhancing User Experience by Enabling Full Clickability on List Items

I am working on a hamburger menu with a dropdown feature, and I want the entire dropdown menu to be clickable instead of just the text. Below is my current code which only allows clicking on the text. cshtml <nav class="navbar fixed-top navbar-dark bg ...

htmlasp.net-mvcrazorbootstrap-4

How can a method inside an object property of the same class be invoked in JavaScript?

I'm faced with a bit of confusion here. I have a class property called hotspot of type object, declared as follows: Cannon.prototype.hotspot = {stuff: this.blah(...) }; The method blah() is actually a prototype of the same 'class': Canno ...

javascripthtmlprototypejs

Sub menus are not appearing in the drop-down menu

Below is the code for my dropdown button with an additional level. Initially, the button works as intended. However, upon attempting to click within the dropdown submenu, I noticed that all four items displayed the same last submenu only. .icon-cadet-l ...

htmlcsscss-selectors

What is the method for defining the href attribute using the parameter passed through ejs?

For my node.js express application, I am utilizing ejs as the view engine. One of the pages in this application is a profile page that displays a user's information. Within this page, there is an anchor tag with the user's email address as the va ...

htmlnode.jsexpressejs