Question 269131 in Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap div height issue

I want the height of the alert to be same as the height of the input field. I am unable to do that using bootstrap.

I tried putting col-mb-4 in the alert class but no luck with the height alignment.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="mb-3 row">
    <label for="inputCompanyName" class="col-form-label col-2">Company :</label>
    <div class="col-5">
      <input type="text" class="form-control" id="inputCompanyName" placeholder="" formControlName="companyName" />
    </div>

    <div class="col-4 alert alert-danger" role="alert" *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched">
      Company name is required!
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    chagne your padding according to your need p-2 , p-3 or px-3 py-2

    <div class="mb-3 row">
  <label for="inputCompanyName" class="col-form-label col-sm-2"
    >Company :</label
  >
  <div class="col-md-5">
    <input
      type="text"
      class="form-control"
      id="inputCompanyName"
      placeholder=""
      formControlName="companyName"
    />
  </div>
  <div
    class="col-md-4 alert alert-danger p-2"
    role="alert"
    *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched"
  >
    Company name is required!
  </div>
    Login or Signup to reply.
  2. 0

    Since rows are flex containers you can use align-items-stretch to make all child elements full height. Then you can set h-100 on the input to also make it full height. Finally, remove margin from the alert so it doesn’t affect the alert’s height. Use padding on the row if you want to retain that space. Note that I’ve also reduced vertical padding on the alert with py-1, in case that’s what you actually wanted.

    The advantage here, over padding or other fixed-size solutions, is that it’s fluid. It doesn’t matter what height the alert element attains–the input will match.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="mb-3 row align-items-stretch">
    <label for="inputCompanyName" class="col-form-label col-2">Company :</label>
    <div class="col-5">
      <input type="text" class="form-control h-100" id="inputCompanyName" placeholder="" formControlName="companyName" />
    </div>

    <div class="col-4 alert alert-danger mb-0 py-1" role="alert" *ngIf="companyNameVal.errors?.['required'] && companyNameVal.touched">
      Company name is required!
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search