Bootstrap Tabs:

Tabs with Bootstrap for Getting Profile Information

Generally, both the website owner and the user can benefit from user profile information. These records serve as a great source where the owner can find valuable data regarding their clients and customers. With the help of such data, the owner is able to target marketing activities a lot easier and more effectively which increases the profits by a considerable amount. The users can also receive personalized products and recommendations regarding the available services which helps build the network. with that said, having a nice way to feature these data is a great and effective idea. For example, you can use Bootstrap profile cards to access the data in a clean and more organized manner.

Now, designing such a feature requires a lot of time and effort and because of that, we have a Bootstrap beautiful tab designed to do this. This is a tab with forms implemented in it which allows the users to input the profile information which can then be displayed in the profile section above it. this is perfect for a profile settings page where you can personalize your profile information as much as you want. The form features everything, from the usual email and password to address and location which is perfect for your site.

Profile Information

Bootstrap Beautiful Tabs

Tabs with Form

Bootstrap Profile Tabs

<!-- This script got from frontendfreecode.com -->
<div class="container bootstrap snippet">
    <div class="row">
        <div class="col-sm-10"><h1>User name</h1></div>
        <div class="col-sm-2">
            <a href="#" class="pull-right">Logout</a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <!--left col-->
            <div class="text-center">
                <img src="https://frontendfreecode.com/img/04-user.jpg" class="avatar img-circle img-thumbnail" alt="avatar" />
                <h6>Upload a different photo...</h6>
                <input type="file" class="text-center center-block file-upload" />
            </div>
            <hr />
            <br />
            <div class="panel panel-default">
                <div class="panel-heading">Website <i class="fa fa-link fa-1x"></i></div>
                <div class="panel-body"><a href="#">example.com</a></div>
            </div>
            <ul class="list-group">
                <li class="list-group-item text-muted">Activity <i class="fa fa-dashboard fa-1x"></i></li>
                <li class="list-group-item text-right">
                    <span class="pull-left"><strong>Shares</strong></span> 125
                </li>
                <li class="list-group-item text-right">
                    <span class="pull-left"><strong>Likes</strong></span> 13
                </li>
                <li class="list-group-item text-right">
                    <span class="pull-left"><strong>Posts</strong></span> 37
                </li>
                <li class="list-group-item text-right">
                    <span class="pull-left"><strong>Followers</strong></span> 78
                </li>
            </ul>
            <div class="panel panel-default">
                <div class="panel-heading">Social Media</div>
                <div class="panel-body"><i class="fa fa-facebook fa-2x"></i> <i class="fa fa-github fa-2x"></i> <i class="fa fa-twitter fa-2x"></i> <i class="fa fa-pinterest fa-2x"></i> <i class="fa fa-google-plus fa-2x"></i></div>
            </div>
        </div>
        <!--/col-3-->
        <div class="col-sm-9">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
                <li><a data-toggle="tab" href="#messages">Menu 1</a></li>
                <li><a data-toggle="tab" href="#settings">Menu 2</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="home">
                    <hr />
                    <form class="form" action="" method="post" id="registrationForm">
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="first_name"><h4>First name</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>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="last_name"><h4>Last name</h4></label>
                                <input type="text" class="form-control" name="last_name" id="last_name" placeholder="last name" title="enter your last name if any." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="phone"><h4>Phone</h4></label>
                                <input type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="mobile"><h4>Mobile</h4></label>
                                <input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="email"><h4>Email</h4></label>
                                <input type="email" class="form-control" name="email" id="email" placeholder="you@email.com" title="enter your email." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="email"><h4>Location</h4></label>
                                <input type="email" class="form-control" id="location" placeholder="somewhere" title="enter a location" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="password"><h4>Password</h4></label>
                                <input type="password" class="form-control" name="password" id="password" placeholder="password" title="enter your password." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="password2"><h4>Verify</h4></label>
                                <input type="password" class="form-control" name="password2" id="password2" placeholder="password2" title="enter your password2." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <br />
                                <button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Save</button>
                                <button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>
                            </div>
                        </div>
                    </form>
                    <hr />
                </div>
                <!--/tab-pane-->
                <div class="tab-pane" id="messages">
                    <h2></h2>
                    <hr />
                    <form class="form" action="" method="post" id="registrationForm">
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Address"><h4>Address</h4></label>
                                <input type="text" class="form-control" name="Address" id="Address" placeholder="Address" title="enter your address." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Gender"><h4>Gender</h4></label>
                                <input type="text" class="form-control" name="last_name" id="Gender" placeholder="Gender" title="enter your Gender." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Job"><h4>Job</h4></label>
                                <input type="text" class="form-control" name="Job" id="Job" placeholder="enter Job" title="enter your Job." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="work_address"><h4>work address</h4></label>
                                <input type="text" class="form-control" name="work_address" id="work_address" placeholder="enter work address" title="enter your work address." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <br />
                                <button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Save</button>
                                <button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!--/tab-pane-->
                <div class="tab-pane" id="settings">
                    <hr />
                    <form class="form" action="" method="post" id="registrationForm">
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Instagram"><h4>Instagram</h4></label>
                                <input type="text" class="form-control" name="Instagram" id="Instagram" placeholder="Instagram" title="enter your Instagram." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Facebook"><h4>Facebook</h4></label>
                                <input type="text" class="form-control" name="Facebook" id="Facebook" placeholder="Facebook" title="enter your Facebook." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Youtube"><h4>Youtube</h4></label>
                                <input type="text" class="form-control" name="Youtube" id="Youtube" placeholder="Youtube" title="enter your Youtube Channel URL." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Linkedin"><h4>Linkedin</h4></label>
                                <input type="text" class="form-control" name="Linkedin" id="Linkedin" placeholder="enter Linkedin" title="enter your Linkedin." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="twitter"><h4>Twitter</h4></label>
                                <input type="text" class="form-control" name="twitter" id="twitter" placeholder="twitter" title="enter your twitter." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <br />
                                <button class="btn btn-lg btn-success pull-right" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Save</button>
                                <!--<button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>-->
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

