<div class="container d-flex justify-content-center mt-50 mb-50">
<div class="card w-50">
<div class="card-header bg-transparent text-center p-3"> <span class="card-title mt-3 font-weight-normal text-uppercase text-center h6">BBBootstrap.com</span> </div>
<div class="card-body"> <a href="#" class="btn bg-teal btn-block" data-abc="true">Ask question/Problem <i class="fa fa-comment ml-2"></i></a> </div>
<div class="nav nav-sidebar mb-2">
<li class="nav-item"> <a href="#" class="nav-link border-0" data-abc="true"><i class="fa fa-soccer-ball-o"></i> Help center</a> </li>
<li class="nav-item"> <a href="#" class="nav-link" data-abc="true"><i class="fa fa-book"></i> Knowledgebase</a> </li>
<li class="nav-item"> <a href="#" class="nav-link" data-abc="true"> <span> <i class="fa fa-user-secret"></i> Articles </span> <span class="badge badge-danger badge-pill align-self-center ml-auto">402</span> </a> </li>
<li class="nav-item"> <a href="#" class="nav-link" data-abc="true"><i class="fa fa-pencil"></i> Tutorials</a> </li>
<li class="nav-item"> <a href="#" class="nav-link" data-abc="true"> <span> <i class="fa fa-video-camera"></i> Video tutorials </span> <span class="badge badge-primary badge-pill align-self-center ml-auto">90</span> </a> </li>
<li class="nav-item-divider"></li>
<li class="nav-item"> <a href="#" class="nav-link" data-abc="true"><i class="fa fa-comment"></i> Ask our community</a> </li>
<li class="nav-item"> <a href="#" class="nav-link" data-abc="true"><i class="fa fa-volume-control-phone"></i> Contact us</a> </li>
</div>
</div>
</div>
body {
margin: 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: .8125rem;
font-weight: 400;
line-height: 1.5385;
color: #333;
text-align: left;
background-color: #eee
}
.mt-50 {
margin-top: 50px
}
.mb-50 {
margin-bottom: 50px
}
a {
text-decoration: none !important
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .1875rem
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem
}
.nav-sidebar .nav-link {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
padding: .75rem 1.25rem;
transition: background-color ease-in-out .15s, color ease-in-out .15s
}
.header-elements-inline {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
.nav-sidebar {
-ms-flex-direction: column;
flex-direction: column
}
.bg-teal {
background-color: #007bff;
color: #fff;
border-radius: 1px
}
.bg-teal:hover {
color: #fff;
background-color: #007bffb5
}
.sidebar-light .nav-sidebar .nav-link {
color: rgba(51, 51, 51, .85)
}
.badge {
display: inline-block;
padding: .3125rem .375rem;
font-size: 75%;
font-weight: 500;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .125rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
.nav-sidebar .nav-link i {
margin-right: 1.25rem;
margin-top: .12502rem;
margin-bottom: .12502rem;
top: 0
}
.nav-link {
color: rgba(51, 51, 51, .85)
}
.nav-link:not(.disabled):hover {
color: #333;
background-color: #f5f5f5
}
[class^=fa] {
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
min-width: 1em;
display: inline-block;
text-align: center;
font-size: 1rem;
vertical-align: middle;
position: relative;
top: -1px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.nav-sidebar .nav-link {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
padding: .75rem 1.25rem;
transition: background-color ease-in-out .15s, color ease-in-out .15s
}
.nav-sidebar .nav-item:not(.nav-item-header):first-child {
padding-top: .5rem
}
.nav-link {
display: block;
padding: .75rem 1.25rem
}