Framework
Theme
All
683
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
Forms - All Examples
Discover 16 Forms examples available in Loopple
Profile Form
Component from
Asteria Dashboard
Builder
<div class="card mb-4 draggable">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h6 class="mb-0">Edit profile </h6>
</div>
<div class="col-4 text-end">
<a href="#!" class="btn btn-sm btn-primary mb-0">Settings</a>
</div>
</div>
</div>
<div class="card-body">
<form>
<h6 class="heading-small text-muted mb-4">User information</h6>
<div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-username">Username</label>
<input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-email">Email address</label>
<input type="email" id="input-email" class="form-control" placeholder="[email protected]">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-first-name">First name</label>
<input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-last-name">Last name</label>
<input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-4">
<!-- Address -->
<h6 class="heading-small text-muted mb-4">Contact information</h6>
<div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="input-address">Address</label>
<input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-city">City</label>
<input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Country</label>
<input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Postal code</label>
<input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-4">
<!-- Description -->
<h6 class="heading-small text-muted mb-4">About me</h6>
<div">
<div class="form-group">
<label class="form-control-label">About Me</label>
<textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 5.</textarea>
</div>
</div"></form></div>
</div>Profile Form
Component from
Argon Dashboard
Builder
<div class="card draggable">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">Edit profile </h3>
</div>
<div class="col-4 text-right">
<a href="#!" class="btn btn-sm btn-primary">Settings</a>
</div>
</div>
</div>
<div class="card-body">
<form>
<h6 class="heading-small text-muted mb-4">User information</h6>
<div class="pl-lg-4">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-username">Username</label>
<input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-email">Email address</label>
<input type="email" id="input-email" class="form-control" placeholder="[email protected]">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-first-name">First name</label>
<input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-last-name">Last name</label>
<input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- Address -->
<h6 class="heading-small text-muted mb-4">Contact information</h6>
<div class="pl-lg-4">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="input-address">Address</label>
<input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-city">City</label>
<input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Country</label>
<input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Postal code</label>
<input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- Description -->
<h6 class="heading-small text-muted mb-4">About me</h6>
<div class="pl-lg-4">
<div class="form-group">
<label class="form-control-label">About Me</label>
<textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 4. It is Free and Open Source.</textarea>
</div>
</div>
</form>
</div>
</div>Nav Tabs
Component from
Adminkit
Builder
<ul class="nav nav-tabs draggable" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>True reasoning is only possible when there is no motivation.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Be patient, it takes 10 years to build a career in anything.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p> The goal of media is to make every problem, your problem.</p>
</div>
</div>Profile Form
Component from
Soft UI Dashboard
Builder
<div class="card draggable">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h6 class="mb-0">Edit profile </h6>
</div>
<div class="col-4 text-end">
<a href="#!" class="btn btn-sm bg-gradient-primary mb-0">Settings</a>
</div>
</div>
</div>
<div class="card-body">
<form>
<h6 class="heading-small text-muted mb-4">User information</h6>
<div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-username">Username</label>
<input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-email">Email address</label>
<input type="email" id="input-email" class="form-control" placeholder="[email protected]">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-first-name">First name</label>
<input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-last-name">Last name</label>
<input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-4">
<!-- Address -->
<h6 class="heading-small text-muted mb-4">Contact information</h6>
<div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="input-address">Address</label>
<input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-city">City</label>
<input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Country</label>
<input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Postal code</label>
<input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-4">
<!-- Description -->
<h6 class="heading-small text-muted mb-4">About me</h6>
<div">
<div class="form-group">
<label class="form-control-label">About Me</label>
<textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 5.</textarea>
</div>
</div>
</form>
</div>
</div>Nav Pills
Component from
Adminkit
Builder
<ul class="nav nav-pills mb-3 draggable" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<p>This is the last time a fiat currency bubble pops, because it’s the first time we have a viable alternative.</p>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<p>Live long enough, and you’ll become a philosopher.</p>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<p>It’s the nature of truth that once you see it, you can’t unsee it.</p>
</div>
</div>Form Profile Settings
Component from
Soft UI Dashboard Tailwind
Builder
<div class="relative flex flex-col h-full min-w-0 break-words bg-white border-0 shadow-soft-xl rounded-2xl bg-clip-border draggable">
<div class="p-4 pb-0 mb-0 bg-white border-b-0 rounded-t-2xl">
<h6 class="mb-0 font-display">Platform Settings</h6>
</div>
<div class="flex-auto p-4">
<h6 class="font-bold leading-tight uppercase text-xs text-slate-500">Account</h6>
<ul class="flex flex-col pl-0 mb-0 rounded-lg">
<li class="relative block px-0 py-2 bg-white border-0 rounded-t-lg text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="follow" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox" checked>
<label for=" follow" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Email me when someone follows me</label>
</div>
</li>
<li class="relative block px-0 py-2 bg-white border-0 text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="answer" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox">
<label for="answer" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Email me when someone answers on my post</label>
</div>
</li>
<li class="relative block px-0 py-2 bg-white border-0 rounded-b-lg text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="mention" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox" checked="">
<label for="mention" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Email me when someone mentions me</label>
</div>
</li>
</ul>
<h6 class="mt-6 font-bold leading-tight uppercase text-xs text-slate-500">Application</h6>
<ul class="flex flex-col pl-0 mb-0 rounded-lg">
<li class="relative block px-0 py-2 bg-white border-0 rounded-t-lg text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="launches projects" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox">
<label for="launches projects" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">New launches and projects</label>
</div>
</li>
<li class="relative block px-0 py-2 bg-white border-0 text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="product updates" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox" checked="">
<label for="product updates" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Monthly product updates</label>
</div>
</li>
<li class="relative block px-0 py-2 pb-0 bg-white border-0 rounded-b-lg text-inherit">
<div class="min-h-6 mb-0.5 block pl-0">
<input id="subscribe" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox">
<label for="subscribe" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Subscribe to newsletter</label>
</div>
</li>
</ul>
</div>
</div>Form Contact
Component from
Riva Dashboard Tailwind
Builder
<div class="relative flex-[1_auto] flex flex-col break-words min-w-0 bg-clip-border rounded-xl border border-dashed border-stone-200 bg-white mb-5 draggable">
<!-- card body -->
<div class="flex-auto block py-8 px-9">
<form action="#" method="post" class="group/form">
<div class="flex flex-col mb-9">
<h1 class="font-semibold text-3xl text-dark mb-2 font-display">Contact Us</h1>
<span class="text-lg font-medium text-muted block"> Feel free to reach out to us with any questions or inquiries. We'll be happy to assist you! </span>
</div>
<div class="flex flex-wrap mb-5 -mx-3">
<div class="w-1/2 px-3">
<label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Name"> Full Name </label>
<input type="text" name="Name" id="Name" value="" class="peer w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your full name" required="">
</div>
<div class="w-1/2 px-3">
<label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Email"> Email Address </label>
<input type="email" name="Email" id="Email" class="peer w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your email address" required="">
</div>
</div>
<div class="w-full mb-5">
<label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Subject"> Subject </label>
<input type="text" name="Subject" id="Subject" class="w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter the subject">
</div>
<div class="w-full mb-10">
<label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Message"> Message </label>
<textarea rows="6" type="text" name="Message" id="Message" class="w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your message"></textarea>
</div>
<div class="text-end">
<button class="inline-block text-base font-medium leading-normal text-center align-middle cursor-pointer rounded-xl transition-colors duration-150 ease-in-out text-white bg-dark shadow-none border-0 px-5 py-4 hover:bg-dark-dark active:bg-dark-dark focus:bg-dark-dark ms-auto" type="submit">Send Message</button>
</div>
</form>
</div>
</div>Pills
Component from
Argon Dashboard
Builder
<div class="draggable">
<div class="nav-wrapper">
<ul class="nav nav-pills nav-pills-circle" id="tabs_2" role="tablist">
<li class="nav-item">
<a class="nav-link rounded-circle active" id="home-tab" data-toggle="tab" href="#tabs_2_1" role="tab" aria-controls="home" aria-selected="true">
<span class="nav-link-icon d-block"><i class="fa fa-atom"></i></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#tabs_2_2" role="tab" aria-controls="profile" aria-selected="false">
<span class="nav-link-icon d-block"><i class="fa fa-chart-line"></i></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#tabs_2_3" role="tab" aria-controls="contact" aria-selected="false">
<span class="nav-link-icon d-block"><i class="fa fa-user"></i></span>
</a>
</li>
</ul>
</div>
<div class="card shadow">
<div class="card-body">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tabs_2_1" role="tabpanel" aria-labelledby="home-tab">
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
<div class="tab-pane fade" id="tabs_2_2" role="tabpanel" aria-labelledby="profile-tab">
<p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="tabs_2_3" role="tabpanel" aria-labelledby="contact-tab">
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
</div>
</div>
</div>
</div>
</div>Tabs
Component from
Argon Dashboard
Builder
<div class="draggable">
<div class="nav-wrapper">
<ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist">
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" data-toggle="tab" href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1" aria-selected="true"><i class="fa fa-home mr-2"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" data-toggle="tab" href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2" aria-selected="false"><i class="fa fa-bell mr-2"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-3-tab" data-toggle="tab" href="#tabs-icons-text-3" role="tab" aria-controls="tabs-icons-text-3" aria-selected="false"><i class="fa fa-calendar mr-2"></i>Messages</a>
</li>
</ul>
</div>
<div class="card shadow">
<div class="card-body">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tabs-icons-text-1" role="tabpanel" aria-labelledby="tabs-icons-text-1-tab">
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
<div class="tab-pane fade" id="tabs-icons-text-2" role="tabpanel" aria-labelledby="tabs-icons-text-2-tab">
<p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="tabs-icons-text-3" role="tabpanel" aria-labelledby="tabs-icons-text-3-tab">
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
</div>
</div>
</div>
</div>
</div>