Bootstrap Snippet User Form using HTML CSS Bootstrap

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <div class="container profile-form">
        <form action="">
            <div class="row">
                <div class="col-md-3 ist-column">
                    <img src="https://via.placeholder.com/150" alt="" class="img-rounded img-responsive">
                    <span> <a>Delete</a></span>
                    <span><a>Change</a></span>
                </div>
                <div class="col-md-7 middle-column pull-left user-title">
                    <input type="text" value="Qamar Abbas" name="username">
                </div>
                <div class="col-md-2 last-column">
                    <a href="" class="btn-new pull-right">Edit</a>
                </div>
                <div class="col-md-12">
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 ist-column">
                    Personal Information
                </div>
                <div class="col-md-7 middle-column">
                    <div class="row">
                        <div class="col-md-6">FirstName
                            <div>
                                <input type="text" value='Qamar' name="user_fname">
                            </div>
                        </div>
                        <div class="col-md-6"> Last Name
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
.profile-form{
    background: hsl(211deg 9% 93%);
    height:  auto;
    padding: 2em;
    font-family: calibri;
}
.profile-form form{
    background: white;
    padding: 1em;
}
.profile-form input{
    border: none;
    outline: none
}
.profile-form .ist-column img{
    height: 33vh;
    width: 33vh;
}
.profile-form .ist-column span{
    padding: .8rem;
    font-size: 1rem;
}
.profile-form .user-title input{
    font-size:1.5em;
}
.profile-form .middle-column .p-info{
    color: #982f2f;
}
.bd-lr-1{
    border-right: 1px solid black;
    border-left: 1px solid black;
}
.profile-form .middle-column{
    font-size: .8em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"User Form"
Bootstrap 3.3.0 Snippet by Qamarabbas

Related: See More

Questions / Comments:

"User Form" Bootstrap 3.3.0 Snippet by Qamarabbas

Related: See More

Questions / Comments:

"User Form"
Bootstrap 3.3.0 Snippet by Qamarabbas