HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="row">
<div class="col-md-12">
    <div class="row">
        <div class="col-md-6">
        
            <div id="private_label"  class="panel panel-default carousel slide" data-ride="carousel">
                    
                <div class="panel-heading">
                    <h3 class="panel-title">
                    Private Label
                    </h3>
                </div>
                
                <div class="panel-body carousel-inner" style="padding: 0px;">
                    <div class="item active">
                        <img src="http://placehold.it/600x375/1dd2af" alt="1 slide">
                        <div class="carousel-caption">
                            <h3>TURQUOISE</h3>
                        </div>
                    </div>
                    
                    <div class="item">
                        <img src="http://placehold.it/600x375/40d47e" alt="2 slide">
                        <div class="carousel-caption">
                            <h3>EMERALD </h3>
                        </div>
                    </div>
                    
                    <div class="item">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
#booths-container { width: 200px; height: 200px; position: relative; margin: 0 auto; border:1px solid blue;}
.booth { position: absolute; list-style: none; margin: 0px; padding: 0px; border: solid 1px #fff; box-sizing: border-box; font-size: 9px; cursor: pointer; opacity: .8; border-radius: 5px; }
.booth:hover { opacity: 1; }
[data-boothtype="prime"],[data-boothtype="center"] { width: 30px; height: 30px; }
[data-boothtype="prime"] { background: #fbb040;}
[data-boothtype="center"] { background: #8dc63f;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    
    $("#booths-container").click(function(){
        var selText = $(this).html();
    
        //working version - for single button //
       //$('.btn:first-child').html(selText+'<span class="caret"></span>');  
       
       //working version - for multiple buttons //
       $('selecteditem').html(selText);
   });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Carousel - Panel w Footer"
Bootstrap 3.1.0 Snippet by Opeyemi15

Related: See More

Questions / Comments:

"Carousel - Panel w Footer" Bootstrap 3.1.0 Snippet by Opeyemi15

Related: See More

Questions / Comments:

"Carousel - Panel w Footer"
Bootstrap 3.1.0 Snippet by Opeyemi15