Tips for positioning labels alongside input fields using Bootstrap

I'm struggling to properly align this form

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

My goal is to achieve a layout similar to this https://i.sstatic.net/lYxqi.png

The labels always end up in a different position than the input fields... how can I fix this?

This is the code I am currently using:

<div class="form-group col-xs-3 col-md-4" >
        <label class="control-label col-md-4" >Rif: </label>
        <div class="col-md-8">
         <input type="text" name="rif" id="rif" class="form-control" />
        </div>
       </div>

       [Additional divs and inputs...]

Is there a way to align these elements correctly without compromising the format? Any assistance would be appreciated.

htmlcsstwitter-bootstrapbootstrap-4bootstrap-modal

Answer №1

Below is a structure similar to what you're searching for:

<form>
  <div class="form-row justify-content-between">
    <div class="form-group row col-md-4">
      <label class="col-sm-4 col-form-label">Identification: </label>
      <div class="col-sm-8">
        <input type="text" name="id" id="id" class="form-control" />
      </div>
    </div>

    <div class="form-group row col-md-8">
      <label class="col-sm-2 col-form-label">Company: </label>
      <div class="col-sm-10">
        <input type="text" name="company_name" id="company_name" class="form-control" />
      </div>
    </div>
  </div>

  <div class="form-row justify-content-between">
    <div class="form-group row col-md-4">
      <label class="col-sm-4 col-form-label">Parent Company ID: </label>
      <div class="col-sm-8">
        <select name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">
          <option value="1" name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">ID 1</option>
          <option value="2" name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">ID 2</option>
          <option value="3" name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">ID 3</option>
          <option value="4" name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">ID 4</option>
          <option value="5" name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">ID 5</option>
        </select>
      </div>
    </div>

    <div class="form-group row col-md-8">
      <label class="col-sm-2 col-form-label">Parent Company Name: </label>
      <div class="col-sm-10">
        <select name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">
          <option value="1" name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">Name 1</option>
          <option value="2" name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">Name 2</option>
          <option value="3" name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">Name 3</option>
          <option value="4" name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">Name 4</option>
          <option value="5" name="fk_parent_company_id" id="fk_parent_company_id" class="form-control">Name 5</option>
        </select>
      </div>
    </div>
  </div>

  <div class="form-row justify-content-between">
    <div class="form-group row col-md-4">
      <label class="col-sm-4 col-form-label">PIN: </label>
      <div class="col-sm-8">
        <select name="fk_pin_id" id="fk_pin_id" class="form-control">
          <option value="1" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 1</option>
          <option value="2" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 2</option>
          <option value="3" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 3</option>
          <option value="4" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 4</option>
          <option value="5" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 5</option>
        </select>
      </div>
    </div>

    <div class="form-group row col-md-4">
      <label class="col-sm-4 col-form-label">Portfolio: </label>
      <div class="col-sm-8">
        <select name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">
          <option value="1" name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">Portfolio 1</option>
          <option value="2" name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">Portfolio 2</option>
          <option value="3" name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">Portfolio 3</option>
          <option value="4" name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">Portfolio 4</option>
          <option value="5" name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">Portfolio 5</option>
        </select>
      </div>
    </div>

    <div class="form-group row col-md-4">
      <label class="col-sm-4 col-form-label">Portfolio: </label>
      <div class="col-sm-8">
        <select name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">
          <option value="1" name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">Portfolio 1</option>
          <option value="2" name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">Portfolio 2</option>
          <option value="3" name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">Portfolio 3</option>
          <option value="4" name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">Portfolio 4</option>
          <option value="5" name="fk_portfolio_id" id="fk_portfolio_id" class="form-control">Portfolio 5</option>
        </select>
      </div>
    </div>
  </div>
</form>

Answer №2

