<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"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#my_carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <ol class="carousel-indicators"> <li data-target="#my_carousel" data-slide-to="0" class="active"></li> <li data-target="#my_carousel" data-slide-to="1"></li> <li data-target="#my_carousel" data-slide-to="2"></li> <li data-target="#my_carousel" data-slide-to="3"></li> </ol> </div> <div class="pos-f-t"> <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <span class="navbar-text pl-3"><em><-- Navbar Component with Collapsed content toggleable via the navbar brand</em></span> </nav> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <div class="jumbotron"> <h1 class="display-4"><em>Jumbotron Component</em></h1> <p class="lead">There are links on this page on GitHub and Blogspot.</p> <hr class="my-4"> <div class="alert alert-danger alert-dismissible fade show" role="alert"> Press <strong>button</strong> below to show links in Modal window. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <p class="lead"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> Show Modal Component with Links </button> </p> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal Component title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <a href="https://sergeiki.github.io/bs0/" class="badge badge-danger">Visit this Bootstrap 4 Examples page on GitHub</a> <a href="http://sergeiki.blogspot.com/2017/12/bootstrap-v4-layout-content-components-utilities-examples.html" class="badge badge-warning">Visit this Bootstrap 4 Examples blog on Blogspot</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> </div> </div> <nav aria-label="breadcrumb" role="navigation"> <ol class="breadcrumb m-0"> <li class="breadcrumb-item"><a class="text-success" href="http://getbootstrap.com/">getbootstrap.com</a></li> <li class="breadcrumb-item"><a class="text-info" href="http://getbootstrap.com/docs/4.0/getting-started/introduction/">Documentation</a></li> <li class="breadcrumb-item active" aria-current="page">Components</li> <li class="breadcrumb-item active text-danger" aria-current="page"><-- <em>Breadcrumb Component</em></li> <li class="breadcrumb-item active text-danger" aria-current="page"><em> ^^ Carousel Component ^^ </em></li> </ol> </nav> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <p class="h2">Alert <span class="badge badge-danger"><em>Component</em></span> <-- <em class="h4">Danger Badge Component</em></p> <hr> This is a danger alert with <a href="https://github.com/sergeiki/bs0" class="alert-link">a link on my Bootstrap Example Source Code on GitHub</a> and <em>a dismiss button</em> --> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <button type="button" class="btn btn-outline-danger mb-2" disabled><em>Components: Button<br>with Tooltip or Popover --></em></button> <button type="button" class="btn btn-danger mb-2 btn_card active" id="btn_card1" name="Card1 is " data-toggle="popover" data-placement="bottom" title="Popover for Card1" data-content="Press the button for hide/show Card1" data-trigger="manual">Card1 is ON</button> <button type="button" class="btn btn-danger mb-2 btn_card" id="btn_card2" name="Card2-3 is ">Card2-3 is OFF</button> <button type="button" class="btn btn-danger mb-2 btn_card" id="btn_card4" name="Card4-5 is " data-toggle="tooltip" data-placement="top" title="Tooltip for Card4-5" data-trigger="hover">Card4-5 is OFF</button> <button type="button" class="btn btn-danger mb-2 btn_card" id="btn_card6" name="Card6 is ">Card6 is OFF</button> <button type="button" class="btn btn-danger mb-2 btn_card" id="btn_card7" name="Card7 is ">Card7 is OFF</button> <button type="button" class="btn btn-danger mb-2 btn_card" id="btn_card8" name="Card8 is ">Card8 is OFF</button> <button type="button" class="btn btn-danger mb-2 btn_card" id="btn_card9" name="Card9 is ">Card9 is OFF</button> <button type="button" class="btn btn-danger mb-2 btn_card" id="btn_card10" name="Card10 is " data-toggle="tooltip" data-placement="top" title="Tooltip for Card10" data-trigger="hover">Card10 is OFF</button> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> <div class="progress mb-2"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">Progress Component - 80%</div> </div> <div class="row mx-0"> <div class="card col-lg-3 col-sm-6 p-1 bg-light text-center" id="btn_card1_card"> <img class="card-img-top" src="https://sergeiki.github.io/bs0/img/card1.jpg" alt="Card image cap"> <div class="card-body" id="card1_radio_body"> <h4 class="card-title"><em>Card1 Component</em></h4> <p class="card-text">This card has a image cap, a title, a supporting text with align radios and a link in the footer and hasn't a subtitle and a header.</p> <p class="card-text text-danger"><em>Button group Component</em>:</p> <div class="btn-group btn-group-toggle btn-group-sm" data-toggle="buttons" role="group" aria-label="Button group Component"> <label class="btn btn-danger card1_radio" id="card1_radio1"> <input type="radio" name="card1_radios" autocomplete="off">Left </label> <label class="btn btn-danger card1_radio active" id="card1_radio2"> <input type="radio" name="card1_radios" checked autocomplete="off">Middle </label> <label class="btn btn-danger card1_radio" id="card1_radio3"> <input type="radio" name="card1_radios" autocomplete="off">Right </label> </div> </div> <div class="card-footer"> <a href="https://www.facebook.com/yogajournal.ru/videos/10156203268252069/" class="btn btn-danger">Source Photos</a> </div> </div> <div class="card col-lg-3 col-sm-6 p-1 bg-light text-center" id="btn_card2_card" style="display: none;"> <div class="card-body p-0" id="accordion24" role="tablist"> <div class="card"> <div class="card-header" role="tab" id="heading2"> <h5 class="mb-0"> <a data-toggle="collapse" href="#collapse2" aria-expanded="true" aria-controls="collapse2"> <em>Card2 Component</em> </a> </h5> </div> <div id="collapse2" class="collapse show" role="tabpanel" aria-labelledby="heading2" data-parent="#accordion24"> <img class="card-img-top" src="https://sergeiki.github.io/bs0/img/card2.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This card has a <em>Collapsible with bottom direction</em> header, a image cap, a supporting text and a link in the footer and hasn't a title and a subtitle.</p> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="heading3"> <h5 class="mb-0"> <a data-toggle="collapse" href="#collapse3" aria-expanded="true" aria-controls="collapse3"> <em>Card3 Component</em> </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="heading3" data-parent="#accordion24"> <img class="card-img-top" src="https://sergeiki.github.io/bs0/img/card3.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This card has a <em>Collapsible with bottom direction</em> header, a image cap, a supporting text and a link in the footer and hasn't a title and a subtitle.</p> </div> </div> </div> </div> <div class="card-footer"> <a href="https://www.facebook.com/yogajournal.ru/videos/10156203268252069/" class="btn btn-danger">Source Photos</a> </div> </div> <div class="card col-lg-3 col-sm-6 p-1 text-center" id="btn_card4_card" style="display: none;"> <div class="card-body p-0" id="accordion45" role="tablist"> <div class="card"> <div class="card-header" role="tab" id="heading"> <h5 class="mb-0"> <a data-toggle="collapse" href="#collapse4" aria-expanded="true" aria-controls="collapse4"> <em>Card4 Component</em> </a> </h5> </div> <div id="collapse4" class="collapse show" role="tabpanel" aria-labelledby="heading4" data-parent="#accordion45"> <img class="card-img-top" src="https://sergeiki.github.io/bs0/img/card4.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This card has a <em>Collapsible with bottom direction</em> header, a image cap, a supporting text and a link in the footer and hasn't a title and a subtitle.</p> </div> </div> </div> <div class="card"> <div id="collapse5" class="collapse" role="tabpanel" aria-labelledby="heading5" data-parent="#accordion45"> <img class="card-img-top" src="https://sergeiki.github.io/bs0/img/card5.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This card has a <em>Collapsible with bottom direction</em> header, a image cap, a supporting text and a link in the footer and hasn't a title and a subtitle.</p> </div> </div> <div class="card-header" role="tab" id="heading5"> <h5 class="mb-0"> <a data-toggle="collapse" href="#collapse5" aria-expanded="true" aria-controls="collapse5"> <em>Card5 Component</em> </a> </h5> </div> </div> </div> <div class="card-footer"> <a href="https://www.facebook.com/yogajournal.ru/videos/10156203268252069/" class="btn btn-danger">Source Photos</a> </div> </div> <div class="card col-lg-3 col-sm-6 p-1 text-center" id="btn_card6_card" style="display: none;"> <img class="card-img-top" src="https://sergeiki.github.io/bs0/img/card6.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card6 Component</h4> <p class="card-text">This card has a image cap, a title, a supporting text and a link in the footer and hasn't a subtitle and a header.</p> </div> <div class="card-footer"> <a href="https://www.facebook.com/yogajournal.ru/videos/10156203268252069/" class="btn btn-danger">Source Link</a> </div> </div> <div class="card col-lg-3 col-sm-6 p-1 text-center" id="btn_card7_card" style="display: none;"> <img class="card-img-top" src="https://sergeiki.github.io/bs0/img/card7.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card7 Component</h4> <p class="card-text">This card has a image cap, a title, a supporting text and a link in the footer and hasn't a subtitle and a header.</p> </div> <div class="card-footer"> <a href="https://www.facebook.com/yogajournal.ru/videos/10156203268252069/" class="btn btn-danger">Source Link</a> </div> </div> <div class="card col-lg-3 col-sm-6 p-1 text-center" id="btn_card8_card" style="display: none;"> <img class="card-img-top" src="https://sergeiki.github.io/bs0/img/card8.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card8 Component</h4> <p class="card-text">This card has a image cap, a title, a supporting text and a link in the footer and hasn't a subtitle and a header.</p> </div> <div class="card-footer"> <a href="https://www.facebook.com/yogajournal.ru/videos/10156203268252069/" class="btn btn-danger">Source Link</a> </div> </div> <div class="card col-lg-3 col-sm-6 p-1 text-center" id="btn_card9_card" style="display: none;"> <img class="card-img-top" src="https://sergeiki.github.io/bs0/img/card9.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card9 Component</h4> <p class="card-text">This card has a image cap, a title, a supporting text and a link in the footer and hasn't a subtitle and a header.</p> </div> <div class="card-footer"> <a href="https://www.facebook.com/yogajournal.ru/videos/10156203268252069/" class="btn btn-danger">Source Link</a> </div> </div> <div class="card col-lg-3 col-sm-6 p-1 text-center" id="btn_card10_card" style="display: none;"> <img class="card-img-top" src="https://sergeiki.github.io/bs0/img/card10.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card10 Component</h4> <p class="card-text">This card has a image cap, a title, a supporting text and a <em>Component Dropup Link</em> in the footer and hasn't a card subtitle and a card header.</p> </div> <div class="card-footer"> <div class="btn-group dropup"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Card10 Info </button> <div class="dropdown-menu"> <h6 class="dropdown-header"><em>Dropup Component</em></h6> <a class="dropdown-item disabled" href="https://www.facebook.com/yogajournal.ru/videos/10156203268252069/">Source Photo</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://www.facebook.com/yogajournal.ru/videos/10156203268252069/">Source Video</a> </div> </div> </div> </div> </div> <!-- class row mx-0 --> <div class="row mx-0 py-3"> <div id="list-example" class="list-group col-3"> <button class="list-group-item text-danger" disabled><em>List group & Badge Component</em></button> <a class="list-group-item list-group-item-action list-group-item-danger d-flex justify-content-between align-items-center" href="#list-item-1">Item 1 <span class="badge badge-danger badge-pill">11</span></a> <a class="list-group-item list-group-item-action list-group-item-danger d-flex justify-content-between align-items-center" href="#list-item-2">Item 2 <span class="badge badge-danger badge-pill">1</span></a> <a class="list-group-item list-group-item-action list-group-item-danger d-flex justify-content-between align-items-center" href="#list-item-3">Item 3 <span class="badge badge-danger badge-pill">5</span></a> </div> <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example col-9" style="position: relative;height: 200px;overflow: auto;"> <h5 id="list-item-1" class="text-danger"><em>Scrollspy Component</em> Item 1</h5> <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p> <h5 id="list-item-2" class="text-danger"><em>Scrollspy Component</em> Item 2</h5> <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p> <h5 id="list-item-3" class="text-danger"><em>Scrollspy Component</em> Item 3</h5> <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p> </div> </div> <!-- class row mx-0 --> </div>

$(".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 () { $('[data-toggle="popover"]').popover() }) $("#btn_card1").popover('toggle');