bootstrap-reverse

<!doctype html> <html lang="en" dir="rtl"> <head> <title>JavaTMP - Java Bootstrap Admin and Dashboard Template</title>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">  <link href="../dist/bootstrap-reverse.min.css" rel="stylesheet"/> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col"> <h1 locale-key="alerts-header1">Alerts</h1> <div class="alert alert-primary alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="alert-heading" locale-key="alert-heading">Well done!</h4> <a href="#" class="alert-link" locale-key="alert-link">an example link</a> <p locale-key="fake-paragraph">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0" locale-key="fake-paragraph">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-secondary alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="alert-heading" locale-key="alert-heading">Well done!</h4> <a href="#" class="alert-link" locale-key="alert-link">an example link</a> <p locale-key="fake-paragraph">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0" locale-key="fake-paragraph">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-success alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="alert-heading" locale-key="alert-heading">Well done!</h4> <a href="#" class="alert-link" locale-key="alert-link">an example link</a> <p locale-key="fake-paragraph">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0" locale-key="fake-paragraph">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="alert-heading" locale-key="alert-heading">Well done!</h4> <a href="#" class="alert-link" locale-key="alert-link">an example link</a> <p locale-key="fake-paragraph">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0" locale-key="fake-paragraph">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="alert-heading" locale-key="alert-heading">Well done!</h4> <a href="#" class="alert-link" locale-key="alert-link">an example link</a> <p locale-key="fake-paragraph">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0" locale-key="fake-paragraph">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-info alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="alert-heading" locale-key="alert-heading">Well done!</h4> <a href="#" class="alert-link" locale-key="alert-link">an example link</a> <p locale-key="fake-paragraph">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0" locale-key="fake-paragraph">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-light alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="alert-heading" locale-key="alert-heading">Well done!</h4> <a href="#" class="alert-link" locale-key="alert-link">an example link</a> <p locale-key="fake-paragraph">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0" locale-key="fake-paragraph">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-dark alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="alert-heading" locale-key="alert-heading">Well done!</h4> <a href="#" class="alert-link" locale-key="alert-link">an example link</a> <p locale-key="fake-paragraph">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0" locale-key="fake-paragraph">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <hr/> <h1 locale-key="Badges">Badges</h1> <h1><span locale-key="Example-heading">Example heading </span><span class="badge badge-secondary" locale-key="New-label">New</span></h1> <h2><span locale-key="Example-heading">Example heading </span><span class="badge badge-secondary" locale-key="New-label">New</span></h2> <h3><span locale-key="Example-heading">Example heading </span><span class="badge badge-secondary" locale-key="New-label">New</span></h3> <h4><span locale-key="Example-heading">Example heading </span><span class="badge badge-secondary" locale-key="New-label">New</span></h4> <h5><span locale-key="Example-heading">Example heading </span><span class="badge badge-secondary" locale-key="New-label">New</span></h5> <h6><span locale-key="Example-heading">Example heading </span><span class="badge badge-secondary" locale-key="New-label">New</span></h6> <h4 class="card-title text-primary" locale-key="Badges-desc-for-button">Badges can be used as part of links or buttons to provide a counter</h4> <button type="button" class="btn btn-primary"> <span locale-key="Notifications-label">Notifications </span><span class="badge badge-light">4</span> </button> <h4 class="card-title text-primary" locale-key="Contextual-variations-label">Contextual variations</h4> <span class="badge badge-primary" locale-key="primary-label">Primary</span> <span class="badge badge-secondary" locale-key="secondary-label">Secondary</span> <span class="badge badge-success" locale-key="success-label">Success</span> <span class="badge badge-danger" locale-key="danger-label">Danger</span> <span class="badge badge-warning" locale-key="warning-label">Warning</span> <span class="badge badge-info" locale-key="info-label">Info</span> <span class="badge badge-light" locale-key="light-label">Light</span> <span class="badge badge-dark" locale-key="dark-label">Dark</span> <h4 class="card-title text-primary" locale-key="Pill-badges-card-title">Pill badges</h4> <span class="badge badge-pill badge-primary" locale-key="primary-label">Primary</span> <span class="badge badge-pill badge-secondary" locale-key="secondary-label">Secondary</span> <span class="badge badge-pill badge-success" locale-key="success-label">Success</span> <span class="badge badge-pill badge-danger" locale-key="danger-label">Danger</span> <span class="badge badge-pill badge-warning" locale-key="warning-label">Warning</span> <span class="badge badge-pill badge-info" locale-key="info-label">Info</span> <span class="badge badge-pill badge-light" locale-key="light-label">Light</span> <span class="badge badge-pill badge-dark" locale-key="dark-label">Dark</span> <h4 class="card-title text-primary" locale-key="badge-link-label">Links</h4> <a href="#" class="badge badge-primary" locale-key="primary-label">Primary</a> <a href="#" class="badge badge-secondary" locale-key="secondary-label">Secondary</a> <a href="#" class="badge badge-success" locale-key="success-label">Success</a> <a href="#" class="badge badge-danger" locale-key="danger-label">Danger</a> <a href="#" class="badge badge-warning" locale-key="warning-label">Warning</a> <a href="#" class="badge badge-info" locale-key="info-label">Info</a> <a href="#" class="badge badge-light" locale-key="light-label">Light</a> <a href="#" class="badge badge-dark" locale-key="dark-label">Dark</a> <hr/> <h1 locale-key="Breadcrumb-label">Breadcrumb</h1> <nav aria-label="breadcrumb" role="navigation"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page" locale-key="Breadcrumb-Home-label">Home</li> </ol> </nav> <nav aria-label="breadcrumb" role="navigation"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#" locale-key="Breadcrumb-Home-label">Home</a></li> <li class="breadcrumb-item active" aria-current="page" locale-key="Breadcrumb-Library-label">Library</li> </ol> </nav> <nav aria-label="breadcrumb" role="navigation"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#" locale-key="Breadcrumb-Home-label">Home</a></li> <li class="breadcrumb-item"><a href="#" locale-key="Breadcrumb-Library-label">Library</a></li> <li class="breadcrumb-item active" aria-current="page" locale-key="Breadcrumb-Data-label">Data</li> </ol> </nav> <hr/> <h1 locale-key="Images-label">Images</h1> <img class="img-fluid" alt="" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22895%22%20height%3D%22250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20895%20250%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ffe2029c2%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A45pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ffe2029c2%22%3E%3Crect%20width%3D%22895%22%20height%3D%22250%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22332.3984375%22%20y%3D%22145.15625%22%3E895x250%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"> <h4 class="card-title text-primary" locale-key="Image-thumbnails-label">Image thumbnails</h4> <img class="img-thumbnail" alt="" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ffe1d78b5%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ffe1d78b5%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.4390625%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"> <h4 class="card-title text-primary" locale-key="Aligning-images-label">Aligning images</h4> <div class="clearfix"> <img class="rounded float-left" alt="" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ffe1d78b7%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ffe1d78b7%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.4390625%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"> <img class="rounded float-right" alt="" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ffe1d78b9%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ffe1d78b9%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.4390625%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"> </div> <div class="text-center clearfix"> <img class="rounded" alt="" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ffe2b19fd%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ffe2b19fd%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.4390625%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"> </div> <h4 class="card-title text-primary" locale-key="Figures-label">Figures</h4> <figure class="figure"> <img class="figure-img img-fluid rounded" alt="" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22400%22%20height%3D%22300%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ffe2e7695%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A20pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ffe2e7695%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22148.8515625%22%20y%3D%22158.878125%22%3E400x300%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"> <figcaption class="figure-caption" locale-key="caption-label">A caption for the above image.</figcaption> <figcaption class="figure-caption text-right" locale-key="caption-label">A caption for the above image.</figcaption> <figcaption class="figure-caption text-center" locale-key="caption-label">A caption for the above image.</figcaption> </figure> <hr/> <h1 locale-key="Collapse-label">Collapse</h1> <p> <a locale-key="link-with-href-label" class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button locale-key="button-with-data-target-label" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body" locale-key="fake-paragraph"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> <h4 class="text-primary" locale-key="Accordion-label">Accordion example</h4> <div id="accordion" role="tablist"> <div class="card"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> <a locale-key="Accordion-item1-label" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> </div> <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion"> <div locale-key="fake-paragraph" class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingTwo"> <h5 class="mb-0"> <a locale-key="Accordion-item2-label" class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> </div> <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"> <div locale-key="fake-paragraph" class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a locale-key="Accordion-item3-label" class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> </div> <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"> <div locale-key="fake-paragraph" class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> <h4 class="text-primary" locale-key="Custom-markup-accordions">Custom markup accordions</h4> <div id="exampleAccordion" data-children=".item"> <div class="item"> <a locale-key="Accordion-item1-label" data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1"> Toggle item </a> <div id="exampleAccordion1" class="collapse show" role="tabpanel"> <p class="mb-3" locale-key="fake-paragraph"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare. </p> </div> </div> <div class="item"> <a locale-key="Accordion-item2-label" data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" aria-expanded="false" aria-controls="exampleAccordion2"> Toggle item 2 </a> <div id="exampleAccordion2" class="collapse" role="tabpanel"> <p class="mb-3" locale-key="fake-paragraph"> Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> </div> </div> </div> <hr/> <h1 locale-key="Jumbotron-label">Jumbotron</h1> <div class="jumbotron"> <h1 class="display-3" locale-key="hello-label">Hello, world!</h1> <p class="lead" locale-key="fake-paragraph">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p locale-key="fake-paragraph">It uses utility classes for typography and spacing to space content out within the larger container.</p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button" locale-key="learn-more-label">Learn more</a> </p> </div> <h4 class="card-title text-primary" locale-key="Fluid-Width-label">Fluid Width</h4> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-3" locale-key="Fluid-Width-label">Fluid jumbotron</h1> <p class="lead" locale-key="fake-paragraph">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> <hr/> <h1 locale-key="Pagination-label">Pagination</h1> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#" locale-key="previous-label">Previous</a></li> <li class="page-item"><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="#"locale-key="next-label">Next</a></li> </ul> </nav> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only" locale-key="previous-label">Previous</span> </a> </li> <li class="page-item"><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="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only" locale-key="next-label">Next</span> </a> </li> </ul> </nav> <nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" locale-key="previous-label">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" locale-key="next-label">Next</a> </li> </ul> </nav> <nav aria-label="..."> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" locale-key="previous-label">Previous</a> </li> <li class="page-item"><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="#" locale-key="next-label">Next</a> </li> </ul> </nav> <nav aria-label="..."> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" locale-key="previous-label">Previous</a> </li> <li class="page-item"><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="#" locale-key="next-label">Next</a> </li> </ul> </nav> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" locale-key="previous-label">Previous</a> </li> <li class="page-item"><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="#" locale-key="next-label">Next</a> </li> </ul> </nav> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" locale-key="previous-label">Previous</a> </li> <li class="page-item"><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="#" locale-key="next-label">Next</a> </li> </ul> </nav> <hr/> <h1>Popovers</h1> <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> <h4 class="card-title text-primary">Dismiss on next click</h4> <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> <hr/> <h1>Progress</h1> <div class="progress mt-3"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <h4 class="card-title text-primary">Using <code>w-75</code></h4> <div class="progress mt-3"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <h4 class="card-title text-primary">Labels</h4> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <h4 class="card-title text-primary">Height</h4> <div class="progress mt-3" style="height: 1px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <h4 class="card-title text-primary">Backgrounds</h4> <div class="progress mt-3"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <h4 class="card-title text-primary">Multiple bars</h4> <div class="progress mt-3"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div> <h4 class="card-title text-primary">Striped</h4> <div class="progress mt-3"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress mt-3"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <h4 class="card-title text-primary">Animated stripes</h4> <div class="progress mt-3"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> <hr/> <h1>Tooltips</h1> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button> <h4 class="card-title text-primary">Custom HTML</h4> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML </button> <hr/> <h1>Bootstrap Grid</h1> <div class="color-col card my-3"> <div class="card-header"> Grid options </div> <div class="card-body"> <table class="table table-bordered table-striped"> <thead> <tr> <th></th> <th class="text-center"> Extra small<br> <small><576px</small> </th> <th class="text-center"> Small<br> <small>≥576px</small> </th> <th class="text-center"> Medium<br> <small>≥768px</small> </th> <th class="text-center"> Large<br> <small>≥992px</small> </th> <th class="text-center"> Extra large<br> <small>≥1200px</small> </th> </tr> </thead> <tbody> <tr> <th class="text-nowrap" scope="row">Max container width</th> <td>None (auto)</td> <td>540px</td> <td>720px</td> <td>960px</td> <td>1140px</td> </tr> <tr> <th class="text-nowrap" scope="row">Class prefix</th> <td><code>.col-</code></td> <td><code>.col-sm-</code></td> <td><code>.col-md-</code></td> <td><code>.col-lg-</code></td> <td><code>.col-xl-</code></td> </tr> <tr> <th class="text-nowrap" scope="row"># of columns</th> <td colspan="5">12</td> </tr> <tr> <th class="text-nowrap" scope="row">Gutter width</th> <td colspan="5">30px (15px on each side of a column)</td> </tr> <tr> <th class="text-nowrap" scope="row">Nestable</th> <td colspan="5">Yes</td> </tr> <tr> <th class="text-nowrap" scope="row">Column ordering</th> <td colspan="5">Yes</td> </tr> </tbody> </table> </div> </div> <div class="color-col card my-3"> <div class="card-header"> three equal-width columns on small, medium, large, and extra large devices </div> <div class="card-body"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> </div> </div> </div> <div class="color-col card my-3"> <div class="card-header"> Auto-layout columns