Bootstrap Form Layout problems

Question

I've been trying to get a basic Bootstrap form layout to work but with no success for a while now. Basically, all I want is for the avatar to be on the left and then the 4 inputs to the right side of it, grouped in 2 columns. This is what I have but there's spacing I can't get rid of: https://prnt.sc/u8xeft My code:

<div class="card-body">
<div class="form-group row">
    <div class="col-lg-2">
        <div class="image-input image-input-outline" id="kt_image_1">
            <div class="image-input-wrapper" style="background-image: url(/app/assets/img/users/<?php echo $userInfo[0]['avatar_path'];?>/avatar.jpg)"></div>
            <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                <i class="fa fa-pen icon-sm text-muted"></i>
                <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg"/>
                <input type="hidden" name="profile_avatar_remove"/>
            </label>
            <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
                <i class="ki ki-bold-close icon-xs text-muted"></i>
            </span>
        </div>
    </div>
    <div class="col-lg-5">
        <label>Nome próprio:</label>
        <input type="text" name="firstName" class="form-control" value="<?php echo $userInfo[0]["first_name"];?>" autocomplete="off" required/>
        <div class="invalid-feedback">
            Por favor insira um nome válido
        </div>
    </div>
    <div class="col-lg-5">
        <label>Apelido:</label>
        <input type="text" name="lastName" class="form-control" value="<?php echo $userInfo[0]["last_name"];?>" autocomplete="off" required/>
        <div class="invalid-feedback">
            Por favor insira um apelido válido
        </div>
    </div>
</div>
<div class="form-group row">
    <div class="col-lg-2"></div>
    <div class="col-lg-5">
        <label>Telefone:</label>
        <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text"><i class="la la-phone"></i></span></div>
            <input type="tel" name="telephone" minlength="9" maxlength="9" class="form-control" value="<?php echo $userInfo[0]["telephone"];?>" autocomplete="off" required/>
            <div class="invalid-feedback">
                Por favor insira um número de telefone válido
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <label>Email:</label>
        <div class="input-group">
        <div class="input-group-prepend"><span class="input-group-text"><i class="la la-at"></i></span></div>
            <input type="email" type="email" name="email" class="form-control" value="<?php echo $userInfo[0]["email"];?>" autocomplete="off" required/>
            <div class="invalid-feedback">
                Por favor insira um email válido
            </div>
        </div>
    </div>
</div>
<div class="card-footer">
    <div class="row">
    <div class="col-lg-3">
        <button id="btn_save" name="submit" type="submit" class="btn btn-primary mr-2" style="background: linear-gradient(45deg, rgba(3,130,138,1) 50%, rgba(176,209,51,1) 100%);color: white;border: white;" disabled><i class="far fa-save"></i> Guardar</button>
        <button type="reset" class="btn btn-secondary mr-2">Cancelar</button>
    </div>
</div>

Answer 1

Change Your HTML Like

<div class="card-body">
        <div class="form-group row">
            <div class="col-lg-2">
                <div class="image-input image-input-outline" id="kt_image_1">
                    <div class="image-input-wrapper"
                        style="background-image: url(/app/assets/img/users/<?php echo $userInfo[0]['avatar_path'];?>/avatar.jpg)">
                    </div>
                    <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                        data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                        <i class="fa fa-pen icon-sm text-muted"></i>
                        <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg" />
                        <input type="hidden" name="profile_avatar_remove" />
                    </label>
                    <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                        data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
                        <i class="ki ki-bold-close icon-xs text-muted"></i>
                    </span>
                </div>
            </div>
            <div class="col-lg-10">
                <div class="row">

                    <div class="col-lg-6">
                        <label>Nome próprio:</label>
                        <input type="text" name="firstName" class="form-control" value="" autocomplete="off" required />
                        <div class="invalid-feedback">
                            Por favor insira um nome válido
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <label>Apelido:</label>
                        <input type="text" name="lastName" class="form-control" value="" autocomplete="off" required />
                        <div class="invalid-feedback">
                            Por favor insira um apelido válido
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <label>Telefone:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i
                                        class="la la-phone"></i></span></div>
                            <input type="tel" name="telephone" minlength="9" maxlength="9" class="form-control" value=""
                                autocomplete="off" required />
                            <div class="invalid-feedback">
                                Por favor insira um número de telefone válido
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <label>Email:</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i
                                        class="la la-at"></i></span></div>
                            <input type="email" type="email" name="email" class="form-control" value=""
                                autocomplete="off" required />
                            <div class="invalid-feedback">
                                Por favor insira um email válido
                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>

        <div class="card-footer">
            <div class="row">
                <div class="col-lg-3">
                    <button id="btn_save" name="submit" type="submit" class="btn btn-primary mr-2"
                        style="background: linear-gradient(45deg, rgba(3,130,138,1) 50%, rgba(176,209,51,1) 100%);color: white;border: white;"
                        disabled><i class="far fa-save"></i> Guardar</button>
                    <button type="reset" class="btn btn-secondary mr-2">Cancelar</button>
                </div>
            </div>

https://jsfiddle.net/lalji1051/k6wrhq0y/4/

Answer 2

You have one row for image, first name, last name and another row for Email and Telephone.

You should group Email with last name and telephone with first name.

your structure could be sth like this:

-Row
 |
 |-Col Image
 |-Col
   |- Row Name Propio
   |- Row Telefone
 |-Col
   |- Row Apelido
   |- Row Email