Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

https://i.sstatic.net/oqRwR.jpg

In the image above, I need to adjust the position of the textbox to align it with the TextArea. Is there a Bootstrap class that can help me achieve this? My current version of Bootstrap is 3.3.6.

HTML 

                <div class="panel-body">
                    <div class="col-md-12 col-sm-12">
                        <div class="row top-buffer">
                            <div class="col-md-2">
                                Quote Date:
                            </div>
                            <div class="col-md-2">
                                <asp:TextBox ID="txtReference" class="form-control" runat="server" ></asp:TextBox>
                            </div>
                            <div class="col-md-2">
                                Quote Prepared By:
                            </div>
                            <div class="col-md-2">
                                <asp:TextBox ID="txtCountry" class="form-control" runat="server"></asp:TextBox>
                            </div>
                        </div>

                         <div class="row top-buffer">
                            <div class="col-md-2">
                                Reseller:
                            </div>
                            <div class="col-md-2">
                                <asp:TextBox ID="TextBox1" class="form-control" runat="server" ></asp:TextBox>
                            </div>
                          <div class="col-md-2">
                                Notes:
                            </div>
                            <div class="col-md-2">
                                <asp:TextBox ID="TextBox2" class="form-control" runat="server" TextMode="MultiLine" Height="252px" Width="414px"></asp:TextBox>
                            </div>


                        </div>

                        <div class="row top-buffer">
                            <div class="col-md-2">
                                Reseller Contact:
                            </div>
                            <div class="col-md-2">
                                <asp:TextBox ID="TextBox3" class="form-control" runat="server" ></asp:TextBox>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Experience the magic of a sleek and adaptable layout customized just for you. Your objective is to create two user-friendly col-md-6 columns that efficiently split your content:

Witness the transformation by resizing your browser: https://jsfiddle.net/L4LtoLsz/ 

<div class="panel-body">
<form class="form-horizontal">

    <div class="col-md-6">
        <div class="row top-buffer">

            <div class="form-group">
                <label for="inputEmail1" class="col-sm-3 control-label">Quote Date:</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="inputEmail1" placeholder="Quote Date">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail2" class="col-sm-3 control-label">Reseller</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="inputEmail2" placeholder="Reseller">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-3 control-label">Reseller Contact:</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Reseller Contact">
                </div>
            </div>
          </div>
       </div>


    <div class="col-md-6">
        <div class="row top-buffer">

            <div class="form-group">
                <label for="inputEmail5" class="col-sm-3 control-label">Quote Prepared By:</label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" id="inputEmail5" placeholder="Quote Prepared By">
                </div>
            </div>

            <div class="form-group">
                <label for="tarea" class="col-sm-3 control-label">Notes:</label>
                <div class="col-sm-9">
                    <textarea id="tarea" class="form-control"></textarea>
                </div>
            </div>

        </div>
    </div>

    </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

What is the best way to reference a component from another component in a React application?

I've been utilizing the react-notification-system library in my project, and here's a snippet of how I've incorporated it into my code. import React from 'react'; import Notification from 'react-notification-system'; cl ...

javascriptreactjs

Do back-end routes get activated when the route path in the URL matches, or when a fetch request is initiated from the front-end?