$(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);
    });
});

<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>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<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>
<body>
<div class="container bootstrap snippet">
    <div class="row">
        <div class="col-sm-10"><h1>User name</h1></div>
        <div class="col-sm-2">
            <a href="#" class="pull-right">Logout</a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <!--left col-->
            <div class="text-center">
                <img src="https://frontendfreecode.com/img/04-user.jpg" class="avatar img-circle img-thumbnail" alt="avatar" />
                <h6>Upload a different photo...</h6>
                <input type="file" class="text-center center-block file-upload" />
            </div>
            <hr />
            <br />
            <div class="panel panel-default">
                <div class="panel-heading">Website <i class="fa fa-link fa-1x"></i></div>
                <div class="panel-body"><a href="#">example.com</a></div>
            </div>
            <ul class="list-group">
                <li class="list-group-item text-muted">Activity <i class="fa fa-dashboard fa-1x"></i></li>
                <li class="list-group-item text-right">
                    <span class="pull-left"><strong>Shares</strong></span> 125
                </li>
                <li class="list-group-item text-right">
                    <span class="pull-left"><strong>Likes</strong></span> 13
                </li>
                <li class="list-group-item text-right">
                    <span class="pull-left"><strong>Posts</strong></span> 37
                </li>
                <li class="list-group-item text-right">
                    <span class="pull-left"><strong>Followers</strong></span> 78
                </li>
            </ul>
            <div class="panel panel-default">
                <div class="panel-heading">Social Media</div>
                <div class="panel-body"><i class="fa fa-facebook fa-2x"></i> <i class="fa fa-github fa-2x"></i> <i class="fa fa-twitter fa-2x"></i> <i class="fa fa-pinterest fa-2x"></i> <i class="fa fa-google-plus fa-2x"></i></div>
            </div>
        </div>
        <!--/col-3-->
        <div class="col-sm-9">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
                <li><a data-toggle="tab" href="#messages">Menu 1</a></li>
                <li><a data-toggle="tab" href="#settings">Menu 2</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="home">
                    <hr />
                    <form class="form" action="" method="post" id="registrationForm">
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="first_name"><h4>First name</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>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="last_name"><h4>Last name</h4></label>
                                <input type="text" class="form-control" name="last_name" id="last_name" placeholder="last name" title="enter your last name if any." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="phone"><h4>Phone</h4></label>
                                <input type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="mobile"><h4>Mobile</h4></label>
                                <input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="email"><h4>Email</h4></label>
                                <input type="email" class="form-control" name="email" id="email" placeholder="you@email.com" title="enter your email." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="email"><h4>Location</h4></label>
                                <input type="email" class="form-control" id="location" placeholder="somewhere" title="enter a location" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="password"><h4>Password</h4></label>
                                <input type="password" class="form-control" name="password" id="password" placeholder="password" title="enter your password." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="password2"><h4>Verify</h4></label>
                                <input type="password" class="form-control" name="password2" id="password2" placeholder="password2" title="enter your password2." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <br />
                                <button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Save</button>
                                <button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>
                            </div>
                        </div>
                    </form>
                    <hr />
                </div>
                <!--/tab-pane-->
                <div class="tab-pane" id="messages">
                    <h2></h2>
                    <hr />
                    <form class="form" action="" method="post" id="registrationForm">
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Address"><h4>Address</h4></label>
                                <input type="text" class="form-control" name="Address" id="Address" placeholder="Address" title="enter your address." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Gender"><h4>Gender</h4></label>
                                <input type="text" class="form-control" name="last_name" id="Gender" placeholder="Gender" title="enter your Gender." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Job"><h4>Job</h4></label>
                                <input type="text" class="form-control" name="Job" id="Job" placeholder="enter Job" title="enter your Job." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="work_address"><h4>work address</h4></label>
                                <input type="text" class="form-control" name="work_address" id="work_address" placeholder="enter work address" title="enter your work address." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <br />
                                <button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Save</button>
                                <button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!--/tab-pane-->
                <div class="tab-pane" id="settings">
                    <hr />
                    <form class="form" action="" method="post" id="registrationForm">
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Instagram"><h4>Instagram</h4></label>
                                <input type="text" class="form-control" name="Instagram" id="Instagram" placeholder="Instagram" title="enter your Instagram." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Facebook"><h4>Facebook</h4></label>
                                <input type="text" class="form-control" name="Facebook" id="Facebook" placeholder="Facebook" title="enter your Facebook." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Youtube"><h4>Youtube</h4></label>
                                <input type="text" class="form-control" name="Youtube" id="Youtube" placeholder="Youtube" title="enter your Youtube Channel URL." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="Linkedin"><h4>Linkedin</h4></label>
                                <input type="text" class="form-control" name="Linkedin" id="Linkedin" placeholder="enter Linkedin" title="enter your Linkedin." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-6">
                                <label for="twitter"><h4>Twitter</h4></label>
                                <input type="text" class="form-control" name="twitter" id="twitter" placeholder="twitter" title="enter your twitter." />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <br />
                                <button class="btn btn-lg btn-success pull-right" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Save</button>
                                <!--<button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>-->
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(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);
    });
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS