How to make same size div for diff size image and title length in bootstrap-CodePudding

I am working on an angular project where I am getting the data in image and title and location. I tried to make a responsive div but unable to make them in one size.

      <div *ngFor="let company of companies" >
        <div >
          <div >
            <div >
              <input [checked]="true"   type="radio" formControlName="scope" (click)="nextFormPostion(nextFormPostionName)"  (change)="nextFormPostion(nextFormPostionName)"  id="img{{company.scope}}"  value="{{company.scope}}">
              <label  for="img{{company.scope}}">
                <div >
                  <div  style="height: 6rem ; display:table-cell; vertical-align: middle;">
                    <img  src="{{company.logo}}"   alt="Image 1">
                  </div>
                  <div  style="min-height: 3rem;font-size: 12px;text-transform: none;">
                    <span>{{company.company}}</span>
                  </div>
                  <div  style="min-height: 2.5rem;font-size: 12px;text-transform: none;">
                    <span>{{company.country}}</span>
                  </div>
                </div>

                <div >
                  <div ><i ></i></div>
                </div>
              </label>
            </div>
          </div>
        </div>
      </div>

company.logo is the image path and company.company is the name of the company. I want to make image in vertical and horizontal align center and if company name length is new line it change the size of all divs.

CodePudding user response：

You don't need bootstrap exactly to do that you can use JavaScript to get the div side you want and apply as width height.

Also you can use CSS with, for example:

width: 100%

CodePudding user response：

The first thing you need to check if you have any border, margin, padding that is affecting your code. I don't know, I don't have enough information. But I believe it could be because Bootstrap puts automatic padding on .row

For this you can put

<div >
</div>

Bootstrap 5 - No gutters

Or if it is in another element, simply add the px-0 class that removes the padding from the widths.