Why isn't the horizontal form displaying its elements in a horizontal orientation?

After running my code, the output looks something like this:

<div class="container col-sm-4" style="background-color: wheat">
  <form action="/AwfulSite/Search/Index" class="form-horizontal" method="post" role="form">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="FirstName" style="text-align: right">FirstName</label>
      <input class="form-control col-sm-10" id="FirstName" name="FirstName" type="text" value="">
    </div>
  </form>
</div>

I'm confused as to why the label and input field are displaying on separate lines. I specifically set the form layout to be horizontal. How can I make them align horizontally?

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

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

The issue at hand is a bit nuanced - attempting to utilize a .form-control element as a column causes conflict with the intended structure of Bootstrap's scaffolding system. By inspecting the styles applied by .form-control, one can see that it includes width:100%, causing the element to be wider than what a .col-sm-10 should ideally accommodate (which results in it breaking onto a new line).

Referencing the official documentation example, a workaround involves nesting the .form-control within a <div> and using that enclosing <div> as the designated column. Thus, your code could be revised as follows:

<div class="container col-sm-4" style="background-color: wheat">
  <form action="/AwfulSite/Search/Index" class="form-horizontal" method="post" role="form">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="FirstName" style="text-align: right">FirstName</label>
      <div class="col-sm-10">
        <input class="form-control" id="FirstName" name="FirstName" type="text" value="">
      </div>
    </div>
  </form>
</div>

For reference, an illustrative Bootply has been included. Feel free to reach out if you require further clarification or have any queries.

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

What is the process for creating a List Grid View utilizing this particular code?

I attempted to modify the stylesheet extensively and also created a small function in JavaScript, but unfortunately it did not yield the desired results. <div class="row featured portfolio-items"> <div class="item col-lg-5 col-md-12 col-xs ...

htmlcss

Tips for setting background colors as a prop for Material UI cards in React JS

Currently utilizing the Material UI next framework to construct a wrapper for the card component. This customized wrapper allows for personalization of the component. I have successfully extended the component so that the title and image within the card ca ...

javascriptcssreactjsmaterial-uijss

Stylish CSS: Jagged 3-dimensional rotated text

Have a look at this Codepen to see the issue. As the text moves into the background, more aliasing appears. A screenshot taken in Chrome on macOS (similar appearance in FF & Safari): https://i.sstatic.net/n746I.png I've experimented with different ...

htmlcssantialiasing

Access the HTML file from a different directory

I have a directory called "myWebsite". Within this directory, there is a file named "index.html" and another subdirectory named "other". Inside the "other" directory, there are CSS files, JS files, and "page2.ht ...

javascripthtml

Essential symbol needed for labeling the user interface element

My HTML includes a dynamic label component where the 'required' value is determined by an API response that can be either true or false. Is it feasible to assign the property ojComponent{ required: true } for this label? *Date From ---- To --- ...

htmlknockout.jsjetoracle-jet

An error occurred: Reaching the maximum call stack size when utilizing the .map function in jQuery

Encountering a console error: Uncaught RangeError: Maximum call stack size exceeded This is the jQuery snippet causing trouble: $(document).on("change","select.task_activity", function(){ selected_activity = $("select.task_activity :selected").map(fu ...

javascriptjqueryhtml

Is it possible to dynamically alter the href attribute of a hyperlink within a Twig template in Symfony 2?

Developing a menu for my website has been occupying my time lately, sparking numerous inquiries about its functionality. Essentially, I aim to create a menu with a select option containing all my projects. By clicking on either the modify or delete button, ...

htmlsymfonytwig

I'm encountering an issue with VS Code where it is unable to identify ejs tags within my project

I'm running into an issue with Vs code where it's not recognizing ejs output tags when they're inside an html tag, like in the input tag below : <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form. ...

javascripthtmlnode.jsexpressejs

How can you hide specific elements in HTML/CSS based on window size without relying on media queries?

How can I create an HTML/CSS toolbar where specific elements disappear completely when the browser size is decreased, similar to how the favorites bar functions in most browsers? The toolbar should be able to display a varying number of items. In this cas ...

htmlcssfrontend

Generating multiple div elements within an AJAX iteration

Currently, I am retrieving data from the server side using AJAX. My goal is to populate data from a list of objects into divs but I am facing an issue where I cannot create the div while inside the foreach loop. $(document).ready(function () { var ...

javascriptjqueryhtmlajax

Having trouble with Jquery's .mouseover() method? Let's catch the solution!

I'm currently working on a jQuery homework assignment and I've been attempting to enhance the mouseover feature, but unfortunately, it's not functioning as expected. $("button").mouseover(function() { $(this).css({ left: (Math.rando ...

javascriptjqueryhtmlcss

Finding the data type based on the button clicked with javascript: A beginner's guide

I am trying to work with a PHP function that generates dynamically created divisions. Each of these divisions contains a different data type and a button. How can I extract the data type of a division when the user clicks on the submit button using JavaScr ...

javascriptphpjqueryhtmlajax

User agreement required for HTML5 geolocation custom notifications

Currently implementing HTML5 geolocation on my mobile website. I am exploring the possibility of displaying a custom notification instead of the default web browser notification to request user consent for sharing their location. This custom notification ...

htmlgeolocation

Adjusting the size of elements and the dimensions of the browser window

My challenge involves a container with multiple buttons that are absolutely positioned. I would like these buttons to dynamically resize based on the width of the browser window. Essentially, I want both the size and position of the buttons to adjust accor ...

javascriptjquerycsshtml

The PHP for loop mysteriously adding an additional iteration

I'm currently working on solving a challenge. Within an unserialized array, I have multiple choice questions retrieved from the database and displayed in a dropdown menu. To properly grade the answers submitted by users, the system needs to loop thr ...

phphtmlfor-loopforeach

Improving Java Performance by frequently replacing one String with another

Currently, I am developing an HttpServlet extension (plugin) for a CMS that is responsible for filtering the HTML response. Within my method filterResponse, I retrieve the requested text/html as a String, which is one of three parameters. The main task a ...

javahtmlstringperformanceoptimization

Implementing a hamburger menu and social media sharing buttons on websites

Currently working on my personal website and delving into the world of Web Development, I have some inquiries for seasoned developers. My first query revolves around incorporating a hamburger menu onto my site for easy navigation to other pages. After att ...

javascripthtmlcsswebhamburger-menu

Choose the CSS class based on the content provided

Help needed with CSS issue. I want to target the <tr> element's class using Bootstrap classes like .success or .danger. In my Vue.js project, the status name in my object does not align with the .success or .danger classes, but I still need to ...

javascriptcsstwitter-bootstrapsassvue.js

What is the best method for rounding a decimal number to two decimal places?

Here is the JavaScript code I am using: $("input[name='AuthorizedAmount'], input[name='LessLaborToDate']").change(function () { var sum = parseFloat($("input[name='AuthorizedAmount']").val()).toFixed( ...

javascripthtml

Incorporating Stripe: Enhancing Online Payments through Redirected Checkout

I am currently in the process of upgrading our checkout system to be SCA compliant. According to the documentation, I must utilize PaymentIntents for this purpose. I have followed the steps outlined in their document found at: https://stripe.com/docs/payme ...

javascriptjavahtmlstripe-payments