Let's experiment with creating a horizontal bootstrap form featuring three columns

I am struggling to create a horizontal form with three fields due to the space issue between the label and input type elements.

My goal is to minimize the space between the label and input.

Here is the HTML code snippet:

<div class="container-fluid">
        <form class="row">
           
    
            <div class="col-md-12">
                <div class="form-group row">
                    <label for="inputKey" class="col-md-2 control-label">Last Name</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="inputKey" placeholder="Key">
                    </div>
                    <label for="inputValue" class="col-md-2 control-label">First Name</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="inputValue" placeholder="Value">
                    </div>
                    <label for="inputValue" class="col-md-2 control-label">First Name</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="inputValue" placeholder="Value">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputKey" class="col-md-2 control-label">State</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="inputSt" placeholder="ST">
                    </div>
                    <div class="col-md-2">
                        <input type="text" class="form-control" id="inputZip" placeholder="Zip">
                    </div>
                    <label for="inputValue" class="col-md-2 control-label">Other</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="inputValue" placeholder="Value">
                    </div>
                </div>
            </div>
    
        </form>
    </div>
    
    </div>
htmlcss

Answer №1

To optimize space, consider removing the col-sm-2 from your label. Alternatively, you can refer to the code snippet below for a more compact layout:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container-fluid">
        <form class="row">
           
    
            <div class="col-md-12">
                <div class="form-group row">
                    
                    <div class="col-md-4">
                    <label for="inputKey" class=" control-label">Last Name</label>
                        <input type="text" class="form-control" id="inputKey" placeholder="Key">
                    </div>
                    
                    <div class="col-md-4">
                        <label for="inputValue" class="control-label">First Name</label>
                        <input type="text" class="form-control" id="inputValue" placeholder="Value">
                    </div>
                    
                    <div class="col-md-4">
                        <label for="inputValue" class="control-label">First Name</label>
                        <input type="text" class="form-control" id="inputValue" placeholder="Value">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-2">
                        <label for="inputKey" class=" control-label">State</label>
                        <input type="text" class="form-control" id="inputSt" placeholder="ST">
                    </div>
                    <div class="col-md-2">
                        <label for="inputKey" class="control-label">zip</label>
                        <input type="text" class="form-control" id="inputZip" placeholder="Zip">
                    </div>
                    <div class="col-md-4">
                        <label for="inputValue" class=" control-label">Other</label>
                        <input type="text" class="form-control" id="inputValue" placeholder="Value">
                    </div>
                </div>
            </div>
    
        </form>
    </div>
    
    </div>
    <hr>
    <h3>Consider eliminating the col-sm for labels.</h3>
    <div class="container-fluid">
        <form >
            <div class="col-md-12">
              <div class="form-group row">
                <label for="inputPassword" class="col-form-label">Last Name</label>
                <div class="col-sm-3">
                  <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
                <label for="inputPassword" class="col-form-label">Last Name</label>
                <div class="col-sm-3">
                  <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
                <label for="inputPassword" class="col-form-label">Last Name</label>
                <div class="col-sm-3">
                  <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
              </div>
            </div>
    
        </form>
    </div>
    
    </div>
View the full-page snippet.

Answer №2

If you want to align the label and input in the same column, like in my example where I used col-md-4, you can create a class called columns. Here's how you can set it up:

.columns {
    display: flex;
    flex-direction: row;
}

label {
    width: 6rem;
    margin-right: 2rem;
}
<div class="container-fluid">
      <form class="row">
          <div class="col-md-12">
              <div class="form-group row">

                  <div class="col-md-4 columns">
                    <label for="inputKey" class="control-label">Last Name</label>
                      <input type="text" class="form-control" id="inputKey" placeholder="Key">
                  </div>

                  <div class="col-md-4 columns">
                    <label for="inputValue" class="control-label">First Name</label>
                      <input type="text" class="form-control" id="inputValue" placeholder="Value">
                  </div>

                  <div class="col-md-4 columns">
                    <label for="inputValue" class="control-label">First Name</label>
                      <input type="text" class="form-control" id="inputValue" placeholder="Value">
                  </div>
              </div>
          </div>
      </form>
    </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

Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?

I'm excited to ask my first question here as a beginner. I am truly grateful for all the assistance and guidance I have received from this site. I hope that the questions I ask can also benefit others in some way :) Although imagemaps may not be used ...

csstwitter-bootstraptwitter-bootstrap-3imagemap

Utilizing Javascript to set the innerHTML as the value of a form

