Creating a sleek layout with dropdowns and checkboxes aligned side by side in MVC 5 using Bootstrap 4

The current controls are structured as follows:

 <div class="form-horizontal">
<div class="form-group ">
                    @Html.LabelFor(model => model.TribeId, @Resource.TribeName, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-4">
                        @Html.DropDownList("TribeId", null, @Resource.SelectTribe, htmlAttributes: new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.TribeId, "", new { @class = "text-danger" })
                    </div>
                    <div class="col-lef-1">
                        <input type="checkbox" id="chkTribe" name="" value="">
                        <label>@Resource.Skip</label>
                    </div>
                </div>
</div>

As seen in the picture, https://i.sstatic.net/O4aod.png

All dropdowns display the label and dropdown fine, but I wish to position the checkbox alongside its related dropdown element.

I welcome your suggestions.

Thank you

c#cssasp.net-mvcbootstrap-4asp.net-mvc-5

Answer №1

Try using the following code snippet: Ensure that you include the class row in the parent div so that the child elements are displayed in one row within a col-12. If there are alignment issues with the checkbox, consider adding padding-top to the checkbox div. Here is an example of what you may be looking for:

<div class='col-md-12 form-group row'>
    <div class="col-md-12"><label for="test">LABEL</label></div>
    <div class="col-md-3">
        <select name="test" class='form-control'>
            <option>1</option>
            <option>2</option>
        </select>
    </div>
    <div class="col-md-3">
        <input type="checkbox" id="chkTribe" name="" value="">
        <label>Checkbox</label>
    </div>
</div>

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

Send a JSON data to an MVC controller and fetch an IEnumerable data structure

I am trying to fetch a JSON object through AJAX, structured as: {ID_USER : ID_INSTRUCTION} The fetched JSON looks like this: [{"658":"81"},{"658":"82"},{"658":"90"},{"658":"101"}] Below is my jQuery code for handling the AJAX request: $("#boutton-add" ...

jqueryasp.netjsonajaxasp.net-mvc

Is there a way to utilize the power of 'Regex' to isolate a specific file name?

I am trying to extract the file name 13572_BranchInformationReport_2012-06-28.zip from the provided text below - 1:30","/icons/def13572_BranchInformationReport_2012-06-28.zip","13572_BranchInformationReport_2012-06-28.zip",0,"184296","Jun 28 I have imp ...

c#asp.netregex

Scaling the ion-spinner to fit your specific needs

In my Ionic application, I am utilizing the ion-spinner. However, I have encountered an issue with resizing the spinner. While custom CSS works well with default spinners, it does not function properly with Bubbles, Circles, and Dots spinners. CSS .spin ...

cssangularionic-framework

React JS - Large image failing to display entirely

I'm currently facing challenges with displaying my image in full size. I am unsure what is causing this issue and would appreciate any guidance on correcting my approach. The specific image I am attempting to display at full-size can be found https:/ ...

cssreactjs

Steps for embedding the code into your website

I'm facing an issue with integrating a .jsx file into my website. I tried testing it on a single-page demo site, but nothing is showing up. Can someone guide me through the steps to successfully integrate it onto my site? I've also attached the . ...

javascripthtmlcssreactjs

refreshing a WPF DataGrid

I have encountered a problem while loading a datagrid. The issue arises when I try to display a datagrid by populating a datatable with values fetched from an SQL database, including 3 extra columns with checkboxes. The goal is for each checkbox in the dat ...

c#.netwpf

How to troubleshoot Javascript code that fails to identify if a color is white

What could be causing my code to malfunction? I am attempting to determine if the paragraph text color is white (as determined by CSS settings). If it is indeed white, I want to change it to black for better visibility. function adjustColor() { if (d ...

javascripthtmlcss

Interested in incorporating dynamic calendar entries in ASP C#?

Here is the code snippet I utilized: <script> var count = 1; var limitValue = 3; function addNewInput(sectionName) { if (count == limitValue) { alert("You have reached the limit of adding " + count + " inputs"); ...

javascriptc#asp.net

Struggling to Deploy Application with ASP.NET Core 1.1

I'm having issues running a dotnet publish command on my Linux server to compile my web application. The error message indicates that my project.json file is missing. Before providing a solution, there have been recent changes that need to be taken i ...

c#asp.net.netasp.net-core.net-core

XMLWorker: unable to align cell vertically properly

Upon reviewing this code snippet: <table> <tr> <td border="1"> <table> <tr><td>Blah</td></tr> <tr><td>Blah</td></tr> ...

cssitextxmlworker

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Currently, I am working on a personal project that involves creating a grid of divs in HTML corresponding to a 2D array in JavaScript. However, I am uncertain about the most effective way to accomplish this task. Specifically, what I aim to achieve is tha ...

javascriptjqueryhtmlcss

The child div can be scrolled horizontally, while the parent window remains fixed

I am facing a challenge with my HTML and CSS setup. I want to create a child div that scrolls horizontally, but I do not want the parent window to scroll along with it. Below is my current code: <div id="parent"> <div id="div1"> . ...

javascripthtmlcss

My SQL Update statement doesn't seem to be working as expected as the row is not being affected. What could be causing this

Currently, I am in the process of developing a website using ASP.NET in Visual Studio 2019. In one of the webforms, I have data retrieved from an SQL table that I need to update upon clicking a button. The function invoked when the button is clicked looks ...

c#asp.netvisual-studiosql-update

Issue regarding the functionality of CSS styling when applied to a button

Trying to Style a Button with CSS div.myButton input a { display:block; height: 24px; width: 43px; padding:10px 10px 10px 7px; font: bold 13px sans-serif;; color:#333; background: url("hover.png") 0 0 no-repeat; text-decoration: none; } myButton a:hover { ...

htmlcss

Why is ASP.NET displaying an internal server error (500) when I input HTML characters into my form?

When I input HTML characters into my form, like <br />, ASP.NET triggers an internal 500 error as explained in this discussion. A potentially hazardous Request.Form value was identified from the client (Name="<br />"). While it's safegua ...

asp.netasp.net-mvcvalidationvb.netcharacter-encoding

Challenges with jQuery parent method reaching the grandparent element

Hey, I'm a newbie to jQuery and I'm trying to make changes to divs that are two levels above the function trigger: Here's my initial attempt: I try to locate the closest '.node' which is the parent of all other divs and then modif ...

jqueryhtmlcss

Using a color as a substitute for a background image on mobile devices

Is there a way to create a fallback in my CSS for changing the background image to a color when viewed on a mobile browser once the pixels reach the max-width? In the snippet below, the media query "only screen and (max-width: 600px)" works if the top bod ...

htmlcss

The z-index property in CSS is ineffective on Firefox browsers

My current project involves implementing a dual slider input range. The HTML code I have written looks like this: .acCalcInputRange input[type="range"] { pointer-events: none; position: absolute; bottom: 0.6rem; border: none; outline: none; ...

cssfirefoxz-index

Can we implement a variety of site designs based on the size of the window?

Utilizing media queries allows us to modify the CSS for various screen sizes. My inquiry is: can we switch to a completely different page layout (or View in MVC) when the window size, specifically when the width is less than 500? Assuming that the control ...

cssasp.net-mvc

the label remains grounded even as the browser autocompletes passwords with the password manager

https://i.stack.imgur.com/vJMyg.png I noticed that the password label on my login form does not float when the browser's password manager auto-completes. Can someone help me fix this issue? Attached is an image for reference. /* login form ...

htmlcss