Bootstrap Snippet Custom File Upload along with Edit Profile 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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="full-width bg-transparent">
        <h1 class="text-center color">Custom Input file Upload</h1>
    <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12">
        <div class="full-width">
        <input type="file" id="base-input" class="form-control form-input form-style-base">
        <input type="text" id="fake-input" class="form-control form-input form-style-fake" placeholder="Choose your File" readonly>
        <span class="glyphicon glyphicon-open input-place"></span>
    </div>
        <!--================== Snippet for custom input type file on button ================-->
        <div class="full-width">
            <h1 class="text-center color">Custom Input file Upload button</h1>
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <input type="file" id="main-input" class="form-control form-input form-style-base">
                    <h4 id="fake-btn" class="form-input fake-styled-btn text-center truncate"><span class="margin"> Choose File</span></h4>
                </div>
        </div>
        <!--=========================input type file change on button ends here====================-->
        <div class="full-width">
            <h1 class="text-center color">Edit Profile Snippet</h1>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="custom-form">
                <div class="text-center bg-form">
                    <div class="img-section">
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
.full-width{
    float:left;width:100%;margin-top:30px;min-height:100px;position:relative;
}
.form-style-fake{position:absolute;top:0px;}
.form-style-base{position:absolute;top:0px;z-index: 999;opacity: 0;}
.imgCircle{border-radius: 50%;}
.form-control{padding: 10px 50px;}
.form-input{height:50px;border-radius: 0px;margin-top: 20px;}
.Profile-input-file{
    height:180px;width:180px;left:33%;
    position: absolute;
    top: 0px;
    z-index: 999;
    opacity: 0 !important;
}
.mg-auto{
    margin:0 auto;max-width: 200px;overflow: hidden;
}
.fake-styled-btn{
    background: #006cad;
    padding: 10px;
    color: #fff;
}
#main-input{width:250px;}
.input-place{
    position: absolute;top:35px;left: 20px;font-size:23px;color:gray;}
.margin{margin-top:10px;margin-bottom:10px;}
.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bg-form{
    float:left;width:100%;
    position:relative;
    background: url("http://lorempixel.com/200/200/abstract/");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Custom File Upload along with Edit Profile"
Bootstrap 3.3.0 Snippet by rabhinit

Related: See More

Questions / Comments:

"Custom File Upload along with Edit Profile" Bootstrap 3.3.0 Snippet by rabhinit

Related: See More

Questions / Comments:

"Custom File Upload along with Edit Profile"
Bootstrap 3.3.0 Snippet by rabhinit