Tips for aligning a textbox and label in the same row with Bootstrap

Is there a way to align two text boxes and a drop-down in the same row while displaying labels below them? I want the layout to look like this:

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

Currently, my code is displaying the text boxes stacked on top of each other.

<div class="form-horizontal ">
    @Html.TextBoxFor(model => model.City, new{ placeholder = "City" })
    @Html.ValidationMessageFor(model => model.City)
    <div><small class="form-text text-muted">City</small></div>
    @Html.DropDownListFor(x => x.State, PressRoom.Helpers.StateNamesList.GetStatesList(), new { placeholder = "--Select State--" })
    @Html.ValidationMessageFor(model => model.State)
    <div><small class="form-text text-muted">State</small></div>

    @Html.TextBoxFor(model => model.ZipCode, new { placeholder = "Zip Code" })
    @Html.ValidationMessageFor(model => model.ZipCode)
    <div><small class="form-text text-muted">Zip</small></div>
</div>

c#htmlcssbootstrap-4

Answer №1

Utilizing bootstrap4, you have the option to achieve this layout by employing either the form-row or the standard row CSS classes.

<form>
    <!-- "row" class can be used here -->
    <div class="form-row">
        <div class="col">
            @Html.TextBoxFor(x => x.City, new { @class = "form-control" })
            @Html.ValidationMessageFor(x => x.City)
            @Html.Labelfor(x => x.City, new { @class = "text-muted small" })
        </div>
        <div class="col">
            @Html.DropDownListFor(x => x.State, 
                PressRoom.Helpers.StateNamesList.GetStatesList(), 
                "-- Select a state --",
                new { @class = "form-control" })
            @Html.ValidationMessageFor(x => x.State)
            @Html.Labelfor(x => x.State, new { @class = "text-muted small" })
        </div>
        <div class="col">
            @Html.TextBoxFor(x => x.ZipCode, new { @class = "form-control" })
            @Html.ValidationMessageFor(x => x.ZipCode)
            @Html.Labelfor(x => x.ZipCode, new { @class = "text-muted small" })
        </div>
    </div>
</form>

This setup will result in a design resembling: https://i.sstatic.net/uFG2P.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

Connecting Documents Together

I'm looking to learn how to link files together, specifically creating a button that when clicked takes you to another site or the next page of reading. I apologize if this is a simple question, as I am new to coding and only familiar with password-ba ...

html

Python Selenium if elif statements do not function properly in the scenario of clicking links

I want to automate the process of clicking links and extracting elements from a specific date, such as today. If the date is from yesterday, I want the program to quit. Despite using if-elif conditions, the website keeps clicking links regardless of the d ...

pythonhtmlseleniumif-statement

Utilize React Styled Components to seamlessly unify the styles of two different components

I want to have consistent styles for both a styled input element and a styled select element. Currently, I accomplish this using string interpolation: const styles = ` background-color: white; width: 100%; border: 0 solid transparent; bor ...

cssreactjstypescriptvisual-studio-codestyled-components

Database insertion failed due to a data error

I'm struggling to insert data into a MySQL database using PHP based on a condition check, but the process is not functioning as expected. The initial condition is working correctly, but the second condition fails to insert data into the database; ins ...

phphtmlmysqlphpmyadmin

proceed to a different destination

Hey everyone, I've encountered a problem that I can't seem to solve. I have two buttons in my code - one for deleting and the other for editing. The delete button works perfectly fine, but the edit button isn't redirecting to the PHP file as ...

phphtmlmysql

Embed a PHP function within an HTML tag using the echo statement

I have a unique function in my controller that retrieves the User's name here: public function fetchUser(){ $user_id = $this->session->userdata('ID'); return $this->users_model->get_user_name($user_id); } My goal is ...

phphtmlcodeigniter

Show a picture upon hovering the button

Welcome to my website. My goal: Show an image when a user hovers over the links. I must be making some silly error, but I can't pinpoint it. This is what I've attempted so far: HTML <ul class="nm"> <li><a href="#">Cork& ...

javascriptjquerycss

Dealing with ClientID Problems in ASP.Net 3.5

In my project, there is a straightforward input element that has the attribute runat="server". This input field is located within multiple layers of user controls, and I am using a getter to retrieve the ID. However, the ID obtained is not the complete gen ...

c#asp.net

Text Description: "Important Information Hidden Beneath Persistent Bar"

I have a website with a sticky header (position: fixed), and despite adding extra padding to the body, the main content Header and part of the paragraph are still hidden behind the fixed header. This issue only occurs on the homepage and on screens smaller ...

htmlcssheadersticky

Why does my loading screen appear again when I submit the form and refresh the page?

I've been working on setting up a login page and was able to create a loading screen that fades away once the page has finished loading. $(window).on("load",function(){ setTimeout(function() { $(".lo ...

javascriptphphtmljqueryforms

AngularJS routing that is tailored to form input

I am trying to create a dynamic html page where the user can input form variables. My goal is to use AngularJS routing to navigate to different URLs based on the form inputs. Does anyone have advice or guidance on how I can achieve this functionality? ...

htmlangularjsroutesurl-routing

What is the correct way to embed a script tag within a block of JavaScript code?

I'm currently working on a JavaScript code that needs to be executed inside an iframe. The goal is to insert a script tag within the JavaScript code and then append it to the parent body of the iframe. Below is the snippet of my code attempting to ach ...

javascriptjqueryhtmliframe

What is the best way to adjust the width of a textarea based on its content

How can I dynamically set the width of a React Semantic UI textarea based on its content? Setting min-width doesn't seem to be working. Any suggestions? <Textarea key={idx} defaultValue={formattedText} className="customInpu ...

javascriptcssreactjstextareasemantic-ui

Retrieve various identification numbers from one division and transfer them to another using AJAX

In my project, I have implemented a functionality where clicking on one DIV should trigger the opening of the next DIV in sequence. The first DIV triggers the second DIV to open, the second DIV opens the third DIV, and so on. This is achieved using collaps ...

phphtmlajax

Tips for accessing a stored procedure's return value in entity Framework

After searching extensively, I have finally come across a suitable solution for handling this issue. There is a stored procedure in place that retrieves a specific record from a table based on an ID parameter, outputting only one column. From the C# persp ...

c#.netsql-serverentity-frameworkstored-procedures

It displays the PHP code as a comment rather than executing it

I am encountering an issue with my PHP code. Instead of processing the code, it is treating it as a comment. Interestingly, when I used ?php instead of ?, the website doesn't even recognize the code as a comment. What could be causing this issue? < ...

phphtmlcss

Implementing a dynamic navigation bar that expands and collapses on mouse hover in a React application

I have a side navigation bar on my webpage that I obtained from a React Bootstrap website, so the class names are already pre-loaded. Instead of using a toggle hamburger icon to expand or collapse the navigation, I want to achieve this functionality based ...

javascripthtmlcssreactjs

Half-extended Bootstrap 4 container reaching the edge of the page

I'm looking to create a layout with a .container that consists of two distinct halves. The left half should function as a standard .col-6, while the right half should extend all the way to the edge of the screen, similar to a .col-6 within a .contain ...

twitter-bootstrapcssbootstrap-4

Unable to execute a JavaScript function when triggered from an HTML form

This is the code for a text conversion tool in HTML: <html> <head> <title> Text Conversion Tool </title> <script type="text/javascript"> function testResults(form) { var str = form.stringn.value; var strArray = str.split(" ...

javascripthtmlformsfunction

Issues arise with the Node EJS module due to the malfunction of the include

Struggling with incorporating HTML snippets into my index.html, even after reviewing the EJS documentation. Directory Structure: project -public --assets ---css ---images ---js --Index ---index.html + index.css and index.js --someOtherPageFolder -views - ...

javascripthtmlnode.jsexpressejs