как сделать редактируемые элементы группы текста и горизонтального списка в карточке bootstrap?

Question

Используя bootstrap текст карточки и группу горизонтального списка, я смог показать информацию в карточке bootstrap, но я хочу, чтобы они были редактируемыми, как форма bootstrap 4. Итак, как я смогу это сделать? Я предоставил код, отображающий информацию на карточке bootstrap 4.

  <div class="personal">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Personal</h5>
        <p class="card-text">Your Personal Inforation</p>
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item">Mobile Phone</li>
          <li class="list-group-item">{{employee.phone_number}}</li>
        </ul>
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item">Birth Date</li>
          <li class="list-group-item">{{employee.birth_date}}</li>
        </ul>
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item">Age</li>
          <li class="list-group-item">age</li>
        </ul>
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item">Address</li>
          <li class="list-group-item">{{employee.address}}</li>
        </ul>
        <ul class="list-group list-group-horizontal">
          <li class="list-group-item">Gender</li>
          <li class="list-group-item">{{employee.gender}}</li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

<div class="container">
    <div class="row personal">
        <div class="col-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Personal</h5>
                    <h6 class="card-text">Your Personal Information</h6>
                </div>
                <div class="card-body">
                    <div class="col-12 col-md-9">
                        <form>
                            <div class="form-group row">
                                <label for="phone" class="col-md-2 col-form-label">Mobile Phone</label>
                                <div class="col-md-10">
                                    <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="birthdate" class="col-md-2 col-form-label">Birth Date</label>
                                <div class="col-md-10">
                                    <input type="date" class="form-control" id="birthdate" name="birthdate">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="age" class="col-md-2 col-form-label">Age</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" id="age" name="age" placeholder="Your age">
                                </div>
                            </div>

                            <div class="form-group row align-items-center">
                                <label for="gender1" class="col-md-2 col-form-label">Gender</label>
                                <div class="col-md-10">
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="gender1" name="gender" class="custom-control-input">
                                        <label class="custom-control-label" for="gender1">Male</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="gender2" name="gender" class="custom-control-input">
                                        <label class="custom-control-label" for="gender2">Female</label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="address" class="col-md-2 col-form-label">Address</label>
                                <div class="col-md-10">
                                    <textarea class="form-control" id="address" name="address" rows="4"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>

Подойдет ли вам это?

Answer 2

добавить bootstrap модель для редактируемых элементов Bootstrap модели