xxxxxxxxxx1
<!--Navbar-->2
<nav class="navbar navbar-expand-lg navbar-dark primary-color">3
4
<!-- Navbar brand -->5
<a id="main-navbar" class="navbar-brand tour st-2" href="#" title="Step two" data-index="1">Navbar</a>6
7
<!-- Collapse button -->8
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"9
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">10
<span class="navbar-toggler-icon"></span>11
</button>12
13
<!-- Collapsible content -->14
<div class="collapse navbar-collapse" id="basicExampleNav">15
16
<!-- Links -->17
<ul class="navbar-nav mr-auto">18
<li class="nav-item active">19
<a class="nav-link" href="#">Home20
<span class="sr-only">(current)</span>21
</a>22
</li>23
<li class="nav-item">24
<a class="nav-link" href="#">Features</a>25
</li>26
<li class="nav-item">27
<a class="nav-link" href="#">Pricing</a>28
</li>29
30
<!-- Dropdown -->31
<li class="nav-item dropdown">32
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"33
aria-expanded="false">Dropdown</a>34
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">35
<a class="dropdown-item" href="#">Action</a>36
<a class="dropdown-item" href="#">Another action</a>37
<a class="dropdown-item" href="#">Something else here</a>38
</div>39
</li>40
41
</ul>42
<!-- Links -->43
44
<form class="form-inline">45
<div class="md-form my-0">46
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">47
</div>48
</form>49
</div>50
<!-- Collapsible content -->51
52
</nav>53
<!--/.Navbar-->54
55
<!--Popover list-->56
<div style="display: none" class="my-0 py-0 popover-content"> 57
<p class="popover-text">some text.</p>58
<hr />59
<button class="btn btn-sm btn-primary mx-0 prev disabled" data-index="0">Prev</button>60
<button class="btn btn-sm btn-primary mx-0 next" data-index="0">Next</button>61
<button class="btn btn-flat btn-sm float-right close">Close</button>62
</div>63
64
<div style="display: none" class="my-0 py-0 popover-content"> 65
<p class="popover-text">some text.</p>66
<hr />67
<button type="submit" class="btn btn-sm btn-primary mx-0 prev" data-index="1">Prev</button>68
<button type="submit" class="btn btn-sm btn-primary mx-0 next" data-index="1">Next</button>69
<button class="btn btn-flat btn-sm float-right close">Close</button>70
</div>71
72
<div style="display: none" class="my-0 py-0 popover-content"> 73
<p class="popover-text">some text.</p>74
<hr />75
<button type="submit" class="btn btn-sm btn-primary mx-0 prev" data-index="2">Prev</button>76
<button type="submit" class="btn btn-sm btn-primary mx-0 next" data-index="2">Next</button>77
<button class="btn btn-flat btn-sm float-right close">Close</button>78
</div>79
80
<div style="display: none" class="my-0 py-0 popover-content"> 81
<p class="popover-text">some text.</p>82
<hr />83
<button type="submit" class="btn btn-sm btn-primary mx-0 prev" data-index="3">Prev</button>84
<button type="submit" class="btn btn-sm btn-primary mx-0 next disabled" data-index="3">Next</button>85
<button class="btn btn-flat btn-sm float-right close">Close</button>86
</div>87
88
89
<!--Popover list-->90
<main>91
<section>92
<div class="container">93
<h1 class="text-center my-4">Bootstrap Tour</h1>94
<div class="row justify-content-center">95
96
<div class="col-md-3 text-center">97
<button class="btn btn-danger start-demo tour st-1" title="Step one" data-index="0">Watch Demo <i98
class="fas fa-eye"></i></button>99
100
</div>101
102
</div>103
<hr />104
<h4 class="text-center my-4">Cascading Cards</h4>105
<div class="row my-4">106
107
<div class="col-md-4">108
<!-- Card Wider -->109
<div class="card card-cascade wider">110
111
<!-- Card image -->112
<div class="view view-cascade overlay">113
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo6.jpg"114
alt="Card image cap">115
<a href="#!">116
<div class="mask rgba-white-slight"></div>117
</a>118
</div>119
120
<!-- Card content -->121
<div id="step-3" class="card-body card-body-cascade text-center tour st-3" title="Step three" data-index="2">122
123
<!-- Title -->124
<h4 class="card-title"><strong>Alison Belmont</strong></h4>125
<!-- Subtitle -->126
<h5 class="blue-text pb-2"><strong>Graffiti Artist</strong></h5>127
<!-- Text -->128
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque129
laudantium, totam rem aperiam. </p>130
131
<!-- Linkedin -->132
<a class="px-2 fa-lg li-ic"><i class="fab fa-linkedin-in"></i></a>133
<!-- Twitter -->134
<a class="px-2 fa-lg tw-ic"><i class="fab fa-twitter"></i></a>135
<!-- Dribbble -->136
<a class="px-2 fa-lg fb-ic"><i class="fab fa-facebook-f"></i></a>137
138
</div>139
140
</div>141
<!-- Card Wider -->142
</div>143
<div class="col-md-4">144
<!-- Card Narrower -->145
<div class="card card-cascade narrower">146
147
<!-- Card image -->148
<div class="view view-cascade overlay">149
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"150
alt="Card image cap">151
<a>152
<div class="mask rgba-white-slight"></div>153
</a>154
</div>155
156
<!-- Card content -->157
<div class="card-body card-body-cascade">158
159
<!-- Label -->160
<h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>161
<!-- Title -->162
<h4 class="font-weight-bold card-title">Cheat day inspirations</h4>163
<!-- Text -->164
<p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit165
laboriosam, nisi ut aliquid ex ea commodi.</p>166
<!-- Button -->167
<a class="btn btn-unique">Button</a>168
169
</div>170
171
</div>172
<!-- Card Narrower -->173
174
</div>175
<div class="col-md-4">176
<!-- Card Regular -->177
<div class="card card-cascade">178
179
<!-- Card image -->180
<div class="view view-cascade overlay">181
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap">182
<a>183
<div class="mask rgba-white-slight"></div>184
</a>185
</div>186
187
<!-- Card content -->188
<div class="card-body card-body-cascade text-center">189
190
<!-- Title -->191
<h4 class="card-title"><strong>Billy Coleman</strong></h4>192
<!-- Subtitle -->193
<h6 class="font-weight-bold indigo-text py-2">Web developer</h6>194
<!-- Text -->195
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,196
recusandae. Facere modi sunt, quod quibusdam.197
</p>198
199
<!-- Facebook -->200
<a type="button" class="btn-floating btn-small btn-fb"><i class="fab fa-facebook-f"></i></a>201
<!-- Twitter -->202
<a type="button" class="btn-floating btn-small btn-tw"><i class="fab fa-twitter"></i></a>203
<!-- Google + -->204
<a type="button" class="btn-floating btn-small btn-dribbble"><i class="fab fa-dribbble"></i></a>205
206
</div>207
208
</div>209
<!-- Card Regular -->210
</div>211
</div>212
<hr>213
<h4 class="text-center my-4">Gallery</h4>214
<div class="row">215
216
<!-- Grid row -->217
<div class="gallery my-3" id="gallery">218
219
<!-- Grid column -->220
<div class="mb-3 pics animation all 2">221
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg"222
alt="Card image cap">223
</div>224
<!-- Grid column -->225
226
<!-- Grid column -->227
<div class="mb-3 pics animation all 1">228
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg"229
alt="Card image cap">230
</div>231
<!-- Grid column -->232
233
<!-- Grid column -->234
<div class="mb-3 pics animation all 1">235
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain2.jpg"236
alt="Card image cap">237
</div>238
<!-- Grid column -->239
240
<!-- Grid column -->241
<div id="step-4" class="mb-3 pics animation all 2 tour st-4" title="Step four" data-index="3">242
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"243
alt="Card image cap">244
</div>245
<!-- Grid column -->246
247
<!-- Grid column -->248
<div class="mb-3 pics animation all 2">249
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"250
alt="Card image cap">251
</div>252
<!-- Grid column -->253
254
<!-- Grid column -->255
<div class="mb-3 pics animation all 1">256
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/mountain3.jpg"257
alt="Card image cap">258
</div>259
<!-- Grid column -->260
261
</div>262
<!-- Grid row -->263
</div>264
</div>265
</section>266
</main>267
xxxxxxxxxx1
.gallery {2
-webkit-column-count: 3;3
-moz-column-count: 3;4
column-count: 3;5
-webkit-column-width: 33%;6
-moz-column-width: 33%;7
column-width: 33%; }8
.gallery .pics {9
-webkit-transition: all 350ms ease;10
transition: all 350ms ease; }11
.gallery .animation {12
-webkit-transform: scale(1);13
-ms-transform: scale(1);14
transform: scale(1); }15
16
@media (max-width: 450px) {17
.gallery {18
-webkit-column-count: 1;19
-moz-column-count: 1;20
column-count: 1;21
-webkit-column-width: 100%;22
-moz-column-width: 100%;23
column-width: 100%;24
}25
}26
27
@media (max-width: 400px) {28
.btn.filter {29
padding-left: 1.1rem;30
padding-right: 1.1rem;31
}32
}33
34
xxxxxxxxxx1
$(function () {2
// Custom whitelist to allow for using HTML tags in popover content3
var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList4
myDefaultWhiteList.button = [];5
6
var stOne = "This is button wich allow you to start our Demo.";7
var stTwo = "Here you can find navbar wich allow to navigate via site";8
var stThree = "This is card panel. As you can see we have a lot of kind of cards.";9
var stFour = "Some pretty photo from our gallery";10
11
var comments = [stOne, stTwo, stThree, stFour];12
var elements = [13
".st-1",14
".st-2",15
".st-3",16
".st-4"17
]18
var $startDemo = $(".start-demo");19
20
var $popoverContent = $(".popover-content");21
var $tours = $(".tour");22
23
for (var i = 0; i < $tours.length; i++) {24
25
$popoverContent.eq(i).find(".popover-text").text(comments[i]);26
27
$tours.eq(i).popover({28
trigger: "manual",29
html: true,30
content: function () {31
var index = $(this).attr("data-index");32
var $el = $popoverContent.eq(index).html();33
return $el;34
}35
});36
}37
38
function giveListeners(index) {39
var $next = $(".next");40
var $prev = $(".prev");41
var $close = $(".close");42
43
$close.off("click").on("click", function () {44
$tours.popover("hide");45
});46
47
$next.off("click").on("click", function () {48
$(elements[index]).popover("hide");49
$(elements[index + 1]).popover("show");50
giveListeners(index + 1);51
smothScroll($(elements[index+1]));52
});53
54
$prev.off("click").on("click", function () {55
$(elements[index]).popover("hide");56
$(elements[index - 1]).popover("show");57
giveListeners(index - 1);58
smothScroll($(elements[index-1]));59
});60
}61
62
$startDemo.on("click", function () {63
$("body").scrollspy({ target: "#step-4" });64
$(elements[0]).popover("show");65
giveListeners(0);66
});67
68
69
var SMOOTH_SCROLL_DURATION = 600;70
71
function smothScroll($el) {72
$("body,html").stop();73
var elAttr = "#"+$el.attr('id');74
75
if (typeof elAttr !== typeof undefined && elAttr.indexOf('#') === 0) {76
var offset = $(this).attr('data-offset') ? $(this).attr('data-offset') : 0;77
var setHash = $(this).parentsUntil('.smooth-scroll').last().parent().attr('data-allow-hashes');78
$('body,html').animate({79
scrollTop: $(elAttr).offset().top - offset80
}, SMOOTH_SCROLL_DURATION);81
82
if (typeof setHash !== typeof undefined && setHash !== false) {83
history.replaceState(null, null, elAttr);84
}85
86
return false;87
}88
}89
90
}); Console errors: 0