Bootstrap Snippet Bootstrap User Profile with Random User using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="user" class="container profile" style="display: none;">
  <div class="row">
    <div class="col text-center mt-3">
      <img alt="picture" v-bind:src="user.picture" class="img-lg rounded-circle border shadow" />
      <h2 class="mt-3">{{ user.name }}</h2>
    </div>
  </div>
  <div class="row mt-2">
    <div class="col">
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="false">Address</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="links-tab" data-toggle="tab" href="#links" role="tab" aria-controls="links" aria-selected="false">Links</a>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
          <table class="table table-hover table-sm table-properties">
            <tr v-show="user.sub">
              <th>sub</th>
              <td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20rem;">{{user.sub}}</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.profile .table-properties th {
  font-weight: normal;
  width: 15rem;
}
.profile .table-properties td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile .table-properties tr:first-child td,
.profile .table-properties tr:first-child th {
  border-top: none !important;
}
.profile .img-lg {
  width: 9rem;
  height: 9rem;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
$.ajax({
  url: "https://phantauth.net/user/",
  dataType: "json",
  success: function(user) {
    new Vue({ el: "#user", data: { user: user } });
    $("#user").show();
  }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap User Profile with Random User"
Bootstrap 4.1.1 Snippet by szkiba

Related: See More

Questions / Comments:

"Bootstrap User Profile with Random User" Bootstrap 4.1.1 Snippet by szkiba

Related: See More

Questions / Comments:

"Bootstrap User Profile with Random User"
Bootstrap 4.1.1 Snippet by szkiba