Framework
Theme
All
380
Charts
14
Charts Section
4
Cards
38
Sidebars
19
Navbars
27
Cards Section
28
Components
27
Profiles Section
8
Projects Section
10
Forms
9
Tables
24
Tables Section
11
Teams Section
8
Typography
24
Headers
30
Contacts Section
9
Testimonials
9
Faq
1
Blogs
11
Contents
10
Stats
4
Authentication
7
Features
16
Teams
5
Call To Actions
9
Logo Areas
3
Contact Us
2
Pricing
4
Bootstrap - All Components
Discover 380 Bootstrap components available in Loopple
Section Card Stats
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Total traffic</h5>
<span class="h2 font-weight-bold mb-0">350,897</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
<i class="fa fa-user"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span class="text-success mr-2">
<i class="fa fa-arrow-up"></i> 3.48% </span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
<span class="h2 font-weight-bold mb-0">2,356</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow">
<i class="fa fa-chart-pie"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span class="text-success mr-2">
<i class="fa fa-arrow-up"></i> 3.48% </span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Sales</h5>
<span class="h2 font-weight-bold mb-0">924</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
<i class="fa fa-coins"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span class="text-success mr-2">
<i class="fa fa-arrow-up"></i> 3.48% </span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
<span class="h2 font-weight-bold mb-0">49,65%</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
<i class="fa fa-chart-bar"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span class="text-success mr-2">
<i class="fa fa-arrow-up"></i> 3.48% </span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
</div>Section Card Stats Gradient
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-primary border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Tasks completed</h5>
<span class="h2 font-weight-bold mb-0 text-white">8/24</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-info border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Contacts</h5>
<span class="h2 font-weight-bold mb-0 text-white">123/267</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-danger border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Items sold</h5>
<span class="h2 font-weight-bold mb-0 text-white">200/300</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-default border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Notifications</h5>
<span class="h2 font-weight-bold mb-0 text-white">50/62</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
</div>Section Tables Dark
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-8 drop-zone">
<div class="card bg-default draggable">
<div class="card-header bg-transparent border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0 text-white">Page visits</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">See all</a>
</div>
</div>
</div>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-dark table-flush rounded">
<thead class="thead-dark">
<tr>
<th scope="col">Page name</th>
<th scope="col">Visitors</th>
<th scope="col">Unique users</th>
<th scope="col">Bounce rate</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> /argon/ </th>
<td> 4,569 </td>
<td> 340 </td>
<td>
<i class="fas fa-arrow-up text-success mr-3"></i> 46,53%
</td>
</tr>
<tr>
<th scope="row"> /argon/index.html </th>
<td> 3,985 </td>
<td> 319 </td>
<td>
<i class="fas fa-arrow-down text-warning mr-3"></i> 46,53%
</td>
</tr>
<tr>
<th scope="row"> /argon/charts.html </th>
<td> 3,513 </td>
<td> 294 </td>
<td>
<i class="fas fa-arrow-down text-warning mr-3"></i> 36,49%
</td>
</tr>
<tr>
<th scope="row"> /argon/tables.html </th>
<td> 2,050 </td>
<td> 147 </td>
<td>
<i class="fas fa-arrow-up text-success mr-3"></i> 50,87%
</td>
</tr>
<tr>
<th scope="row"> /argon/profile.html </th>
<td> 1,795 </td>
<td> 190 </td>
<td>
<i class="fas fa-arrow-down text-danger mr-3"></i> 46,53%
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xl-4 drop-zone">
<div class="card bg-default draggable">
<div class="card-header bg-transparent border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0 text-white">Social traffic</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">See all</a>
</div>
</div>
</div>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-dark table-flush rounded">
<thead class="thead-dark">
<tr>
<th scope="col">Referral</th>
<th scope="col">Visitors</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> Facebook </th>
<td> 1,480 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> Facebook </th>
<td> 5,480 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">70%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> Google </th>
<td> 4,807 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">80%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> Instagram </th>
<td> 3,678 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">75%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> twitter </th>
<td> 2,645 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">30%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Section Tables
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-8 drop-zone">
<div class="card draggable">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Page visits</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">See all</a>
</div>
</div>
</div>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Page name</th>
<th scope="col">Visitors</th>
<th scope="col">Unique users</th>
<th scope="col">Bounce rate</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> /argon/ </th>
<td> 4,569 </td>
<td> 340 </td>
<td>
<i class="fas fa-arrow-up text-success mr-3"></i> 46,53%
</td>
</tr>
<tr>
<th scope="row"> /argon/index.html </th>
<td> 3,985 </td>
<td> 319 </td>
<td>
<i class="fas fa-arrow-down text-warning mr-3"></i> 46,53%
</td>
</tr>
<tr>
<th scope="row"> /argon/charts.html </th>
<td> 3,513 </td>
<td> 294 </td>
<td>
<i class="fas fa-arrow-down text-warning mr-3"></i> 36,49%
</td>
</tr>
<tr>
<th scope="row"> /argon/tables.html </th>
<td> 2,050 </td>
<td> 147 </td>
<td>
<i class="fas fa-arrow-up text-success mr-3"></i> 50,87%
</td>
</tr>
<tr>
<th scope="row"> /argon/profile.html </th>
<td> 1,795 </td>
<td> 190 </td>
<td>
<i class="fas fa-arrow-down text-danger mr-3"></i> 46,53%
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xl-4 drop-zone">
<div class="card draggable">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Social traffic</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">See all</a>
</div>
</div>
</div>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Referral</th>
<th scope="col">Visitors</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> Facebook </th>
<td> 1,480 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> Facebook </th>
<td> 5,480 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">70%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> Google </th>
<td> 4,807 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">80%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> Instagram </th>
<td> 3,678 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">75%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> twitter </th>
<td> 2,645 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">30%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Section Teams Simple
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable" draggable="true">
<!-- Card body -->
<div class="card-body">
<div class="d-flex align-items-center">
<div>
<img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" class="avatar avata-sm rounded-circle">
</div>
<div class="ml-3">
<span class="h4 font-weight-bold mb-0">Alex Mirrial</span>
<h6 class="card-title text-uppercase text-muted mb-0">CEO</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable" draggable="true">
<!-- Card body -->
<div class="card-body">
<div class="d-flex align-items-center">
<div>
<img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" class="avatar avata-sm rounded-circle">
</div>
<div class="ml-3">
<span class="h4 font-weight-bold mb-0">Miriam Jockson</span>
<h6 class="card-title text-uppercase text-muted mb-0">CTO</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable" draggable="true">
<!-- Card body -->
<div class="card-body">
<div class="d-flex align-items-center">
<div>
<img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" class="avatar avata-sm rounded-circle">
</div>
<div class="ml-3">
<span class="h4 font-weight-bold mb-0">Alice Kambell</span>
<h6 class="card-title text-uppercase text-muted mb-0">Full-Stack Developer</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable" draggable="true">
<!-- Card body -->
<div class="card-body">
<div class="d-flex align-items-center">
<div>
<img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" class="avatar avata-sm rounded-circle">
</div>
<div class="ml-3">
<span class="h4 font-weight-bold mb-0">Johanna Sielle</span>
<h6 class="card-title text-uppercase text-muted mb-0">Front-End Developer</h6>
</div>
</div>
</div>
</div>
</div>
</div>Typography P
Modal
Component from
Argon Dashboard
Builder
<button type="button" class="btn btn-primary draggable" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Table Progress
Component from
Argon Dashboard
Builder
<div class="card draggable">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Social traffic</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">See all</a>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Referral</th>
<th scope="col">Visitors</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Facebook
</th>
<td>
1,480
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
Facebook
</th>
<td>
5,480
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">70%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
Google
</th>
<td>
4,807
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">80%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
Instagram
</th>
<td>
3,678
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">75%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
twitter
</th>
<td>
2,645
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">30%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>Card Profile
Component from
Argon Dashboard
Builder
<div class="card card-profile draggable">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/img-1-1000x600.jpg" alt="Image placeholder" class="card-img-top">
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-2">
<div class="card-profile-image">
<a href="#">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg" class="rounded-circle">
</a>
</div>
</div>
</div>
<div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
<div class="d-flex justify-content-between">
<a href="#" class="btn btn-sm btn-info mr-4 ">Connect</a>
<a href="#" class="btn btn-sm btn-default float-right">Message</a>
</div>
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col">
<div class="card-profile-stats d-flex justify-content-center">
<div>
<span class="heading">22</span>
<span class="description">Friends</span>
</div>
<div>
<span class="heading">10</span>
<span class="description">Photos</span>
</div>
<div>
<span class="heading">89</span>
<span class="description">Comments</span>
</div>
</div>
</div>
</div>
<div class="text-center">
<h5 class="h3"> Jessica Jones <span class="font-weight-light">, 27</span>
</h5>
<h5 class="font-weight-300"> Bucharest, Romania </h5>
<h5 class="h5 mt-4"> Solution Manager - Creative Tim Officer </h5>
<h5> University of Computer Science </h5>
</div>
</div>
</div>Sidebar With Logo
Component from
Argon Dashboard
Builder
<div class="sidenav-header align-items-center">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/brand/blue.png" class="navbar-brand-img" alt="...">
</a>
</div>
<div class="navbar-inner">
<div class="collapse navbar-collapse" id="sidenav-collapse-main">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:">
<i class="fa fa-desktop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-lock text-danger"></i>
<span class="nav-link-text">Login</span>
</a>
</li>
</ul>
</div>
</div>