CODEWITHSUNDEEP
csstwitter-bootstrapformsbootstrap-4
rabudde
rabudde

Reputation: 7722

Multiple horizontal nested form-rows

I'm using Bootstrap 4.0 beta 2 and try to align label and form control horizontal in one line by using form-row and col-* classes.

Now I'm trying to align two of these form-row structs in one line, see fiddle (use HD resolution when running). But I don't know why the first input in first row is not vertically aligned with input field of second row. I've struggled for some hours now and using different classes form-inline, row, and so one and tried to play with margin and padding classes, but no luck.

The DOM cannot be changed, only the classes applied. Who can help me?

Upvotes: 0

Views: 686

Answers (2)

Obsidian Age
Obsidian Age

Reputation: 42304

The problem is that your first column additionally has form-row on it, creating a row inside another row. There should never be a row inside a row; only use columns inside of rows. These rows add additional padding (15px for row, and 5px for form-row), which interferes with the percentage-based widths and offsets when you nest them.

Instead of nesting your second label + div inside of a new form-row, you need to take it out of its form-row, and place it inside of the form-row of the first label + div. After this, you'll need to adjust the col-md counts of both label+ div combinations to suit.

I've gone with 2 and 3 respectively, as that comes to a grand total of 10 ((2 + 3) + (2 + 3)), which equals the total of your second row (2 + 8).

I've created a fiddle showcasing this here, and you can also see this by maximising the snippet below:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<form>
  <fieldset>
    <div class="form-row">
      <label class="col-form-label col-md-2 col-sm-12">LABEL</label>
      <div class="col-md-3 col-sm-12">
        <input type="text" class="form-control">
      </div>
      <label class="col-form-label col-md-2 col-sm-12">LABEL</label>
      <div class="col-md-3 col-sm-12">
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="form-row mt-2">
      <label class="col-form-label col-md-2 col-sm-12">LABEL</label>
      <div class="col-md-8 col-sm-12">
        <input type="text" class="form-control">
      </div>
    </div>
  </fieldset>
</form>

Hope this helps! :)

CSS Only Solution:

Assuming you can't modify the DOM, you can always fall back to CSS:

.form-row.mt-2 {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .form-row.mt-2>div {
    padding-left: 4px;
    padding-right: 13px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<form>
  <fieldset>
    <div class="form-row">
      <div class="form-row col-md-6 col-sm-12">
        <label class="col-form-label col-md-4 col-sm-12">LABEL</label>
        <div class="col-md-4 col-sm-12">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="form-row col-md-6 col-sm-12">
        <label class="col-form-label col-md-4 col-sm-12">LABEL</label>
        <div class="col-md-4 col-sm-12">
          <input type="text" class="form-control">
        </div>
      </div>
    </div>
    <div class="form-row mt-2">
      <label class="col-form-label col-md-2 col-sm-12">LABEL</label>
      <div class="col-md-8 col-sm-12">
        <input type="text" class="form-control">
      </div>
    </div>
  </fieldset>
</form>

Though again, the DOM modification would be the more preferable solution :)

Upvotes: 1

Rahul
Rahul

Reputation: 2071

Check the snippet.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<form class="col-12">
	<div class="form-row">
		<div class="col-md-6 col-12">
       <div class="form-row">
        <label class="col-form-label col-md-4 col-12">LABEL</label>
        <div class="col-md-8 col-12">
          <input type="text" class="form-control">
        </div>
       </div>
		</div>
		<div class="col-md-6 col-12">
       <div class="form-row">
        <label class="col-form-label col-md-4 col-12">LABEL</label>
        <div class="col-md-8 col-12">
          <input type="text" class="form-control">
        </div>
       </div>
		</div>
	</div>
	<div class="form-row align-items-center mt-2">
		<label class="col-form-label col-md-2 col-12">LABEL</label>
		<div class="col-md-10 col-12">
			<input type="text" class="form-control">
		</div>
	</div>
</form>

Upvotes: 1

Related Questions