<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>
<div class="card">
<header class="card-header">
<a href="" class="float-right btn btn-outline-primary mt-1">Log in</a>
<h4 class="card-title mt-2">Sign up</h4>
</header>
<article class="card-body">
<form wtx-context="C8FD46AD-6CC3-4A3B-86E0-6B2C1268CAE8">
<div class="form-row">
<div class="col form-group">
<label>First name</label>
<input class="form-control" placeholder="" wtx-context="D6C26990-D7DD-4131-8451-F41B7BB97B04" type="text">
</div>
<div class="col form-group">
<label>Last name</label>
<input class="form-control" placeholder="" wtx-context="413582BA-D017-4F85-A8B5-AE5371CFF9EC" type="text">
</div>
</div>
<div class="form-group">
<label>Email address</label>
<input class="form-control" placeholder="" wtx-context="EBCC65A2-14D5-4F4A-94B5-7BA88B8520B3" type="email">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label class="form-check form-check-inline">
<input class="form-check-input" name="gender" value="option1" wtx-context="0A63259E-F5CA-4BAD-9FD8-4F4E79F90628" wtx-rule-v3="{{myInfo.Gender}}" type="radio">
<span class="form-check-label"> Male </span>
</label>
<label class="form-check form-check-inline">
<input class="form-check-input" name="gender" value="option2" wtx-context="CA7E84E4-8570-48E5-BDC2-4148603ED2DB" wtx-rule-v3="{{myInfo.Gender}}" type="radio">
<span class="form-check-label"> Female</span>
</label>
