<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://kit.fontawesome.com/ae3dfdabdf.js"></script> <div class="row"> <div class="col-lg-6 col-md-12 mb-2"> <form> <div class="card border-primary rounded-0"> <div class="card-header p-0"> <div class="bg-info text-center text-white py-2"> <h3> <i class="fa fa-envelope"></i> Contact Info </h3> <p class="m-0"> The contact information for @person.FullName </p> </div> </div> <div class="card-body p-3"> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-user text-info"></i> </div> <input type="text" placeholder="First Name" @bind="@person.FirstName" /> </div> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-user text-info"></i> </div> <input type="text" placeholder="Last Name" @bind="@person.LastName" /> </div> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-dollar-sign text-info"></i> </div> <input type="text" readonly @bind="@person.AccountBalance" /> <div class="input-group-append"> <div class="input-group-text"> @if (person.AccountBalance > 100) { <i class="far fa-smile" style="color: green"></i> } else if (person.AccountBalance > 100) { <i class="far fa-frown" style="color: orange"></i> } else { <i class="far fa-dizzy" style="color: red"></i> } </div> </div> </div> </div> </div> </div> </div> </form> </div> </div>