To enhance the layout, include a class="row" within each div of form-group.

  <div class="row col-12">
        <div class="form-group row col-xs-3 col-md-4 row " >
            <label class="control-label col-md-4" >Rif: </label>
            <div class="col-md-8">
             <input type="text" name="rif" id="rif" class="form-control" />
            </div>
           </div>

           <div class="form-group row col-xs-3 col-md-4">
            <label class="control-label col-md-4">Empresa: </label>
            <div class="col-md-8">
             <input type="text" name="razon_social" id="razon_social" class="form-control" />
            </div>
           </div>
    </div>

   <div class="row col-12">
    <div class="form-group row col-xs-3 col-md-4">
        <label class="control-label col-md-4">Rif.Holding: </label>
        <div class="col-md-8">
        <select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
        <option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 1</option>
        <option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 2</option>
        <option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 3</option>
        <option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 4</option>
        <option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">Rif 5</option>
        </select>
        </div>
       </div>

        <div class="form-group row col-xs-3 col-md-4">
        <label class="control-label col-md-4">Nom.Holding:</label>
        <div class="col-md-8">
        <select name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">
        <option value="1" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 1</option>
        <option value="2" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 2</option>
        <option value="3" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 3</option>
        <option value="4" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 4</option>
        <option value="5" name="fk_empresaholding_id" id="fk_empresaholding_id" class="form-control">NomHolding 5</option>
        </select>
        </div>
       </div>
   </div>

   <div class="row">

   <div class="form-group row col-xs-3 col-md-4">
    <label class="control-label col-md-4">PIN: </label>
    <div class="col-md-8">
    <select name="fk_pin_id" id="fk_pin_id" class="form-control">
    <option value="1" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 1</option>
    <option value="2" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 2</option>
    <option value="3" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 3</option>
    <option value="4" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 4</option>
    <option value="5" name="fk_pin_id" id="fk_pin_id" class="form-control">Pin 5</option>
    </select>
    </div>
   </div>

   <div class="form-group row col-xs-3 col-md-4">
    <label class="control-label col-md-4">Cartera: </label>
    <div class="col-md-8">
    <select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
    <option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
    <option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
    <option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
    <option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
    <option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
    </select>
    </div>
   </div>

   <div class="form-group row col-xs-3 col-md-4">
    <label class="control-label col-md-4">Cartera: </label>
    <div class="col-md-8">
    <select name="fk_cartera_id" id="fk_cartera_id" class="form-control">
    <option value="1" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 1</option>
    <option value="2" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 2</option>
    <option value="3" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 3</option>
    <option value="4" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 4</option>
    <option value="5" name="fk_cartera_id" id="fk_cartera_id" class="form-control">Cartera 5</option>
    </select>
    </div>
   </div>
   </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

What is the best way to increase the top padding of an anchor link?

I need to create a padding-top effect for my div when the link to the anchor is clicked: <a href="#myAnchor">Proceed to my anchor</a> ... <div id="myAnchor"> ... </div> The challenge lies in wanting to add the padding only when ...

htmlcss

What is the process for linking my CSS file in Yii2 framework?

Currently, I am in the process of linking my CSS file to my project. To achieve this, here is what I have done: Within the /web/css/ directory, I created a file named my-custom.css. Following that, in the /views/my_folder/_form.php file, I inserted the fo ...

phpcssyii2assets

What techniques does Twitter use to insert labels into text boxes?

When I visited the Twitter login page, I noticed something interesting - the labels for input fields were inside the input fields themselves. It seemed to be accomplished using a common trick involving javascript/jquery. Intrigued, I delved into the Twitte ...

javascriptjqueryhtmlcss

Is there a way to extract the information within the <aside> element using BeautifulSoup?

I am a beginner and I am currently working on extracting information from a website. However, I am facing some difficulties in extracting text from the <aside tag as I keep getting blank output. Can someone please help me with this issue? <aside clas ...

pythonhtmlbeautifulsoup

Is there a method to play videos automatically without turning off the sound? How exactly does YouTube manage to achieve this feature?

Is there a way to automatically play a video with sound, without the muted attribute? I noticed that when clicking on a YouTube video link, it plays automatically. Looking forward to hearing your thoughts on this! If I can open a YouTube link and have the ...

htmlvideoautoplay

Guide to making child blocks the same height as their parent block

I'm currently working on a website layout and trying to set the height of the child blocks to 100% so that they stretch to the full height regardless of monitor size. I've tried using 100vh, but it's not working as expected. My goal is to a ...

