Bootstrap Snippet Responsive Testmonial FB Post 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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<head>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<div class="[ container ]">
    <div class="[ col-xs-12 ]">
        <div id="carousel-testimonials" class="carousel slide" data-ride="carousel" data-interval="12000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-testimonials" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-testimonials" data-slide-to="1"></li>
            </ol>
            
            <div class="carousel-inner">
                <div class="item active">
                    <!--Testimonial Section-->
                    <div class="fb-testimonial">
                        <div class="fb-testimonial-inner">
                            <div class="fb-profile">
                                <img class="facebook-thumb" src="http://mrg.bz/vWUBi9">
                                <p class="facebook-name">Jane Doe <i class="fa fa-caret-right"></i> MyCompany <br><span class="facebook-date"><a href="https://www.facebook.com">April 3</a> · <i class="fa fa-globe"></i></span></p>
                            </div>
                            <div class="fb-testimonial-copy">
                                <p>Cupcake ipsum dolor sit amet. I love chocolate chocolate bar soufflé fruitcake.
                                Cotton candy cupcake halvah I love donut. Liquorice jelly gummies jelly beans pudding. 
                                I love pie pudding jelly-o gummies jujubes sweet roll cookie. Jujubes cookie fruitcake I love biscuit halvah halvah.</p>
                            </div>
                        </div>
                    </div>
                    <!--END Testimonial Section-->
                </div>
                <div class="item">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.fb-testimonial{background:#c5ced8;padding:10px;border-radius:6px; margin:25px 15px 0px 15px;}
.fb-testimonial-inner{background:#fff;padding:10px;border-radius:3px;}
.facebook-thumb{width:40px; display:inline-block; vertical-align:top;}
.facebook-name{display:inline-block; margin:0px; font-family:Helvetica, Arial, Sans-serif; font-weight:700; color:#3b5998;}
.facebook-date a{color:#9197a3; font-size:12px; font-weight:500; text-decoration:underline;}
.facebook-date {color:#9197a3; font-size:12px; font-weight:500;}
.fa.fa-caret-right{color:#9197a3;}
.fb-testimonial-copy{padding:15px 0px 0px 0px;}
.carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;}
.carousel .active.left {left:0;opacity:0;z-index:2;}
.carousel .next {left:0;opacity:1;z-index:1;}
.carousel-indicators {bottom: -25px;}
.carousel-indicators li {border-color: rgb(51, 51, 51);width:7px;height:7px;}
.carousel-indicators .active {background-color: rgb(51, 51, 51);width:9px;height:9px;}
/*About this snippet copy*/
.about-snippet{background:#f7f7f7; color:#888; margin:40px 0px 0px 0px; padding:15px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive Testmonial FB Post"
Bootstrap 3.2.0 Snippet by mouse0270

Related: See More

Questions / Comments:

"Responsive Testmonial FB Post" Bootstrap 3.2.0 Snippet by mouse0270

Related: See More

Questions / Comments:

"Responsive Testmonial FB Post"
Bootstrap 3.2.0 Snippet by mouse0270