Basic information
Dangerous zone
- Temporarily disable account
You will be hidden from another users until you reactive your account. - Cancel account
Delete all data. Once you cancel your account, there is no going back.
Source code
<div class="row">
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
Basic information
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<span>
<i class="fa fa-fw fa-user-circle-o text-gray-600 mr-2"></i> Edit profile
</span>
<span class="text-primary ml-auto">
<i class="fa fa-fw fa-angle-right"></i>
</span>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<span>
<i class="fa fa-fw fa-lock text-gray-600 mr-2"></i> Change password
</span>
<span class="text-primary ml-auto">
<i class="fa fa-fw fa-angle-right"></i>
</span>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<span>
<i class="fa fa-fw fa-paper-plane text-gray-600 mr-2"></i> Notifications
</span>
<span class="text-primary ml-auto">
<i class="fa fa-fw fa-angle-right"></i>
</span>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<span>
<i class="fa fa-fw fa-language text-gray-600 mr-2"></i> Language
</span>
<span class="text-primary ml-auto">
<i class="fa fa-fw fa-angle-right"></i>
</span>
</div>
</a>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="nav-tabs-responsive">
<div class="card">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#account" class="nav-link active" data-toggle="tab">
Social accounts
</a>
</li>
<li class="nav-item">
<a href="#personal" class="nav-link" data-toggle="tab">
Appearance
</a>
</li>
</ul>
<div id="tabContent" class="tab-content">
<div id="account" class="tab-pane show active">
<a href="#account-collapse" class="nav-link-collapse" data-toggle="collapse">
Social accounts
</a>
<div id="account-collapse" class="collapse show" data-parent="#tabContent">
<ul class="list-group">
<li class="list-group-item">
<div class="d-flex">
<span>
<i class="fa fa-fw fa-facebook-official text-gray-600 mr-2"></i> Facebook
</span>
<label class="switch switch-to-success ml-auto">
<input type="checkbox" checked>
<span class="switch-slider"></span>
</label>
</div>
</li>
<li class="list-group-item">
<div class="d-flex">
<span>
<i class="fa fa-fw fa-twitter text-gray-600 mr-2"></i> Twitter
</span>
<label class="switch switch-to-success ml-auto">
<input type="checkbox" checked>
<span class="switch-slider"></span>
</label>
</div>
</li>
<li class="list-group-item">
<div class="d-flex">
<span>
<i class="fa fa-fw fa-instagram text-gray-600 mr-2"></i> Instagram
</span>
<label class="switch switch-to-success ml-auto">
<input type="checkbox">
<span class="switch-slider"></span>
</label>
</div>
</li>
<li class="list-group-item">
<div class="d-flex">
<span>
<i class="fa fa-fw fa-google-plus-square text-gray-600 mr-2"></i> Google
</span>
<label class="switch switch-to-success ml-auto">
<input type="checkbox">
<span class="switch-slider"></span>
</label>
</div>
</li>
</ul>
</div>
</div>
<div id="personal" class="tab-pane">
<a href="#personal-collapse" class="nav-link-collapse" data-toggle="collapse">
Appearance
</a>
<div id="personal-collapse" class="collapse" data-parent="#tabContent">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<span>
<i class="fa fa-fw fa-picture-o text-gray-600 mr-2"></i> Set wallpaper
</span>
<span class="text-primary ml-auto">
<i class="fa fa-fw fa-angle-right"></i>
</span>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex">
<span>
<i class="fa fa-fw fa-window-maximize text-gray-600 mr-2"></i> Themes
</span>
<span class="text-primary ml-auto">
<i class="fa fa-fw fa-angle-right"></i>
</span>
</div>
</a>
<div class="list-group-item">
<div class="d-flex">
<span>
Show home button
</span>
<label class="switch switch-to-success ml-auto">
<input type="checkbox">
<span class="switch-slider"></span>
</label>
</div>
</div>
<div class="list-group-item">
<div class="d-flex">
<span>
Show the search bar
</span>
<label class="switch switch-to-success ml-auto">
<input type="checkbox">
<span class="switch-slider"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
Dangerous zone
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="d-lg-flex">
<div class="mb-3 mb-lg-0">
<strong>Temporarily disable account</strong><br>
You will be hidden from another users until you reactive your account.
</div>
<div class="ml-auto">
<button type="button" class="btn btn-outline-danger">
<span class="text-nowrap">Disable my account</span>
</button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="d-lg-flex">
<div class="mb-3 mb-lg-0">
<strong>Cancel account</strong><br>
Delete all data. Once you cancel your account, there is no going back.
</div>
<div class="ml-auto">
<button type="button" class="btn btn-outline-danger">
<span class="text-nowrap">Cancel my account</span>
</button>
</div>
</div>
</li>
</ul>
</div>