I have written a JavaScript code that utilizes the innerHTML function, as shown below: <script> var x = document.getElementById("gps"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showP ...

javascripthtml

Harnessing the power of lazysizes with WebP

I've been working on optimizing our site through the Google Lighthouse audit, and it's clear that images are a major focus. Right now, my main goal is to address the issue of 'Deter offscreen images' highlighted in the audit. To tackle ...

javascripthtmllazy-loadingwebplighthouse

Stylesheets may not display correctly in Firefox and IE

Just wanted to say that I recently put together this little website , but I am completely stumped on why the CSS file won't show up in Firefox or IE. I know it's a basic question, but I'm still learning all of this. Thank you so much for a ...

htmlcss

Create images from HTML pages with the help of Javascript

Hello there, UPDATE: I am looking to achieve this without relying on any third-party software. My application is a SAP product and installing additional software on every customer's system is not feasible. The situation is as follows:   ...

javascripthtmlimagesap-bsp

Is there a way to hide a specific character within a span element as securely as a password input field using

Can I use CSS to mask a span character similar to an input type password? Are there any properties like type="password" for the span or a specific class in Bootstrap such as class="mask" that can achieve this effect? https://i.stack.imgur.com/b8WQ4.png ...

htmlcssbootstrap-4

able to move through the content without displaying the scrollbar

I am looking to keep my content able to scroll, but I don't want the scrollbar to be visible. I have written my CSS like this: #content-three{ width:100%; height:100%; position:relative; overflow:hidden; } .block_s{ width:90%; ...

javascriptjqueryhtmlcss

Struggling to align Jssor slider perfectly within a Bootstrap container

Struggling to center my slider images while using bootstrap with jssor. Despite trying to zero out the margins in the code below, the images within the slider remain aligned to the left side of the container. Any suggestions on how I can properly center ...

jqueryhtmlcsstwitter-bootstrapjssor

Highlight the active page or section dynamically using HTML and jQuery - How can it be achieved?

What am I trying to achieve? I am attempting to use jQuery to dynamically highlight the current page from the navigation bar. Am I new to jQuery/HTML? Yes, please excuse my lack of experience in this area. Have I exhausted all resources looking for a sol ...

javascripthtmljquerycss

``A problem with the background image of the left panel in Framework 7

After setting a background image for the side panel and blurring it using CSS, I encountered an issue where the text and icons within the side panel also became blurred. Despite attempting to isolate the background image in a separate class, the problem ...

csshtml-framework-7

Choose a specific location on a vehicle illustration within a pop-up window. The image should be partitioned into 6 separate sections

I have a project for my client where they need to choose a car and then indicate where the damage is located on an image, which is divided into 6 sections. I'm struggling to figure out how to achieve this. I initially thought z-index would work, but ...

htmlcssangulartypescript

Looking to develop a multi-tiered menu component?

I am currently using aurelia along with ES6 to develop a multi-level menu component. The JSON data structure that I'm working with looks like this: data: [ levelId: 1, label: 'Level1', childItems: [ { levelId: 2, labe ...

javascripthtmljqueryaureliaaurelia-templating

What is the best way to conceal a row when a particular field is devoid of content?

Is it possible to hide an entire table row if a field is empty? For example: https://i.sstatic.net/tMW7L.png If a certain field is empty, I want the entire row to be hidden, either using JavaScript or jQuery. I have tried some methods but none of them fu ...

javascriptphpjqueryhtml

Why do I continue to encounter the error message saying 'jQuery is not defined'?

As a newcomer to the world of jQuery and Visual Studio Environment, I embarked on the journey of creating a circular navigation menu bar following the instructions provided in this link. Despite my efforts, I encountered a hurdle in the head section where ...

javascriptjqueryhtmlcssjquery-ui

JavaScript vs. markup: deciding between generating an extensive list of options or including them directly in

Recently, I encountered an issue with a .NET page that included a large number of identical dropdown lists within a repeater. Unfortunately, the rendering performance of the website was below expectations. In an attempt to improve the performance, I exper ...

javascripthtml

The overflow-x: scroll !important feature is not functioning properly on Samsung Internet when using translated SVGs

I'm experiencing an issue with a div container that is filled horizontally with SVG drawings generated dynamically. The width of the container exceeds the window's width, so I added overflow-x: scroll !important to enable scrolling. However, the ...

androidcsssvgoverflowsamsung-internet

"Despite using 'vertical-align: middle' on table cells, the alignment to the middle is not achieved when using AlphaImageLoader in IE6

I am currently working on aligning text within table cells that have a PNG Transparent background. To achieve this in IE6, I am using the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() method. However, I am facing an issue where the text is no ...

cssinternet-explorer-6vertical-alignment

How to position a textarea alongside a checkbox using CSS with Bootstrap

I'm having an issue aligning a text area next to a checkbox in my Bootstrap HTML. Here's the code snippet: <div class="form-group row"> <div class="col-12 form-check"> <label class="col-3 col-form-label" for="check15"& ...

htmlcsstwitter-bootstrapbootstrap-4

Using jQuery to validate the existence of a link

Within my pagination div, I have links to the previous page and next page. The link to the previous page is structured as follows: <span id="previous"><a href="www.site.com/page/1" >Previous</a>. However, on the first page, there will be ...

javascriptjqueryhtmlcss

Fade out with CSS after fading in

After setting an animation property on an HTML element to display it, I want the same animation in reverse when a button is clicked to hide it. How can I achieve this effect? "Working Animation": .modal { animation: myAnim 1s ease 0s 1 normal fo ...

htmlcss