Exploring the contrast between utilizing a fetch API versus directly visiting the URL corresponding to the route path. Consider a backend route structured as follows: let ALL_RESTAURANTS = [ { id: "0b65fe74-03a9-4b37-ab09-1c8d23189273", name: ...

javascriptnode.jsexpressfetch-api

Is it better to have a heading titled "Navigation" above a <nav> element, or should it be included inside the navigation element itself?

Which is the better way to structure navigation: <h1>Navigation</h1> <nav> <ul> <li>...</li> </ul> </nav> Or: <nav> <h1>Navigation</h1> <ul> <li>...</li> ...

htmlaccessibilitysemantic-markup

Update data in the datatables using values from an array list

Currently, I have two HTML files where I am loading data using JSON and then applying jQuery datatables to them. Now, I need to refresh the data with new parameters. For example: JSON: [ {"name":"jon","sales":"100","set":"SET1"}, {"name":"charlie","sale ...

javascriptjquerydatatables

Using Jquery Ajax in Conjunction with Spring MVC

I recently encountered an issue while trying to make an ajax query from a Spring MVC JSP page. The request was successfully made and I could see the JSON response on the browser. $.get("${pageContext.request.contextPath}/xxx.htm", {x: y}, function(result) ...

jqueryjsonajaxspring-mvc

Issue with Foundation6 popup form: Unwanted loss of focus on field when revealed (possibly due to jQuery

While developing a popup form using Foundation6 reveal, I encountered a JavaScript issue that seems to be related to event binding or handling in jQuery.js / Foundation.js. https://i.stack.imgur.com/MIWUS.png When I click on any field within the reveal w ...

jqueryformszurb-foundation-6lostfocuszurb-reveal

Utilizing the MEAN stack to establish a connection with a simulated data collection

Currently, I am diving into the world of M.E.A.N stack development. As part of my learning process, I have successfully set up a test page where Angular.js beautifully displays and re-orders data based on search criteria. To challenge myself further, I dec ...

javascriptangularjsnode.jsexpress

What is the best way to loop through a list of questions and save the answers in an array of user input?

I'm encountering a challenge with iterating through an array of questions to correctly display them on the document. The initial code snippet provided below demonstrates what I aim to accomplish without using prompts. Currently, I have set up an arr ...

javascriptjqueryarraysformsfor-loop

jQuery Plugin - iDisplayLength Feature

I am currently using DataTables version 1.10.10 and I am looking to customize the main plugin Javascript in order to change the iDisplayLength value to -1. This adjustment will result in displaying "All" by default on all data tables, allowing users to fil ...

javascriptjquerydatatables

What is the best way to incorporate a mute/unmute button into this automatically playing audio?

Seeking assistance in adding a mute button for the background sound on my website. Can anyone provide guidance on how to achieve this? Below is the HTML code responsible for playing the sound: <audio id="sound" autoplay="autoplay" ...

javascripthtmlgoogle-chrome-extension

The find function is malfunctioning in React

My goal is to have my code send specific username strings to the Profile page using the username props retrieved through the find() method and store the result in a function named user. However, I'm facing an issue where the find method doesn't c ...

javascriptreactjs

Enhance an item by introducing additional properties derived from its current key-value pairs

I have a task of converting the following object: myObj = { "pageName": "home", "dataExtract": "data1|data2=value2|data3=value3|data4=value4a,value4b,value4c"} Into this format: myObjMod = { 'pageName': 'home', 'dataExtract&apos ...

javascriptjqueryarrays

CSS First Element

"When an element with a specific id has a first-child descendant that is any of the heading tags (h1, h2, h3, h4, h5, or h6), apply the following CSS styles:" I have come up with the following selector: #content:first-child h1, #content:first-child h2, ...

csscss-selectors

Click to enlarge font size across the entire project

I'm working on a project for elderly users and my client wants a feature where they can easily adjust the font size throughout the application with just one click of a button. What is the best approach for implementing this functionality? My initial ...

jquerycss

Full-width Dropdown Menu within a Container with a Maximum Width

Is it possible to make a dropdown menu within a navigation bar open to the full width of the page, even when the parent container has a maximum width of 500px? My attempt to use 100vw resulted in misaligned dropdown elements, and I cannot move the navbar ...

csstwitter-bootstrapbootstrap-4navbar

What is preventing me from accessing React state within Tracker.Autorun?

I'm feeling lost on this one. I have implemented a Tracker.autorun function to monitor when my Mongo subscription is ready for querying (following the advice given in this previous Meteor subscribe callback). It seems to be working fine as it triggers ...

javascriptmongodbreactjsmeteor

Differentiating between ng-show and ng-if in AngularJS

ng-if and ng-show appear to function in a similar manner. <img src="spinner.gif" ng-if="showSpinner"> <img src="spinner.gif" ng-show="showSpinner"> Are there any distinctions between the two? Is there an impact on performance? How can one d ...

javascriptangularjs

What is the best way to change the folder name when hovering over it?

Typically, my website displays categories with images from the /thumb-min/ directory. For example, 95-IMG_6509.JPG is loaded like this: /thumb-min/95-IMG_6509.JPG When I navigate to the details page, it loads the image from: /thumb-medium/95-IMG_6509.JP ...

javascriptphpjqueryhtmlcss

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

htmlcssflexbox

Ways to eliminate the top space in the background image

After implementing a basic HTML code to add a background image to my webpage, I noticed there is still some empty space at the top of the page. I attempted to adjust the position of the background image using the following code, but it only lifted it upwar ...

javascripthtmlcss