javascripthtmlcssheight

Tips for managing the transparency level of a container's backdrop using CSS?

Is there a way to adjust the transparency of an image, change the background color of a container, button, or form using CSS? Which specific property would be appropriate for this task? ...

htmlcss

The canvas element on a simple HTML webpage is constantly set to a size of 300x150

In an attempt to simplify my problem, I have created a basic HTML document with a <canvas> element: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { border: 1px solid #ff5500; ...

javascripthtmlcsscanvas

Make the HTML element expand to the remaining height of the viewport

Need help with creating a section that automatically fills the remaining viewport height below the navigation bar. The section includes a centered div and background image, along with a button at the bottom for scrolling down by one full viewport height. H ...

cssviewport

Email design is compromised at unconventional screen sizes

My responsive HTML email is experiencing a strange issue where it breaks between a 20px resolution difference before reaching the media query. Specifically, between 600px and 620px, I am puzzled as to why this is happening. Everything has been thoroughly c ...

htmlcssresponsive-designhtml-email

Achieving a full-height div using CSS and HTML to fill the remaining space

Here is the current layout structure I am working with: div { border: 1px solid } <div id="col_1" style="float:left;width:150px;">1</div> <div id="col_2" style="float:left;width:100px;">2</div> <div id="col_3" style="float:l ...

javascriptjqueryhtmlcss

Modifying Margin and Spacing for Selections in Radio Buttons

I have successfully implemented the code for a radio button, and everything is working as expected div > label { margin-right: 80px !important; box-shadow: .3rem .3rem .6rem #c8d0e7, -.2rem -.2rem .5rem #FFFFFF; position: relative; ...

htmlcss

What steps should I take to troubleshoot the JavaScript dropdown list on my webpage

I'm having some trouble with my dropdown list code. My goal is to be able to select an option from the list and have it display an image with some text, but I seem to be missing something. Here's what I have so far: <form action=""&g ...

javascripthtmlcss

Showcasing Items Within JSON Object in Angular

I am dealing with a JSON database that contains nested Objects: { "characters2": [ { "campaign":"Menagerie Coast", "index": 1, "name": "Mark Whithershmitz", "portrait": "assets/pics/markW.jpg", "affiliation": "Kryn Dynast ...

htmljsonangularobservable

What are the various methods for differentiating between a left and right mouse click, and how do you determine which one to

Feeling a bit puzzled here. Currently, I'm tackling an HTML5 game project and need to implement a specific menu feature where the user can input value to an image with left click and remove it with right click instead of the menu popping up. In my res ...

javascripthtml

Expanding the browser window causes the responsive slider image to be covered by the menu

Having trouble figuring out why the image in this wide slider is getting slightly overlapped by the menu above it when the browser window is fully expanded. The image displays perfectly on mobile and tablet, but the issue occurs specifically on desktop. H ...

javascripthtmlcsswordpress

What is the best way to center the content vertically within flex items?

I am working with a flexbox header that has two child flex items, each with their own children. Is there a way to change the vertical alignment of the flex items so that their children are aligned at the bottom? div.flexbox { display: flex; align ...

htmlcssflexbox

Upgrading a bootstrap 3 class to bootstrap 4

Can someone help me update the classes col-sm-push-9 and col-sm-pull-3 from bootstrap-3 to bootstrap-4 in the HTML code below? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <titl ...

htmlbootstrap-4

Discrepancies in Span Element Behavior Between Firefox and Chrome

Seeking assistance with a tooltip feature that reveals extra information when a user hovers over a span. The issue arises when the span is split across two lines, causing the extra information to appear in different positions on Firefox and Chrome browsers ...

css

Rails is being overwhelmed by an excessive number of icons being added by Bootstrap

I'm having an issue with adding a user icon to my header. When using Bootstrap, it seems to be adding more icons than I have specified in my code. Can anyone help me figure out what's going on? Thanks in advance! <ul class="nav pull-right"> ...

ruby-on-rails-3csstwitter-bootstraptwitter-bootstrap-rails