profile text

This bootstrap snippet called "profile text" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: profile

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="container bootstrap snippets">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="col-inside-lg decor-info b-profile text-c" data-height-col="" style="height: 440px;">
                <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="image" class="b-profile-avatar">
                <div class="b-profile-name">
                    Alexander Van Gok
                </div>
                <div class="b-profile-profession">
                    Web Designer
                </div>
                <div class="b-profile-about">
                    <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
                </div>
                <ul class="b-profile-share">
                    <li><a class="f" href="#">f</a></li>
                    <li><a class="t" href="#">t</a></li>
                    <li><a class="l" href="#">l</a></li>
                    <li><a class="x" href="#">x</a></li>
                </ul>
                <span class="btn-follow-this m-b-md">FOLLOW THIS</span>
            </div>
        </div>
        
        <div class="col-sm-12 col-md-6">
            <div class="col-inside-lg decor-success b-profile text-c" data-height-col="" style="height: 440px;">
                <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="image" class="b-profile-avatar">
                <div class="b-profile-name">
                    Alexander Van Gok
                </div>
                <div class="b-profile-profession">
                    Web Designer
                </div>
                <div class="b-profile-about">
                    <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
                </div>
                <ul class="b-profile-share">
                    <li><a class="f" href="#">f</a></li>
                    <li><a class="t" href="#">t</a></li>
                    <li><a class="l" href="#">l</a></li>
                    <li><a class="x" href="#">x</a></li>
                </ul>
                <span class="btn-follow-this m-b-md">FOLLOW THIS</span>
            </div>
        </div>
        
        <div class="col-sm-12 col-md-6">
            <div class="col-inside-lg decor-warning b-profile text-c" data-height-col="" style="height: 440px;">
                <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="image" class="b-profile-avatar">
                <div class="b-profile-name">
                    Alexander Van Gok
                </div>
                <div class="b-profile-profession">
                    Web Designer
                </div>
                <div class="b-profile-about">
                    <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
                </div>
                <ul class="b-profile-share">
                    <li><a class="f" href="#">f</a></li>
                    <li><a class="t" href="#">t</a></li>
                    <li><a class="l" href="#">l</a></li>
                    <li><a class="x" href="#">x</a></li>
                </ul>
                <span class="btn-follow-this m-b-md">FOLLOW THIS</span>
            </div>
        </div>
        
        <div class="col-sm-12 col-md-6">
            <div class="col-inside-lg decor-default b-profile text-c" data-height-col="" style="height: 440px;">
                <img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="image" class="b-profile-avatar">
                <div class="b-profile-name">
                    Alexander Van Gok
                </div>
                <div class="b-profile-profession">
                    Web Designer
                </div>
                <div class="b-profile-about">
                    <p>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
                </div>
                <ul class="b-profile-share">
                    <li><a class="f" href="#">f</a></li>
                    <li><a class="t" href="#">t</a></li>
                    <li><a class="l" href="#">l</a></li>
                    <li><a class="x" href="#">x</a></li>
                </ul>
                <span class="btn-follow-this m-b-md">FOLLOW THIS</span>
            </div>
        </div>
	</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}
 .col-inside-lg {
    padding: 20px;
}
.b-profile {
    padding-bottom: 20px;
    color: #ffffff;
    margin-bottom:20px;
}
.b-profile-name {
    font-size: 20px;
    line-height: 24px;
    text-align: center;
}
.b-profile-avatar {
    display: block;
    width: 64px;
    height: 64px;
    margin: 20px auto;
    border-radius: 50%;
}
.b-profile-profession {
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    margin: 6px 0 12px;
}
.b-profile-share {
    display: block;
    text-align: center;
    padding: 12px 0 24px;
    margin: 0;
}
ol, ul {
    list-style: none;
}
.b-profile-share li {
    display: inline-block;
    margin: 0 8px;
    overflow: hidden;
}
.b-profile-share li a, .b-profile-share li a:hover {
    font-size: 24px;
    color: #fff;
}
.b-profile .btn-follow-this {
    font-size: 16px;
    line-height: 34px;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 0 40px;
    text-transform: uppercase;
    display: inline-block;
    cursor: pointer;
}
.m-b-md {
    margin-bottom: 20px;
}
.text-c {
    text-align: center;
}
.decor-success {
    background-color: #46be8a;
}
.decor-warning {
    background: #f2a654;
}
.decor-default {
    background: #7266ba;
}
.decor-info {
    background: #39bee8;
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jan 1st 2016, 19:08

Views: 2.3K

Rated 5/5 based on 1 reviews