Ways to make the Bootstrap form's fields align horizontally

I've exhausted all options, but I just can't seem to get the fields aligned horizontally.

<form class="form-horizontal" role="form">
    <div class="form-inline">
        <div class="form-group">
        <label for="acctName" class="col-sm-2 control-label">Account Name </label>
        <div class="col-sm-10">
            <input type="text" ng-model="vm.acctName" class="input-xlarge" placeholder="Account Name" />
        </div>
        </div>
    </div>
    <div class="form-inline">
        <div class="form-group">
        <label for="acctId" class="col-sm-2 control-label">Account ID &nbsp;&nbsp;&nbsp;&nbsp;  </label>
        <div class="col-sm-10">
            <input type="text" ng-model="vm.acctId" class="input-xlarge" placeholder="Account ID" />
        </div>
        </div>
    </div>

I even attempted 

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="acctName" class="col-sm-2 control-label">Account Name </label>
        <div class="col-sm-10">
            <input type="text" ng-model="vm.acctName" class="input-xlarge" placeholder="Account Name" />
        </div>
    </div>

    <div class="form-group">
        <label for="acctId" class="col-sm-2 control-label">Account ID &nbsp;&nbsp;&nbsp;&nbsp;  </label>
        <div class="col-sm-10">
            <input type="text" ng-model="vm.acctId" class="input-xlarge" placeholder="Account ID" />
        </div>
    </div>

Yet, the fields stubbornly remain in a vertical stack.

What am I missing?

htmlcsstwitter-bootstrap

Answer №1

Take a look at this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">  
  <div class="form-group">
      <label for="acctName" class="control-label">Account Name </label>
      <input type="text" class="form-control input-xlarge" ng-model="vm.acctName" placeholder="Account Name" />     
  </div>

  <div class="form-group">
      <label for="acctId" class="control-label">Account ID &nbsp;&nbsp;&nbsp;&nbsp;  </label>
      <input type="text" class="form-control input-xlarge" ng-model="vm.acctId"  placeholder="Account ID" />      
  </div>
  <div class="form-group">        
      <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</form>

Answer №2

Seems like there may be an issue with the way classes are being used. Consider using the code below:

<form class="form-inline">
    <fieldset>
        <div class="form-group">
            <label for="acctName" class="col-lg-2 control-label">Account Name</label>
            <div class="col-lg-10">
                <input type="text" class="form-control input-xlarge" id="acctName" ng-model="vm.acctName" placeholder="Account Name" />
            </div>
        </div>
        <div class="form-group">
            <label for="acctId" class="col-lg-2 control-label">Account ID</label>
            <div class="col-lg-10">
                <input type="text" class="form-control input-xlarge" id="acctId" ng-model="vm.acctName" placeholder="Account ID" />
            </div>
        </div>
    </fieldset>
</form>

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

Tutorial on integrating jquery ui's '.droppable' feature with the jQuery '.on' method

I have a main div with three inner divs labeled 1, 2, and 3 as shown below: <div id="main"> <div style="height:30px; background-color:yellow;" class="bnr">Banner</div> <div style="height:30px; background-color:yellow;" class=" ...

javascriptjqueryhtmlcssjquery-ui

Can the background color of HTML header text be altered using JavaScript in JQGRID?

Can the background color of HTML header text be modified using JavaScript? Updated: Oops, I forgot to mention that it is for the header text in jqGrid. My apologies for that oversight. ...

javascripthtmlcssjqgrid

What are some ways to display multiple divs within a single popup window?

I am attempting to create the following layout: https://i.sstatic.net/OzE98.png Here is what I have been able to achieve: https://i.sstatic.net/7GxdP.png In the second picture, the divs are shown separately. My goal is to display the incoming data in a ...

javascripthtmlcssreactjs

Setting up a PHP email form for offline use

