"Ellipsoid Building Profile Page"
Bootstrap 4.0.0 Snippet by davydov-vyacheslav

Post to Facebook Tweet this

<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> <title>Bootstrap Example</title> <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-10"><h1>Davydov V.</h1></div> <!-- TODO: redesign to use navbar --> </div> <hr/> <div class="row"> <div class="col-sm-3"><!--left col--> <div class="text-center"> <img src="http://ssl.gstatic.com/accounts/ui/avatar_2x.png" 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">Activity</div> <div class="panel-body"> <div class="text-right"><span class="pull-left"><strong>Purchases</strong></span>12</div> <div class="text-right"><span class="pull-left"><strong>Model Views</strong></span>135</div> </div> </div> </div><!--/col-3--> <div class="col-sm-8"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Base Information</a></li> <li><a data-toggle="tab" href="#password">Password Information</a></li> <li><a data-toggle="tab" href="#views">Views List</a></li> <li><a data-toggle="tab" href="#purchases">Purchases List</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="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-12"> <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-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="password"> <h2></h2> <hr> <form class="form" action="##" method="post" id="registrationForm"> <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> </div><!--/tab-pane--> <div class="tab-pane" id="views"> Models with duplicated information are merged. The latest one is shown <hr> <table class="table table-striped table-condensed"> <thead> <tr> <th>Shell type</th> <th>Cover type</th> <th>Dimensions</th> <th>Date viewed</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>Ellipsoid</td> <td>Icosahedron</td> <td>w: 10; h: 20; d: 25</td> <td>2012/05/06</td> <td><span class="label label-warning">Purchase</span> <span class="label label-success">View model</span></td> </tr> <tr> <td>Ellipsoid</td> <td>Dodecahedron</td> <td>w: 10; h: 24; d: 25</td> <td>2012/05/06</td> <td><span class="label label-warning">Purchase</span> <span class="label label-success">View model</span></td> </tr> <tr> <td>Sphere</td> <td>Dodecahedron</td> <td>r: 123</td> <td>2012/05/06</td> <td><span class="label label-warning">Purchase</span> <span class="label label-success">View model</span></td> </tr> </tbody> </table> </div> <div class="tab-pane" id="purchases"> <!-- TODO: implement me --> <hr> <table class="table table-striped table-condensed"> <thead> <tr> <th>Shell type</th> <th>Cover type</th> <th>Dimensions</th> <th>Date purchased</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>Ellipsoid</td> <td>Icosahedron</td> <td>w: 10; h: 20; d: 25</td> <td>2012/05/06</td> <td><span class="label label-success">Download .dxf</span> <span class="label label-success">View model</span></td> </tr> <tr> <td>Ellipsoid</td> <td>Dodecahedron</td> <td>w: 10; h: 24; d: 25</td> <td>2012/05/06</td> <td><span class="label label-success">Download .dxf</span> <span class="label label-success">View model</span></td> </tr> <tr> <td>Sphere</td> <td>Dodecahedron</td> <td>r: 123</td> <td>2012/05/06</td> <td><span class="label label-success">Download .dxf</span> <span class="label label-success">View model</span></td> </tr> </tbody> </table> </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

Gaia Bootstrap Template
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: