o2system-venus-ui

<!doctype html> <html lang="id"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>O2System Venus UI</title> <link href=".//venus-ui.css?34245cab1cc5178922cb" rel="stylesheet"><link href=".//venus-demo.css?34245cab1cc5178922cb" rel="stylesheet"></head> <body> <div class="demo"> <section class="banner bg-banner"> <div class="banner-0"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center text-light"> <img src="./assets/img/logo-venus-white.png?0931e310f1f2229b0059baa661d39606" alt="" height="200"> <h1 class="font-weight-bold my-3 text-uppercase">Venus User Interface Kit</h1> <h3>A beautiful Bootstrap 4 UI kit. Yours free.</h3> <h5>By O2System</h5> </div> </div> </div>  </div> </section> <section> <div class="container"> <div class="title"> <h2 class="font-weight-bold">Basic Elements</h2> </div> <h4>Buttons</h4> <h5>Pick Your Style</h5> <div class="row"> <div class="col-12"> <button type="button" class="btn btn-primary"> Default </button> <button type="button" class="btn btn-primary active"> Active </button> <button type="button" class="btn btn-primary disabled"> Disabled </button> <button type="button" class="btn btn-outline-primary"> Outline </button> <button type="button" class="btn btn-primary btn-round"> Round </button> <button type="button" class="btn btn-primary btn-icon"> With Icon <i class="fas fa-star"></i> </button> </div> </div> <h5>Pick Your Size</h5> <div class="row"> <div class="col-12"> <button type="button" class="btn btn-primary btn-xs"> Extra Small </button> <button type="button" class="btn btn-primary btn-sm"> Small </button> <button type="button" class="btn btn-primary btn-md"> Medium </button> <button type="button" class="btn btn-primary btn-lg"> Large </button> <button type="button" class="btn btn-primary btn-xl"> Extra Large </button> </div> </div> <h5>Pick Your Color</h5> <div class="row"> <div class="col-12"> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> </div> </div> <h5>Links</h5> <div class="row"> <div class="col-12"> <button type="button" class="btn btn-default btn-link">Default</button> <button type="button" class="btn btn-primary btn-link">Primary</button> <button type="button" class="btn btn-secondary btn-link">Secondary</button> <button type="button" class="btn btn-success btn-link">Success</button> <button type="button" class="btn btn-danger btn-link">Danger</button> <button type="button" class="btn btn-warning btn-link">Warning</button> <button type="button" class="btn btn-info btn-link">Info</button> <button type="button" class="btn btn-light btn-link">Light</button> <button type="button" class="btn btn-dark btn-link">Dark</button> </div> </div> </div> </section> <section> <div class="container"> <div class="title"> <h4>Input</h4> <h5>Form Controls</h5> <div class="row"> <div class="col-sm-6 col-lg-3"> <div class="form-group"> <input type="text" value="" placeholder="Regular" class="form-control"> </div> </div> <div class="col-sm-6 col-lg-3"> <div class="form-group has-success"> <label for="hasSuccess" class="sr-only"></label> <input type="text" value="Success" id="hasSuccess" class="form-control is-valid"> </div> </div> <div class="col-sm-6 col-lg-3"> <div class="form-group has-danger"> <label for="hasError" class="sr-only"></label> <input type="email" value="Error Input" id="hasError" class="form-control is-invalid"> </div> </div> <div class="col-sm-6 col-lg-3"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-user-circle"></i></span> </div> <input type="text" class="form-control" placeholder="Left Font Awesome Icon"> </div> </div> <div class="col-sm-6 col-lg-3"> <div class="input-group"> <input type="text" class="form-control" placeholder="Right Font Awesome Icon"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-user-circle"></i></span> </div> </div> </div> </div> <div class="row"> <div class="col-lg-3 col-sm-6"> <h5>Checkboxes</h5> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Unchecked</label> </div> </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck2" checked> <label class="custom-control-label" for="customCheck2">Checked</label> </div> </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck3" disabled> <label class="custom-control-label" for="customCheck3">Disabled Unchecked</label> </div> </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck4" checked disabled> <label class="custom-control-label" for="customCheck4">Disabled Checked</label> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <h5>Radios</h5> <div class="form-group"> <div class="custom-control custom-radio"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio1">Radio is off</label> </div> </div> <div class="form-group"> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" checked> <label class="custom-control-label" for="customRadio2">Radio is on</label> </div> </div> <div class="form-group"> <div class="custom-control custom-radio"> <input type="radio" id="customRadio3" name="customRadio-disabled" class="custom-control-input" disabled> <label class="custom-control-label" for="customRadio3">Disabled radio is off</label> </div> </div> <div class="form-group"> <div class="custom-control custom-radio"> <input type="radio" id="customRadio4" name="customRadio-disabled" class="custom-control-input" checked disabled> <label class="custom-control-label" for="customRadio4">Disabled radio is on</label> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <h5>Toggle Buttons</h5> <div class="row"> <div class="col-6"> <div class="form-group"> <div class="btn-switch"> <input type="checkbox" name="" id="customSwitch"> <label for="customSwitch"></label> </div> </div> <div class="form-group"> <div class="btn-switch btn-switch-primary"> <input type="checkbox" name="" id="customSwitchPrimary" checked> <label for="customSwitchPrimary"></label> </div> </div> <div class="form-group"> <div class="btn-switch btn-switch-secondary"> <input type="checkbox" name="" id="customSwitchSecondary" checked> <label for="customSwitchSecondary"></label> </div> </div> </div> <div class="col-6"> <div class="form-group"> <div class="btn-switch btn-switch-success"> <input type="checkbox" name="" id="customSwitchsuccess" checked> <label for="customSwitchsuccess"></label> </div> </div> <div class="form-group"> <div class="btn-switch btn-switch-danger"> <input type="checkbox" name="" id="customSwitchdanger" checked> <label for="customSwitchdanger"></label> </div> </div> <div class="form-group"> <div class="btn-switch btn-switch-info"> <input type="checkbox" name="" id="customSwitchinfo" checked> <label for="customSwitchinfo"></label> </div> </div> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <h5>Sliders</h5> <div class="form-group"> <label for="customRange1" class="sr-only">Custom Range</label> <input type="range" class="custom-range" id="customRange1"> </div> </div> </div> </div> </div> </section> <section class="pb-0"> <div class="container"> <div class="row"> <div class="col-lg-6"> <h4 class="mb-4">Menu</h4> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="#">Menu</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarPrimary" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarPrimary"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </div> </nav> </div> <div class="col-lg-6"> <h4 class="mb-4">Menu with Icon</h4> <nav class="navbar navbar-expand-lg navbar-dark bg-success"> <div class="container"> <a class="navbar-brand" href="#">Icons</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu-icon" aria-controls="navbar-menu-icon" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-menu-icon"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#"><i class="fas fa-home"></i> <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-user"></i></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarPrimary" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-cog"></i> </a> <div class="dropdown-menu" aria-labelledby="navbarPrimary"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#"><i class="fas fa-power-off"></i></a> </li> </ul> </div> </div> </nav> </div> </div> </div> </section> <section> <div class="container"> <h4>Navigations</h4> </div> <div class="demo-navigations bg-clean"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="#">Primary Color</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-1"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarPrimary" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarPrimary"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> </nav> <nav class="navbar navbar-expand-lg navbar-dark bg-success"> <div class="container"> <a class="navbar-brand" href="#">Success Color</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-3" aria-controls="navbar-3" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-3"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarSuccess" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarSuccess"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> </nav> <nav class="navbar navbar-expand-lg navbar-dark bg-info"> <div class="container"> <a class="navbar-brand" href="#">Info Color</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-2" aria-controls="navbar-2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-2"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarInfo" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarInfo"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> </nav> <nav class="navbar navbar-expand-lg navbar-dark bg-warning"> <div class="container"> <a class="navbar-brand" href="#">Warning Color</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-4" aria-controls="navbar-4" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-4"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarWarning" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarWarning"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> </nav> <nav class="navbar navbar-expand-lg navbar-dark bg-danger"> <div class="container"> <a class="navbar-brand" href="#">Danger Color</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-5" aria-controls="navbar-5" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-5"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDanger" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDanger"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> </nav> <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container"> <a class="navbar-brand" href="#">Transparent</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-6" aria-controls="navbar-6" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-6"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> </nav> </div> </section> <section> <div class="container"> <h4>Cards</h4> <div class="row"> <div class="col-lg-6"> <h5>Card with Badges</h5> <div class="row"> <div class="col-lg-6"> <div class="card"> <img src="./assets/img/bg-venus-clean-2.jpg?0cd108ae61c4248151a415dac4da888f" alt="Card custom with badges" class="img-fluid card-img-top"> <div class="card-badge"> <div class="card-badge-container left"> <span class="badge badge-default"> Left </span> </div> <div class="card-badge-container right"> <span class="badge badge-success"> Right </span> </div> </div> <div class="card-body"> <h3 class="card-title"> Card with Badges </h3> <h6 class="card-subtitle"> Card badges on left and right </h6> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content for card 4. </p> <a href="#" class="card-link"> Card link </a> <a href="#" class="card-link"> Another card link </a> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <img src="./assets/img/bg-venus-clean-2.jpg?0cd108ae61c4248151a415dac4da888f" alt="Card custom with badges" class="img-fluid card-img-top"> <div class="card-badge"> <div class="card-badge-container inline"> <span class="badge badge-default"> Default </span> <span class="badge badge-primary"> Primary </span> <span class="badge badge-success"> Success </span> <span class="badge badge-info"> Info </span> <span class="badge badge-warning"> Warning </span> <span class="badge badge-danger"> Danger </span> </div> </div> <div class="card-body"> <h3 class="card-title"> Card with Badges </h3> <h6 class="card-subtitle"> Card badges on left and right </h6> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content for card 4. </p> <a href="#" class="card-link"> Card link </a> <a href="#" class="card-link"> Another card link </a> </div> </div> </div> </div> </div> <div class="col-lg-6"> <h5>Card with Ribbons</h5> <div class="row"> <div class="col-lg-6"> <div class="card"> <div class="card-ribbon"> <div class="card-ribbon-container left"> <span class="ribbon ribbon-primary"> Left </span> </div> <div class="card-ribbon-container right"> <span class="ribbon ribbon-success"> Right </span> </div> </div> <img src="./assets/img/bg-venus-clean-2.jpg?0cd108ae61c4248151a415dac4da888f" alt="Card custom with badges" class="img-fluid card-img-top"> <div class="card-body"> <h3 class="card-title"> Card with Ribbons </h3> <h6 class="card-subtitle"> Card badges on left and right </h6> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content for card 4. </p> <a href="#" class="card-link"> Card link </a> <a href="#" class="card-link"> Another card link </a> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-ribbon"> <div class="card-ribbon-container left"> <span class="ribbon ribbon-info"> Info </span> </div> <div class="card-ribbon-container right"> <span class="ribbon ribbon-danger"> Danger </span> </div> </div> <img src="./assets/img/bg-venus-clean-2.jpg?0cd108ae61c4248151a415dac4da888f" alt="Card custom with badges" class="img-fluid card-img-top"> <div class="card-body"> <h3 class="card-title"> Card with Ribbons </h3> <h6 class="card-subtitle"> Card badges on left and right </h6> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content for card 4. </p> <a href="#" class="card-link"> Card link </a> <a href="#" class="card-link"> Another card link </a> </div> </div> </div> </div> </div> </div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-lg-6"> <h4>Progress Bars</h4> <h5>Primary</h5> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <h5>Success</h5> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div> </div> <h5>Info</h5> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> </div> <h5>Warning</h5> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> </div> <h5>Danger</h5> <div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div> </div> </div> <div class="col-lg-6"> <h4 class="mb-5">Paginations</h4> <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">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">Next</span> </a> </li> </ul> </nav> <nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">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="#">Next</a> </li> </ul> </nav> <h4 class="mb-4">Badges</h4> <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> </div> </div> </div> </section> <section> <div class="container"> <h4>Tabs</h4> <div class="row"> <div class="col-md-6"> <h5>Tabs Standard</h5> <ul class="nav nav-tabs tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home1" role="tab">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile1" role="tab">Profile</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages1" role="tab">Messages</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings1" role="tab">Settings</a> </li> </ul> <div class="tab-content tabs"> <div class="tab-pane active" id="home1" role="tabpanel"> <p>1. This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean mas Cum sociis natoque penatibus et magnis dis.....</p> </div> <div class="tab-pane" id="profile1" role="tabpanel"> <p>2.Cras consequat in enim ut efficitur. Nulla posuere elit quis auctor interdu