Arranging Bootstrap form text and input fields into a two-column layout

I'm currently exploring Bootstrap version 2.3.2 and I'm attempting to create a form layout using div elements...

Here is the code I have created so far:

<form class="form-horizontal">
    <fieldset>

        <div class="row-fluid no-space">
            <div class="span3 blockkk">
                <p class="pull-right">1111111111111:</p>
            </div>
            <div class="span3 blockk ">
                <p class="pull-left">22222222</p>

            </div>
            <div class="span3 blockkk">
                <p class="pull-right">3333:</p></div>
            <div class="span3 blockk">
                <p class="pull-left">4444444444444</p></div>
        </div>
        <div class="row-fluid no-space">
            <div class="span3 blockkk">
                <p class="pull-right">1111111111111:</p>
            </div>
            <div class="span3 blockk ">
                <p class="pull-left">22222222</p>

            </div>
            <div class="span3 blockkk">
                <p class="pull-right">3333:</p></div>
            <div class="span3 blockk">
                <p class="pull-left">4444444444444</p></div>
        </div>
        </fieldset>
</form>

The layout looks exactly as I want it to be.

Now, I am struggling to add inputs and labels inside these div elements using 'control-group', 'control-label', 'controls', and it's proving to be quite challenging. This is the attempt I made:

<form class="form-horizontal">
    <fieldset>

        <div class="row-fluid no-space">
            <div class="span6 ">
                <div class="control-group">
                    <div class="row-fluid">
                        <div class="span6 blockkk">
                             <div class="pull-right">
                                 <label class="control-label" for="textinput">Text Input</label>
                             </div>
                        </div>
                        <div class="span6 blockk">
                            <div class="pull-left">
                            <div class="controls">
                                <input id="textinput" name="textinput" placeholder="placeholder" class="input-small" type="text">
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="span6 blockk">
second row
            </div>
        </div>
    </fieldset>
</form>

Despite my efforts, the code has become lengthy and I can't seem to figure out how to align this input element to the left. Any suggestions on how to approach this issue would be greatly appreciated.

If you have any insights on solving this dilemma correctly, please share them. Thank you!

htmlcsstwitter-bootstrap

Answer №1

To implement a form layout using Bootstrap 3, you can follow the code snippet below:

<form class="form-horizontal">
    <div class="row" style="padding-bottom : 10px">
        <div class="col-lg-1 col-lg-offset-2">
            <label class="control-label pull-right">Text:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
        <div class="col-lg-1 col-lg-offset-2">
            <label class="control-label pull-right">Text:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
    </div>
    <div class="row" style="padding-bottom : 10px">
        <div class="col-lg-2 col-lg-offset-1">
            <label class="control-label pull-right">Text another one:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
        <div class="col-lg-2 col-lg-offset-1">
            <label class="control-label pull-right">Text another one:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
    </div>
    <div class="row" style="padding-bottom : 10px">
        <div class="col-lg-1 col-lg-offset-2">
            <label class="control-label pull-right">And more:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
        <div class="col-lg-1 col-lg-offset-2">
            <label class="control-label pull-right">And more:</label>
        </div>
        <div class="col-lg-2">
            <input class="form-control" type="text" />
        </div>
    </div>

</form>

Answer №2

For version 2.3.2, you can use the following code snippet by adjusting the offset as needed:

<form class="form-horizontal">
        <div class="control-group row-fluid">
            <div class="span1 offset1">
                <label class="control-label pull-right" for="text">Text:</label>
            </div>
            <div class="controls span2" style="margin-left:80px">
                <input type="text" id="text">
            </div>
            <div class="control-group">
                <div class="span1 offset2">
                    <label class="control-label" for="text2">Text:</label>
                </div>
                <div class="controls span2" style="margin-left:80px">
                    <input type="text" id="text2">
                </div>
            </div>
        </div>
        <div class="control-group row-fluid">
            <div class="span1 offset1">
                <label class="control-label pull-right" for="textAnother">Text another one:</label>
            </div>
            <div class="controls span2" style="margin-left:80px">
                <input type="text" id="textAnother">
            </div>
            <div class="control-group">
                <div class="span1 offset2">
                    <label class="control-label" for="textAnother2">Text another one:</label>
                </div>
                <div class="controls span2" style="margin-left:80px">
                    <input type="text" id="textAnother2">
                </div>
            </div>
        </div>
            <div class="control-group row-fluid">
            <div class="span1 offset1">
                <label class="control-label pull-right" for="andMore">And more:</label>
            </div>
            <div class="controls span2" style="margin-left:80px">
                <input type="text" id="andMore">
            </div>
            <div class="control-group">
                <div class="span1 offset2">
                    <label class="control-label" for="andMore2">And more:</label>
                </div>
                <div class="controls span2" style="margin-left:80px">
                    <input type="text" id="andMore2">
                </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

Challenges with arranging tables properly in React using Material UI

I am struggling to make this inner table span the full width and merge with all 8 columns. I have been unable to get the colspan attribute to work with material UI. The inner table is collapsible, which is working correctly, but the formatting of the table ...

htmlreactjsmaterial-ui

Accordion Element using HTML and CSS

Seeking assistance with a website project! I am in need of help in implementing the following feature: I would like the "About" link to expand into a panel when clicked, and retract back when the user clicks "hide" within the panel. Check out the attached ...

htmlcss

Removing spaces in the Datatables pagination buttons: A step-by-step guide

Seeking assistance in removing spaces in the pagination buttons of datatables. Can you please help me achieve this? https://i.sstatic.net/JwQQw.png I have tried following the instructions from the URLs below: DATA TABLES BOOTSTRAP 4 EXAMPLE Despite add ...

csstwitter-bootstrapdatatablesbootstrap-4

Tips for creating overlapping scroll effects on elements

I'm currently working on a project that already has a complex front end. I need to incorporate a new element as a replacement for a dropdown menu. This new element is essentially a div connected to a collection using knockout. The issue arises when t ...

javascriptjqueryhtmlcss

Is it possible to display and conceal divs/sections by clicking on navigation bar buttons without utilizing javascript or JQuery?

As I work on coding a page for an assignment, I'm faced with the challenge of implementing a navigation bar with three sections: Business Plan, About Us, and Contact Us. While trying to incorporate clickable buttons using label and radio input element ...

htmlcssnavbar

Unleash the power of drag-and-drop functionality with cdkDrop

I am currently tackling a project that requires the implementation of a drop zone functionality where elements can be dragged from a list and dropped in a zone for free movement. I intend to utilize a cdkDropList for the zone due to its comprehensive list ...

javascripthtmlangulartypescriptdrag-and-drop

Can an <option> element in WebKit be customized by adding an icon to it?

I have integrated a WebView into one of my software applications, and within the HTML page it is rendering, there is a <select> tag. I am interested in enhancing the <option> elements within this select tag by adding icons to them: (The shadow ...

htmlcssmacoswebview

Tips for customizing bootstrap cards to display on a single row with four columns

I've been working on my Angular application and I'm using a Bootstrap card to display some information. Unfortunately, I can't seem to get the design to look how I want it to, even after trying multiple approaches. The component.html code ...

cssangulartwitter-bootstrapbootstrap-4

Use .load() to set an image as background in the div

There is a block of code that is supposed to display images in a div with the class "img", but it isn't functioning correctly. Can you provide some guidance on how to fix this issue? <div class="other"><a href="/index1.html">Link1</a&g ...

javascriptjqueryhtmlimage

Phonegap Application: Page design gets distorted following keyboard input

After a user enters login details and the next page loads, the layout shifts as shown in the image below. The entire app layout breaks and the view moves down to accommodate the size of the onscreen keyboard. This issue persists unless the orientation is ...

androidcssangularjscordovaphonegap-build

Embedding a CSS file into a PHP class

I've encountered a little issue that I can't seem to solve on my own. I've put together a "webengine" using multiple classes. The primary class responsible for obtaining a theme's internals is called "Logic". This Logic class contain ...

phphtmlcss

Internet Explorer 9 is failing to acknowledge CSS styling

Encountering a strange issue with IE9 where it seems to be ignoring specific CSS rules on its own, despite other browsers like IE8, IE10, Firefox, and Chrome displaying the content correctly. The CSS is definitely being loaded with "text/css" MIME type. ...

htmlcssinternet-explorerinternet-explorer-9

Using jQuery to extract a specific dropdown control from a collection of dropdown controls within a table row

I'm facing an unusual situation. There's a table with multiple rows (each generated dynamically by clicking a button). Each row contains the following: |=======| |=======| |=======| |=======| Where |=======| represents a dropdown se ...

jqueryhtmltabular

What are effective ways to display a busy indicator during a lengthy non-AJAX task?

On the client side, I have a function that runs for 2-3 seconds without any ajax calls. My goal is to display a "Busy/Processing" animation while this function is running. Here is a simplified version of the code: var spinner = $('.spinner'); / ...

javascriptjqueryajaxhtmlclient-side

Deciphering HTML on android

I am experiencing confusion with decoding HTML text before displaying it to the user. This is the code I have tried: result= Html.fromHtml(temp).toString(); In this case, 'temp' contains something like: "B \u0026 M Collision Repair". But s ...

androidhtmldecode

What is the method for retrieving the value from the form action?

I'm encountering an issue with the structure below: <form name="confirm" method="get" accept-charset="utf-8" enctype="multipart/form-data" action="confirm_sent.php?name=<?PHP echo $name; ?>"> ...........//something happening here <inpu ...

phphtmlforms

I am encountering an issue with my register button not being able to submit in PHP+AJAX, while the

Having trouble with the registration page in PHP and AJAX. The login section works fine as I can sign in, but the registration button appears disabled or inactive, preventing form submission. I suspect an error somewhere, but unable to pinpoint it. Login ...

phphtmlajax

Sophisticated CSS layout positioning

I've been struggling to achieve a specific positioning using CSS: However, after numerous attempts over several days, the best result I could obtain looks like this: Could you lend me a hand in achieving the desired positioning, considering these fa ...

csshtmlcss-position

Looking to Move the Image Up?

I've been experimenting with creating a grid layout where the bottom image will move up until it is 10px away from the image directly above it. However, no matter what I attempt, the spacing seems to be based on the tallest image rather than the one a ...

javascripthtmlcsswebstorm

What is the best way to display matching columns in a table on a single row?

I am looking to display information from my database in a table format. Specifically, I want to only show the Math subject and list the units from UI to the last unit available in the database. Below each unit, I would like to display the corresponding hom ...

phphtmlmysqlsqldatabase