1

Using bootstrap card-text and horizontal list group I was able to show information in a bootstrap card, but I want them to be editable like bootstrap 4 form. So, how I will be able to do that? I have provided the code that is showing information in a bootstrap 4 card.

  <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>
Shafiqul Islam
  • 93
  • 6

2 Answers2

0

add bootstrap model for the items editable Bootstrap models

Sarthak tiwari
  • 49
  • 1
  • 8
0
<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>

Will this work for you?

Remus Case
  • 460
  • 4
  • 12