Bootstrap Snippet Profile Page using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<input id="width" type="text" value="320">
<input id="height" type="text" value="548">
<button id="resize">Resize</button>
<div class="wrapper" style="width: 320px; height: 548px;">
    <div class="phone-body">
        <div class="phone-area">
<!-- Your code here -->
<div class="body">
    <div style="min-height: 40px; background: #8e44ad;">
    </div>
    
    <div class="sim-container">
        <div class="profile-info row">
            <img class="col-xs-4" src="http://lorempixel.com/420/420/sports">
            <div class="col-xs-8">
                <h4>[Name]</h4>
                <h4>[Type]</h4>
            </div>
        </div>
        <div class="profile-stats row">
            <h5 class="col-xs-4">[X] Following</h5>
            <h5 class="col-xs-4">[X] Likes</h5>
            <h5 class="col-xs-4">[X] Votes</h5>
        </div>
        <div class="row">
            <h4 class="col-xs-12">Activity:</h4>
            <div id="activityConnections" class="col-xs-12 connection-previews">
                <div>
                    <img src="http://lorempixel.com/420/420/city">
                    <div>
                        <h6>[Company]</h6>
                        <div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
body {
    padding: 10px;
    background: #aaa;
}
.wrapper {
    position: absolute;
    top: 40px;
    left: 40%;
}
.phone-body {
    border: 10px solid black;
    border-radius: 10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
}
.phone-area {
    width: 100%;
    height: 100%;
    background: #edf0f1;
    overflow-y: auto;
    overflow-x: hidden;
}
.sim-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.body {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
$(function() {
    $('#resize').click(function() {
        var width = $('#width').val();
        var height = $('#height').val();
        
        var style = 'width: ' + width + 'px; height: ' + height + 'px;';
        
        $('.wrapper').attr('style', style);
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Profile Page"
Bootstrap 3.3.0 Snippet by tjhall13

Related: See More

Questions / Comments:

"Profile Page" Bootstrap 3.3.0 Snippet by tjhall13

Related: See More

Questions / Comments:

"Profile Page"
Bootstrap 3.3.0 Snippet by tjhall13