"Alert Badge Breadcrumb Buttons Card Carousel Collapse Dropdown Jumbotron Lists Modal Navbar Progress Scrollspy"
Bootstrap 4.0.0 Snippet by sergeiki

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/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2 class="text-center">Bootstrap v4 · Layout Content Components Utilities · Examples</h2>
<div id="my_carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://sergeiki.github.io/bs0/img/slide1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block text-right">
<h5><a class="text-success" href="https://www.flickr.com/photos/ittfworld/collections/72157690129937915/">Source Photos:<br>2017<br>World Junior<br>Table Tennis<br>Championships</a></h5>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://sergeiki.github.io/bs0/img/slide2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block text-left">
<h5><a class="text-warning" href="https://www.flickr.com/photos/ittfworld/collections/72157690129937915/">Source Photos:<br>2017<br>World Junior<br>Table Tennis<br>Championships</a></h5>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://sergeiki.github.io/bs0/img/slide3.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block text-left">
<h5><a class="text-info" href="https://www.flickr.com/photos/ittfworld/collections/72157690129937915/">Source Photos:<br>2017 World Junior<br>Table Tennis Championships</a></h5>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://sergeiki.github.io/bs0/img/slide4.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5><a class="text-danger" href="https://www.flickr.com/photos/ittfworld/collections/72157690129937915/">Source Photos:<br>2017<br>World Junior<br>Table Tennis<br>Championships</a></h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#my_carousel" role="button" data-slide="prev">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
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
$(".btn_card").on("click", function() {
var card = "#" + $(this).attr("id") + "_card";
if ($(this).hasClass("active")) {
$(card).hide();
$(this).text($(this).attr("name") + "OFF");
} else {
$(card).show();
$(this).text($(this).attr("name") + "ON");
}
$(this).button('toggle');
if ($(this).attr("data-toggle") == "popover") {
$(this).popover('toggle');
}
})
$(".card1_radio").on("click", function() {
var card_body = "#btn_card1_card";
$(card_body).removeClass("text-left text-center text-right");
switch ($(this).attr("id")) {
case "card1_radio1": $(card_body).toggleClass("text-left"); break;
case "card1_radio2": $(card_body).toggleClass("text-center"); break;
case "card1_radio3": $(card_body).toggleClass("text-right"); break;
}
})
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
$(function () {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: