Placing a pair of labels onto a bootstrap form while ensuring column alignment

I'm trying to format a form according to my UI/UX specifications, where there is a parent label and two sub-labels. Can this be achieved using Bootstrap?

https://i.stack.imgur.com/J8wJZ.png

However, I'm struggling to align the columns and rows properly. Is it feasible to do so? Or does this involve nested forms which are not permitted? Below is the code snippet I've been working on, along with a link to a fiddle. 

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">Parent Label</label>
    <div class="col-sm-8">
      <div class="row">
        <label class="control-label">Sub Label 1</label>
        <input class="form-control input-sm" type="text" value="Dynamically Pulled via Razor">
      </div>
      <div class="row">
        <label class="control-label">Sub Label 2</label>
        <input class="form-control input-sm" type="text" value="Dynamically Pulled via Razor">
      </div>
    </div>
  </div>
</form>

https://jsfiddle.net/xue2vfde/

htmlcsstwitter-bootstrapforms

Answer №1

I struggled to align my columns properly for the input fields. However, once I grouped the inputs in a column div, everything fell into place!

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-3 control-label">Parent Label</label>
    <div class="col-sm-8">
      <div class="row">
        <label class="col-sm-2 control-label">Sub Label 1</label>
        <div class = "col-sm-6">
                <input class="form-control input-sm" type="text" value="Dynamically Pulled via Razor">
        </div>
      </div>
      <div class="row">
        <label class="col-sm-2 control-label">Sub Label 2</label>
        <div class = "col-sm-6">
                <input class="form-control input-sm" type="text" value="Dynamically Pulled via Razor">
        </div>

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

https://jsfiddle.net/xue2vfde/4/

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

Exploring the World of HTML and PHP

I've recently started learning HTML and PHP. After installing the XAMPP software on my Windows computer, I launched the Apache and MySQL servers and created an HTML file like the one below - however, the PHP code doesn't seem to be executing. Eve ...

phphtmlmysqlapachexampp

conflicting character encoding systems

Request normally comes in this format: Parameters: {"utf8"=>"✓", "status_id"=>"12686"} However, from one particular client, the request looks like this: Parameters: {"utf8"=>"\xE2??", "status_id"=>"12686"} As a result, I am encounter ...

htmlruby-on-railsencodingutf-8rack

"Integrating information from a MySQL database into an existing HTML document: A step-by-step guide

My goal is to create a news site that pulls data from a MySQL table and inserts it into the HTML structure I have already designed. Is there a method to extract values and insert them into my HTML tags? I have a complete HTML layout in place with placehold ...

phphtmlmysql

Styling tooltips using only css - Dealing with overflow issues

What is the best way to effectively showcase these tooltips? When using overflow visible, the issue is resolved, but it causes other elements to spill out of the div. How can this be addressed? HTML: <div id="test"> <a title='Sample tooltip& ...

htmlcss

Fixed and percentage widths in horizontal divs for children, with the percentage width exceeding the desired size

Here's the code snippet I'm working with: http://pastebin.com/W3ggtgZB. The body of this code can be found here: http://pastebin.com/2tkmhnfW. My goal is to create a div containing two child divs. One child div should have a fixed width, while t ...

htmlsizewidthpercentagechildren

What is the best way to deactivate a hyperlink on a widget sourced from a different website?

Is there a way to remove the link from the widget I embedded on my website without access to other editing tools besides the HTML code provided? For instance, we have a Trustpilot widget at the bottom of our page that directs users to Trustpilot's web ...

javascriptjqueryhtmlcss

Unconventional border effect while hovering over image within navigation container of Bootstrap

Whenever I hover over the image inside the navigation bar, there is a strange white/gray border that appears. It's quite annoying. Does anyone know how to remove this border? Here is the code snippet causing the issue: <ul class ...

htmlcsstwitter-bootstrap

parallax scrolling can be a bit bumpy