Here is the code I am currently working on: <?php if(isset($_POST['submit'])){ $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086d65696164486d70696578646d266b6765">[email protected]</a>"; // ...

phphtmlformsemaillocalhost

What steps should I take to successfully integrate my Dojo DataGrid into a Dojo ContentPane that is nested within a Dojo TabContainer?

It seems that the issue arises from having different settings for parseOnLoad in the separate widgets. I have experimented with both true and false values but without success. To troubleshoot, I created three web pages - two containing TabContainer and Dat ...

htmldojodojox.grid.datagrid

Angular 2: Triggering the "open" event for a Bootstrap dropdown

I am currently in the process of developing a directive that will trigger a Bootstrap dropdown to open when clicked and close it when the mouse leaves. Below is the code for the dropdown directive: import {Directive, HostBinding, HostListener} from ' ...

twitter-bootstrapangular

Unable to load AngularJS thumbnails from JSON file? Learn how to showcase a larger image by clicking on the thumbnail

Working with AngularJS to retrieve image data from a JSON file has been successful for me. My next task involves loading all of the thumbnail images into the gallery div and populating the src, alt, and title attributes using ng-repeat. However, this part ...

javascripthtmlangularjsjson

Achieving dynamic text alignment within a Grid tile container using HTML and Angular

Here is the main section of my parent component. <div class="o-tile-container "> <div *ngFor="let country of Countrys"> <app-country [na ...

htmlcssangulartypescript

What is the process of utilizing jQuery to hover over a relevant cell?

I'm interested in learning how to implement jQuery to highlight related tables. Initially, I explored this JS fiddle and discovered a method for highlighting both vertically and horizontally. I conducted several searches to find a similar approach, ...

javascriptjqueryhtmlcsshtml-table

What steps do I need to take to create a custom image for a website?

I'm looking for a way to create a website image using just code, without the need for an actual image file or image tag. Is there a method to do this? Would I use CSS, Javascript, or HTML5 for this task? If using JavaScript to dynamically generate the ...

javascriptcsshtml

What is the best way to resize a primefaces inputTextArea to match the length of the

I am currently working on improving the appearance of <p:inputTextArea/>. When the page loads, I notice: And when I click on that TextArea: Here is the code: <p:inputTextarea rows="6" value="#{bean.object.value}" style="width: 100%;" /> Is ...

javacssjsfjakarta-eeprimefaces

When I click the button, the page goes blank and keeps loading endlessly

http://jsfiddle.net/iansan5653/7EPjH/17/ <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type="text/javascript"> function chart() { var pressure; ...

javascripthtmlfunctiongoogle-visualization

What is the best way to define the location of a button's on-click event using jQuery?

I'm having an issue with my website. It's a Wordpress site using the Contact Form 7 plugin. On the homepage, there is a button labeled "Get a quote" that I want to link to google.com when clicked. I tried using jQuery but it's not working pr ...

jqueryhtmlwordpress

Issue: The d-inline-flex and flex-row-reverse combination in Bootstrap is malfunctioning

I am trying to achieve a specific layout in my HTML, as shown below: https://i.sstatic.net/fVUt1.png <p>Use .flex-row-reverse to right-align the direction:</p> <div class="d-inline-flex flex-row-reverse bg-secondary"> & ...

twitter-bootstrapbootstrap-4bootstrap-5

Using a zoom background image in an HTML document without any accompanying text

I am trying to create a zoom effect on a background image without affecting the text overlaying it. Here is the CSS code: .page1-box { width: 1200px; height:800px; overflow:hidden; } .page1 { width: 100%; height: 100%; background: ...

jqueryhtmlcss

What is the process for retrieving data from a javascript file that was submitted through a form?

Can you help me with an issue I'm having with this code snippet? <form action="main.js"> <input type="text" required="required" pattern="[a-zA-Z]+" /> <input type="submit" value="Submit" /> </form> After c ...

javascripthtmlformsinputsubmit

What is the process for incorporating PHP into a three-dimensional virtual world?

I recently completed a client's website using a combination of PHP and basic HTML/CSS. The site's main feature is the ability for users to upload images and view them in a digital art gallery. Essentially, I positioned the images against a backgr ...

phphtmlweb3d

Error in identifying child element using class name

I need help accessing the element with the class "hs-input" within this structure: <div class = "hbspt-form".......> <form ....class="hs-form stacked"> <div class = "hs_firstname field hs-form-field"...> <div class = ...

javascripthtmlcss

Utilizing modal dialogs in HTML and navigating back to the previous page

I'm currently learning about HTML, CSS, JavaScript, and SQL. Here is some context: Imagine a scenario where I am developing a website to manage information on dogs, their owners, and the relationships between them. All this data is stored in an SQL ...

javascripthtmlmodal-dialog

How to load several stylesheets for a component in Angular 2

Struggling with my angular2 application, I encountered an issue when attempting to load multiple stylesheets for the same component. Below is a snippet of the code: import { Component } from '@angular/core'; @Component({ selector: 'my-tag& ...

csstwitter-bootstrapangularwebpackstyles