"smashq tabs"
Bootstrap 4.1.1 Snippet by gbdevteam

Post to Facebook Tweet this

<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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <hr> <div class="container bootstrap snippet"> <div class="row"> <div class="col-sm-12"> <div class="row"> <div class="col-sm-12"><h3><center> Username <br> <br> </center></h3></div> </div> <ul class="nav nav-tabs justify-content-center"> <li class="active"><a data-toggle="tab" href="#home">My account</a></li> <li><a data-toggle="tab" href="#messages"> Privacy Settings </a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home"> <div class="col-xs-4"> <label for="first_name"><h3>Account Settings </h3></label> <br><br> <form class="form" action="##" method="post" id="registrationForm"> <div class="form-group"> <label for="first_name"><h4> Username </h4></label> <input type="text" class="form-control" name="first_name" id="first_name" placeholder="first name" title="enter your first name if any."> </div> </form> </div> <div class="col-xs-4"> <label for="first_name"><h3>Social Media </h3></label> <br> <br> <form class="form" action="##" method="post" id="registrationForm"> <div class="form-group"> <label for="first_name"><h4> Snachat Username </h4></label> <input type="text" class="form-control" name="first_name" id="first_name" placeholder="first name" title="enter your first name if any."> </div> </form> </div> <div class="col-xs-4"> <label for="first_name"><h3>Subcriptions</h3></label> <br> <br> <form class="form" action="##" method="post" id="registrationForm"> <div class="form-group"> <label for="first_name"><h3>List of Subscriptions </h3></label> <ul> <li> boo</li> <li> boo</li> <li> boo</li> <li> boo</li> </ul> </div> </form> </div> <!--The end of the form.--> </div><!--/tab-pane--> <div class="tab-pane" id="messages"> </div><!--/tab-pane--> <div class="tab-pane" id="settings"> <hr> </div> </div><!--/tab-pane--> </div><!--/tab-content--> </div><!--/col-9--> </div><!--/row-->
$(document).ready(function() { var readURL = function(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('.avatar').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $(".file-upload").on('change', function(){ readURL(this); }); });

Related: See More

Full Calendar
Tabs style 1
Bootstrap Tabs with Table
Tabs

Questions / Comments: