<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-5405524651500158", enable_page_level_ads: true }); </script> <div class="container"> <div class="my_profile"> <div class="col-md-3"> <div class="well" style="background: #fff;"> <div class="media text-center"> <div class="media-center media-bottom"> <img src="https://img1a.flixcart.com/www/linchpin/fk-cp-zion/img/profile-pic-male_2fd3e8.svg" class="media-object" style="width:60px; margin:0 auto;"> </div> <div class="media-body"> <h5 style="width:100%">User name</h5> <br> <h4 style="width:100%" class="media-heading">Welcome to Project</h4> </div> </div> </div> <div class="well pro_left_ii" style="background: #fff;"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a data-toggle="tab" href="#home">MY ORDERS</a></li> <li><a data-toggle="tab" href="#menu1">ACCOUNT SETTINGS</a></li> <li><a data-toggle="tab" href="#menu2">Logout</a></li> </ul> </div> </div> <div class="col-md-9"> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <div class="well" style="background:#fff;"> <h4>Order Details</h4> <hr> <table class="table table-hover shopping-cart-wrap"> <thead class="text-muted"> <tr> <th scope="col" width="120">Product</th> <th scope="col">Product Details</th> <th scope="col" width="100">Quantity</th> <th scope="col">Price</th> </tr> </thead> <tbody> <tr> <td> <figure class="media"> <div class="img-wrap"><img style="max-height:70px;" src="https://rukminim1.flixcart.com/image/312/312/jog2nbk0/mobile/e/x/b/mi-redmi-e7t-na-original-imafazxdh2bd6hep.jpeg?q=70" class="img-thumbnail img-sm"></div> </figure> </td> <td> <figcaption class="media-body"> <h4 class="title text-truncate" style="margin-bottom:7px;">Product name goes here </h4> <dl class="param param-inline small"> <dt>Color: Orange color </dt> </dl> </figcaption> </td> <td> <input class="form-control" type="text" value="2"> </td> <td> <div class="price-wrap"> <var class="price">USD 45</var> <small class="text-muted">(USD15 each)</small> </div> <!-- price-wrap .// --> </td> </tr> <tr> <td> <figure class="media"> <div class="img-wrap"><img style="max-height:70px;" src="https://rukminim1.flixcart.com/image/312/312/jog2nbk0/mobile/e/x/b/mi-redmi-e7t-na-original-imafazxdh2bd6hep.jpeg?q=70" class="img-thumbnail img-sm"></div> </figure> </td> <td> <figcaption class="media-body"> <h4 class="title text-truncate" style="margin-bottom:7px;">Product name goes here </h4> <dl class="param param-inline small"> <dt>Color: Orange color </dt> </dl> </figcaption> </td> <td> <input class="form-control" type="text" value="2"> </td> <td> <div class="price-wrap"> <var class="price">USD 45</var> <small class="text-muted">(USD15 each)</small> </div> <!-- price-wrap .// --> </td> </tr> </tbody> </table> </div> <!-- card.// --> </div> <div id="menu1" class="tab-pane fade"> <div class="well" style="background:#fff;"> <h4>Change Password</h4> <hr> <label>Current Password</label> <div class="form-group pass_show"> <input type="password" value="" class="form-control" placeholder="Current Password"> </div> <label>New Password</label> <div class="form-group pass_show"> <input type="password" value="" class="form-control" placeholder="New Password"> </div> <label>Confirm Password</label> <div class="form-group pass_show"> <input type="password" value="" class="form-control" placeholder="Confirm Password"> </div> <hr> <div class="form-group pass_show"> <input type="submit" class="btn btn-info" value="submit"> </div> </div> </div> <!--div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Some content in menu 2.</p> </div--> </div> </div> </div> </div>

.my_profile{ float: left; width: 100%; margin: 20px 0; } .pro_left_ii .nav-tabs>li.active>a{ background: #f22258; border: none; color: #fff; border: 1px solid #f22258; } .pro_left_ii .nav-tabs>li>a { border: 1px solid #e3e3e3; } .my_profile .media-body, .my_profile h4, .my_profileh5{ display: inherit; width:100%; }