Managing forms with Bootstrap

Hey there, I'm facing an issue with form handling in Bootstrap. Any suggestions to solve it?

The problem lies with the spacing of elements, and unfortunately, I haven't been able to find a suitable solution yet. I've experimented with horizontal forms, but that ends up pushing the spans onto a new line. Currently using Gentella theme.

<body>
    <div id="wrapper">
    <div id="page-wrapper">

        <div class="container-fluid">

            <!-- Page Heading -->
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">
                        Calculator
                    </h1>
                    <!--   <ol class="breadcrumb">
                    <li>
                    <i class="fa fa-dashboard"></i>  <a href="index.html">Dashboard</a>
                    </li>
                    <li class="active">
                    <i class="fa fa-edit"></i> Forms
                    </li>
                    </ol> -->
                </div>
            </div>
            <form class="form-inline" action="/calculator.php">
                <div class="form-group">
                    <label class="control-label" for="input1_nm">Enter first value:</label>
                    </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="input1_nm" placeholder="20"> 
                </div>
                <div class="form-group">
                    <span>/nm</span>
                </div>
                <div class="form-group">
                    <select class="form-control">
                        <option>2</option>
                        <option>4</option>
                        <option>6</option>
                        <option>8</option>
                        <option>10</option>
                    </select>
                </div>  
                <div class="form-group">
                    <span>/cm</span>
                </div> 
                <div class="form-group">
                    <select class="form-control">
                        <option>Normal</option>
                        <option>Graphite</option>
                        <option>Rockwool</option>
                    </select>
                </div>
                <div class="form-group">
                    <span>Type</span>
                </div>
                </br>
                </br>
                <div class="form-group">
                    <label class="control-label" for="other_input">Other input:</label>
                    <input type="text" class="form-control" id="other_input" placeholder="20"> 
                </div>
                <div class="form-group">
                    <span>/nm</span>
                </div>
                <div class="form-group">
                    <select class="form-control">
                        <option>2</option>
                        <option>4</option>
                        <option>6</option>
                        <option>8</option>
                        <option>10</option>
                    </select>
                </div>  
                <div class="form-group">
                    <span>/cm</span>
                </div> 
                <div class="form-group">
                    <select class="form-control">
                        <option>Normal</option>
                        <option>Graphite</option>
                        <option>Rockwool</option>
                    </select>
                </div>
                <div class="form-group">
                    <span>Type</span>
                </div>
                </br>
                </br>
csshtmltwitter-bootstrap-3

Answer №1

To create a grid layout, you can utilize the row and col-xx-xx classes from Bootstrap. For more information on this, refer to the documentation here.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<br/>
<form class="form-inline" action="/kalkulator.php">
  <div class="row">
    <div class="form-group">
      <div class="col-xs-4">
        <label class="control-label" for="hoszig1_nm">Enter First Value:</label>
      </div>
      <div class="col-xs-6">
        <input type="text" class="form-control" id="hoszig1_nm" placeholder="20"> 
      </div>
      <div class="col-xs-2">
        <span>/nm</span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <div class="col-xs-offset-4 col-xs-6">
        <select class="form-control">
            <option>2</option>
            <option>4</option>
            <option>6</option>
            <option>8</option>
            <option>10</option>
        </select>
      </div>
      <div class="col-xs-2">
        <span>/cm</span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
     <div class="col-xs-offset-4 col-xs-6">
        <select class="form-control">
            <option>Regular</option>
            <option>Graphite</option>
            <option>Rockwool</option>
        </select>
      </div>
      <div class="col-xs-2">
        <span>Type</span>
      </div>
    </div>
  </div>
  <br/>
  <br/>
  <div class="row">
    <div class="form-group">
      <div class="col-xs-4">
        <label class="control-label" for="hoszig1_nm">Another Input:</label>
      </div>
      <div class="col-xs-6">
        <input type="text" class="form-control" id="hoszig1_nm" placeholder="20"> 
      </div>
      <div class="col-xs-2">
        <span>/nm</span>
      </div>
    </div>
  </div>
  
  ...
  
</form>

Answer №2

Check out this modified version of the code, where the label appears at the end of the input field:

<div class="form-group">
   <label class="control-label" for="hoszig1_nm">Input first:</label>
</div>
<div class="form-group">
   <input type="text" class="form-control" id="hoszig1_nm" placeholder="20">
   <label>/nm</label>
</div>
<div class="form-group">
   <select class="form-control">
       <option>2</option>
       <option>4</option>
       <option>6</option>
       <option>8</option>
       <option>10</option>
   </select>
   <span>/cm</span>
</div>
<div class="form-group">
   <select class="form-control">
       <option>Normál</option>
       <option>Grafit</option>
       <option>Kőzetgyapot</option>
    </select>
    <span>Típusú</span>
</div>

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

How to interrupt a JQuery animation and restart it from the middle?

Currently, I am tackling my first JQuery project and facing a challenge. As the user mouseleaves the .container, the animation does not reset but continues as if they are still within it. My goal is to have the animation revert in reverse if the user decid ...

javascriptjqueryhtmlcss

Is there a way to switch the classList between various buttons using a single JavaScript function?

I'm currently developing a straightforward add to cart container that also has the ability to toggle between different product sizes. However, I am facing difficulties in achieving this functionality without having to create separate functions for ea ...

javascriptjquerycsstoggle

"Enhance your ASP.NET site with a captivating background

I am currently working with C# in VS2005. My challenge is to add a background image to my login page, which is in the form of an .aspx file. Here is a screenshot of my current setup: Here is the code snippet for my background: <div align="center" ...

c#asp.nethtml

Is there a way to delay rendering the html until all the content has been fully downloaded?

Whenever I visit my webpage, I notice that the content starts loading without the animation applied to it. It seems like the CSS hasn't finished downloading yet. To solve this issue, I added a preloading bar overlay to signal that the content is still ...

javascripthtmlcssajax

How to automatically close a Bootstrap modal after submitting a form

I am facing an issue with a Bootstrap modal dialog that contains a form. The problem is that when I click the submit button, the form is successfully submitted but the modal dialog does not close. Here is the HTML code: <div class="modal fade" ...

javascripthtmljquerybootstrap-modal

Embracing Blackberry WebWorks for Enhanced HTML5 Support

Can someone assist me with this question? I am wondering if my Blackberry Bold 9700 (5.0.0.469) is capable of supporting HTML5 for audio streams. Thank you in advance. ...

htmlblackberryaudiostream

Using overflow-x: auto causes an unnecessary appearance of a vertical scroll bar

On my website, I have a collection of buttons displayed as a list using inline-block. Some of these buttons include div elements with additional content that is positioned absolutely below the parent li element. The list is contained within a div with over ...

htmlcss

Determining the type of a form element by identifying the select using its name attribute

<FORM NAME="form1" METHOD="POST" ACTION="survey.php"> <p>q2: Who is your closest friend?</P> <select name='q2' id='q21'> <option value='0'>Select a Name</option> < ...

javascriptjqueryhtml

Vertical Graph - Utilizing HTML and Cascading Style Sheets

My goal is to create a vertical bar chart that looks like this: However, the result I am currently getting is different: At the bottom of my vertical bar chart, both lines are connected together and I am trying to figure out how to separate them. I am a ...

htmlcssbar-chart

What causes <input> elements to vertically center when using the same technique for centering <span> elements? (The line-height of <input> does not match its parent's height)

Important: The height of <div> is set to 50px, and the line-height of <span> is also 50px When 'line-height' is not applied to the <span>, all elements align at the top of the parent. However, when 'line-height: 50px&apo ...

htmlcss

jQuery is failing to properly render dynamic content data identifiers

Need help with a dynamic HTML div <a data-id="17" onclick="getcustomer();"> <div class="note note-success"> <h4 class="block">A</h4> <p>Email : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

javascriptjqueryhtmlajax

The issue with jqBootstrapValidation is that it fails to display customized data-validation-required-message

I'm attempting to implement jqBootstrapValidation, but I keep seeing the default message instead of my custom one. Could it be that I forgot to include a <div> here? <div class="control-group"> <div class="controls"> <div c ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

Superimpose a canvas onto a div element

I'm struggling to overlay a canvas on top of a div with the same dimensions, padding, and margins. Despite using position: absolute and z-index as suggested in similar questions, the canvas keeps appearing underneath the div. Here's my current co ...

javascriptjquerycsshtml

`Troubleshooting Three.js webglrenderer.render problem`

I am currently working on a website using three.js and Nuxt.js. However, I have encountered an issue when trying to implement the EffectComposer. The console is showing numerous warnings like: three.webglrenderer.render(): the rendertarget argument has be ...

javascripthtmlthree.jsnuxt.jswebgl

Achieve a seamless integration of a navbar and list on the same line by utilizing the power of Bootstrap

No matter how much I tried, I couldn't solve the problem of my list not appearing in the same line. I attempted using display: inline-block; and padding: 0, but to no avail. /* added by editor for demonstration purpose */ body { background-color: ...

htmlcssbootstrap-5

Techniques for invoking the parent function from a child button

Imagine having a versatile component named ButtonComponent that needs to be used in different parts of the application. To ensure maximum flexibility, the component is designed as follows: button.component.ts import { Component, ViewEncapsulation, Input, ...

htmlangulartypescript

Guidelines for validating email input using jQuery

Although I am not utilizing the form tag, you can still achieve form functionality using jQuery Ajax. <input type="email" placeholder="Email" name="email" /> <input type="password" placeholder="Password ...

javascripthtmljquery

continuously refresh choices available for selection

I am looking for a way to dynamically populate the second select option based on the selection made in the first select option. While I know how to achieve this using traditional jQuery and HTML, I was wondering if there is a way to update options_for_sele ...

jqueryhtmlruby-on-rails

Leverage Angular's directives to incorporate HTML elements into your project

I am trying to integrate the HTML code from a file called protocol-modal.html into my main HTML file as a directive: <div class="modal-content"> <form class="form-horizontal" role="form" name="questionForm"> <div class="modal-heade ...

htmlangularjsangularjs-directive

Is there a way to position the button on the right side rather than the center using a negative right Y value?

I'm looking for something that: Has a button on the right side, not just beside the input. The current setup involves using an unattractive width: 138%, which doesn't consistently work across different browsers and devices. The button ends up a ...

htmlcssbootstrap-5