Tips for organizing labels and user input within an HTML document

I attempted to align inputs and labels horizontally.

Here is what I tried:

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

<div class="row">
    <div class="span2">
        <h2>Label1:</h2>
    </div>
    <div class="span2">
        <input id="Filter_1" />
    </div>
    <div class="span1">
        <h2>Label2:</h2>
    </div>
    <div class="span1">
        <input id="Filter_2" />
    </div>
    <div class="span2">
        <h2>Label3:</h2>
    </div>
    <div class="span2">
        <input id="Filter_3" />
    </div>
    <div class="span1">
        <input id="Button1" type="button" class="btn btn-large" value="Button 1" />
    </div>
</div>

However, the outcome was unsatisfactory as all elements appeared on the left side of the screen leaving the right side blank:

https://i.sstatic.net/S5wt5.png

htmlcsstwitter-bootstrap

Answer №1

If you're utilizing bootstrap, you can implement this specific layout.

Execute the code and view it in full-page mode.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-xs-6 col-md-4 col-lg-3">
      <label>Label1:</label>
      <input id="Filter_1" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <label>Label2:</label>
      <input id="Filter_2" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <label>Label3:</label>
      <input id="Filter_3" />
    </div>
    <div class="form-btn">
      <input id="Button1" type="button" class="btn btn-primary btn-large" value="Button 1" />
    </div>
  </div>
</div>

You can also refer to forms-horizontal in bootstrap for additional guidance and examples.

Answer №2

In my opinion, the specific attribute you are looking for is float. Make sure to include this code in your CSS:

.span1, .span2 {
    float: left;
    [...]
}

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

Activate Input by Clicking on Label in Internet Explorer version 8

I am trying to implement a widget in JQuery colorbox that allows users to load files. My approach involves using an input tag with type='file' and styling it with visibility:hidden. Additionally, I have created two labels that are styled like but ...

javascriptjqueryhtmlcssinternet-explorer-8

Switch the toggle to activate or deactivate links

My attempt at coding a switch to disable and enable links using CSS is functional in terms of JavaScript, but the appearance is not changing. I am lacking experience in this area. Here is my HTML Button code: <label class="switch" isValue="0"> ...

javascripthtmlcss

Limiting overflow:visible to input and select fields only

I'm currently facing an issue with a Lightning Web Component in Salesforce, however, I believe the root cause of this problem is not specific to this platform. Within my container div, I have row divs displaying select/combobox fields that need to ex ...

cssscrollbaroverflow

Tips on how to lock the ag-grid to the highlighted row's position and force it to scroll

We have integrated ag-grid into our system, and I am facing an issue with displaying the scrollbar in a child window based on the selected row position in ag-grid. Please refer to the Plunkr link below and click on source_id which will lead you to an edit ...

javascriptjquerycssangularjsag-grid

Problem encountered with a selection menu

I'm experiencing some trouble with the dropdown menu. Whenever I try to move the mouse to access the dropdown menu, it seems unresponsive. I attempted adjusting the padding on a line of code but ended up moving the entire line instead. Here is the cod ...

javascriptjquerycss

I created an image that can be clicked on, but unfortunately it only functions properly on the

I am currently working on creating an image that can be clicked to cycle through different images all within the same frame. While I have managed to get it to work, I am facing a limitation where it only responds to one click. count = 1; function myF ...

javascripthtmlcss

Tips on extracting the value from the chosen option in 2 separate rows with identical IDs

While looping through my table, each row is identified by the id="batchNo". I am trying to retrieve the selected value of each select option in every row. Although I attempted to achieve this with the provided code snippet, it only retrieves the selected ...

javascriptjqueryhtml

Removing the arrow icon preceding an image in a new line when dealing with dynamic data

My Angular project renders dynamic content that includes the following HTML structure: <div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first"> <table> <td class="steps" ...

javascriptcssangularbootstrap-4

Mastering vertical alignment in Bootstrap 4: Aligning one element to the bottom and another to the top

I'm struggling to align the elements (#header-text-bottom and anchor) to the bottom using bootstrap 4. I tried applying the vertical-align class to both elements but it doesn't seem to work. Check out my code on jsfiddle <header> ...

htmlcssbootstrap-4

The content div in CSS is causing the menu div to be displaced

I have encountered a difficulty in describing the issue at hand as I am still in the learning phase and consider myself a beginner. Within my container div, there are two other divs - one for the menu and another for the content. Both of these divs float ...

csshtmllayout

How to eliminate spacing between photos in a flexbox layout

[Unique] Find the Solution Image inside div has extra space below the image My design showcases various images of different sizes in multiple rows. See an example here. Despite my efforts, there are noticeable gaps between the rows that I can't seem ...

cssvue.jsduplicates

What is the reason behind lightbox not disabling scrolling?

While using the default lightbox2 CSS and JavaScript, everything is functioning correctly except for an issue on Safari mobile. When I click an image and the lightbox opens, swiping to the left reveals blank white space despite having overflow-x set to hid ...

javascripthtmlcsslightboxlightbox2

What is the method to create a polygon in its entirety by utilizing a for loop within Javascript?

After successfully using the Canvas of HTML to draw a convex polygon, I encountered an issue. In the provided code snippet, t2 represents an array of points with getX() and getY() methods. The drawing function performs as expected until it reaches the seg ...

javascripthtmlhtml5-canvas

Showing the content of an email's HTML Body

In developing my Python Django website, I'm looking to showcase emails on the front end. These emails have already been processed in the backend and are retrieved via AJAX in JSON format. My main concern is displaying the HTML body of these emails wi ...

pythonhtmldjangohtml-email

The hover effect does not work when clicking the mouse button in the Chrome browser

All: [UPDATE] Another method I discovered to achieve this is not a solution, but rather a workaround: Utilize the mousedown event as a trigger (since a drag action is needed, a mousedown event is required), within that, attach a mouseover event to that sp ...

cssgoogle-chromehovermouseovermousedown

Modify the td attributes while retaining the extracted data values from the website

I'm currently utilizing this code to extract data from another website: $searchURL = "http://www.anotherwebsite.com"; $html = file_get_contents($searchURL); $patternform = '/(<tbody.*<\/tbody>)/sm'; preg_match_all($patternfor ...

javascriptphphtmlregex

Modify visibility or enable state of a text box according to a checkbox in PHP

Currently, I am utilizing PHP to exhibit a vertical list of numbered checkboxes, with one checkbox for each day in a specific month. Next to every checkbox, there is a text box where users can input optional notes for the selected day. To ensure that users ...

javascriptphpjquerycsscheckbox

Step-by-step guide on applying a universal CSS class to every component within an application

I am in the process of building a multilingual react application and I am looking for a solution to dynamically apply certain CSS styles to most components based on the chosen language. I am seeking something akin to direction-rtl and direction-ltr, whic ...

cssreactjstailwind-css

Suggestions for resetting the input field IDs in a cloned div after deletion

In the given HTML code snippet, there is a <div> containing two input fields as shown below: <button type = "button" id = "add-botton" >Add Element </button> <div id = "trace-div1" class = "trace"> <h4><span>Trac ...

javascriptphpjqueryhtml

Customizing the default font color in Angular Material

I am currently navigating through theming in Angular Material and feeling a bit disoriented. I have implemented the prebuilt indigo-pink theme by importing it into my styles.scss as shown below: @import "~@angular/material/prebuilt-themes/indigo-pink.css" ...

cssangularangular-materialangular-material-theming