While working on a website, I've incorporated a slight parallax effect that is functioning almost perfectly. However, I've noticed that the foreground divs tend to jump a little when scrolling down the page. At the top of the page, there is a di ...

javascriptjquerycssparallax

When HTTP 304 meets the Cache-Control directive with a value of no-cache

I'm encountering the following response from certain web server requests: First request: HTTP/1.1 200 OK Date: Mon, 16 Jan 2012 05:46:49 GMT X-Powered-By: Servlet/2.5 JSP/2.1 Content-Type: text/plain Content-Length: 78 Content-Encoding: gzip Etag: " ...

htmlhttphttp-headers

Unable to execute click events on JavaScript functions after updating innerHTML using PHP and Ajax

To begin, I want to clarify that I am intentionally avoiding the use of jQuery. While it may simplify things, it goes against the purpose of my project. Please note that 'ajaxFunction' serves as a generic example for AJAX requests using GET/POST ...

phpjavascriptajaxformsinnerhtml

Emphasize the search term "angular 2"

A messenger showcases the search results according to the input provided by the user. The objective is to emphasize the searched term while displaying the outcome. The code snippets below illustrate the HTML and component utilized for this purpose. Compon ...

javascriptangularhtmltypescript

The HR tag does not display anything following the mailing

Struggling to design a newsletter template with different lines for each product using the HR tag. However, none of my attempts with divs, tables, or CSS properties have been successful. The template looks fine in Chrome, but when sent to the provider, th ...

htmlcsstemplates

Ways to display an image within a div when hovering over a specific element?

I am working on recreating a specific effect found at in the section titled 'Capture and share anything quickly'. The effect involves displaying an image in the right block when hovering over the left text. I have successfully implemented this e ...

jqueryhtmlcss

HTML: Base64 image not displaying properly due to incorrect height specification

I have a straightforward base64 image that I am having trouble with. The issue is that only the upper half of the image is displaying. If I try to adjust the height using the "style" attribute in the img tag: style="height: 300px;" it shows correctly. Ho ...

javascripthtmlcssimagesvg

Markdown boasts of a sturdy partially-horizontal line

Is there a way to create a partially colored line in Markdown? I attempted using the following code: <hr style="border:0.3px solid green; width:40%"> </hr> However, instead of a partial green line, I am seeing a full gray line. Any idea on w ...

htmlmarkdown

Is it possible to import multiple versions of a JavaScript file using HTML and JavaScript?

After extensive research, I am starting to think that using multiple versions of the same JavaScript library on a single page is not possible (without utilizing jquery Can I use multiple versions of jQuery on the same page?, which I am not). However, I wan ...

javascripthtmljqueryimportversion

How can I extract data from a PHP page without using a form in order to perform a query on MSSQL?

Apologies if the question title is unclear, but here's what I'm trying to accomplish: I have a list within a table with multiple items. One of the cells in the list contains checkboxes, all named in an array "itemsDone[]". Outside of this form, ...

phpsql-serverajaxforms

Form-box powered by jQuery Ajax

Looking for a solution to avoid loading a new page when adding items to a list of several items. How can I bind in a window/box? Considered using the jQuery plugin "jQuery-ui-dialog," but unsure if this is the right approach. Also, facing challenges with ...

jqueryajaxformsjquery-uisymfony

Addressing three visual problems with an html form input, dropdown menu, and clickable button

Currently, the output of my code looks like this: https://i.stack.imgur.com/pl5CJ.jpg The first box (squared) represents an <input>, while the second box (rectangled) is a <select>. There are several issues that I am facing: The text entered ...

javascripthtmlcssvue.js

Combining PHP and MySQL with a join statement

I am trying to calculate the average rating for each store in a directory list using MySQL's AVG function. Whenever someone reviews a store, they assign a rating ranging from 1 to 5. This rating is then inserted into the rating column of the reviews ...

phphtmlmysqlsql