<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page</title>
</head>
<body class="bg-light">
<header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark" style="background-color: #E91E63 !important;">
<a class="navbar-brand" href="#">
<img src="" class="d-none logo-img d-xs-block d-sm-none d-md-none d-xl-block" />
<img src="" class="d-block d-xs-none d-sm-block d-xl-none d-md-block" />
</a>
<ul class="navbar-nav mr-auto d-none d-xl-block d-sm-block d-md-block d-xl-block">
<li class=" nav-item">
<a class="nav-link"><h6 class="text-white"> POLITICAL SCIENCE and INTERNATIONAL RELATIONS </h6></a>
</li>
</ul>
<span class="navbar-text d-block d-xl-block d-md-block d-sm-block">
<a class="text-white username">Mr Ali Ahmet Khan</a>
</span>
<a class="p-3"><small class="timercss">00:00:00</small> </a>
</nav>
</header>
<main role="main">
<div class="album py-2 bg-light">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="shadow p-3 mb-1 bg-white rounded" style="border-left: 5px solid #4CAF50">
<p>Bootstrap provides three types of form layouts:</p>
<ul>
<li>Vertical form (this is default)</li>
<li>Horizontal form</li>
<li>Horizontal form</li>
</ul>
<p>Standard rules for all three form layouts:</p>
<p>Bootstrap provides three types of form layouts:</p>
<ul>
<li>Vertical form (this is default)</li>
<li>Horizontal form</li>
<li>Horizontal form</li>
</ul>
<p>Standard rules for all three form layouts:</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="shadow pt-2 mb-2 bg-white rounded" style="border-left: 5px solid #2196F3">
<div class="row">
<div class="col-md-12">
<div class="card" style="margin:10px 0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<label class="checkboxRadio">
<input name="g" type="radio" />
<span class="primary"></span>
</label>
Bootstrap Radio Primary
</li>
<li class="list-group-item">
<label class="checkboxRadio">
<input name="g" type="radio" />
<span class="primary"></span>
</label>
Bootstrap Radio Primary
</li>
<li class="list-group-item">
<label class="checkboxRadio">
<input name="g" type="radio" />
<span class="primary"></span>
</label>
Bootstrap Radio Primary
</li>
<li class="list-group-item">
<label class="checkboxRadio">
<input name="g" type="radio" />
<span class="primary"></span>
</label>
Bootstrap Radio Primary
</li>
<li class="list-group-item">
<label class="checkboxRadio">
<input name="g" type="radio" />
<span class="primary"></span>
</label>
Bootstrap Radio Primary
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="nav-scroller py-1 mb-2 p-3">
<div class=" nav d-flex dataTables_paginate paging_simple_numbers ">
<ul class="pagination pagination-md flex-sm-wra">
<li class="paginate_button page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="paginate_button page-item active"><a class="page-link" href="#">1</a></li>
<li class="paginate_button page-item not-select"><a class="page-link" href="#">2</a></li>
<li class="paginate_button page-item"><a class="page-link">3</a></li>
<li class="paginate_button page-item "><a class="page-link">4</a></li>
<li class="paginate_button page-item"><a class="page-link" href="#">5</a></li>
<li class="paginate_button page-item"><a class="page-link" href="#">6</a></li>
<li class="paginate_button page-item"><a class="page-link" href="#">7</a></li>
<li class="paginate_button page-item"><a class="page-link" href="#">8</a></li>
<li class="paginate_button page-item"><a class="page-link" href="#">9</a></li>
<li class="paginate_button page-item"><a class="page-link" href="#">10</a></li>
<li class="paginate_button page-item"><a class="page-link" href="#">11</a></li>
<li class="paginate_button page-item"><a class="page-link" href="#">12</a></li>
<li class="paginate_button page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer text-muted p-1 mt-5 bg-dark" style="background-color: #020d26 !important; ">
<div class="container">
<p class="text-white">@170 - © IAU </p>
</div>
</footer>
</body>
</html>
.pagination .page-item .page-link:hover {
background-color: #eee;
border-radius: .125rem;
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.pagination .page-item.active .page-link {
color: #fff;
background-color: #4285f4;
border-radius: .125rem;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
.pagination .page-item.not-select .page-link {
color: #fff;
background-color: #F4511E;
border-radius: .125rem;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
.pagination .page-item .page-link {
font-size: .9rem;
color: #212529;
background-color: #776e6e2b;
border: 0;
margin-left: 4px;
outline: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
margin-bottom: 15px;
}
.page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.page-link {
position: relative;
display: block;
padding: .5rem .75rem;
line-height: 1.25;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
}
.logo-area {
background-repeat: no-repeat;
}
.logo-area {
width: 260px;
display: block;
min-height: 60px;
float: right;
}
.navbar {
padding: .3rem 0.3rem !important;
}
/*radio button css*/
@keyframes check {0% {height: 0;width: 0;}
25% {height: 0;width: 10px;}
50% {height: 20px;width: 10px;}
}
.checkboxRadio{
background-color:#fff;
display:inline-block;
height:28px;
margin:0 .25em;
width:28px;
border-radius:4px;
border:1px solid #ccc;
float:left
}
.checkboxRadio span{
display:block;
height:28px;
position:relative;
width:28px;
padding:0
}
.checkboxRadio span:after{
-moz-transform:scaleX(-1) rotate(135deg);
-ms-transform:scaleX(-1) rotate(135deg);
-webkit-transform:scaleX(-1) rotate(135deg);
transform:scaleX(-1) rotate(135deg);
-moz-transform-origin:left top;
-ms-transform-origin:left top;
-webkit-transform-origin:left top;
transform-origin:left top;
border-right:4px solid #fff;
border-top:4px solid #fff;
content:'';
display:block;
height:20px;
left:3px;
position:absolute;
top:15px;
width:10px
}
.checkboxRadio span:hover:after{
border-color:#999
}
.checkboxRadio input{
display:none
}
.checkboxRadio input:checked + span:after{
-webkit-animation:check .8s;
-moz-animation:check .8s;
-o-animation:check .8s;
animation:check .8s;
border-color:#555
}
.checkboxRadio input:checked + .default:after{
border-color:#444
}
.checkboxRadio input:checked + .primary:after{
border-color:#2196F3
}
.timercss{
font-size: 25px;
font-family: cursive;
color: #FFEB3B !important;
}
.list-group-item {
padding: .45rem 1rem;
}
.list-group-flush label {
margin-bottom: .0rem !important;
}
.pagination {
display: -ms-flexbox;
flex-wrap: wrap;
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.btn-circle.btn-lg {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
.btn-success1 {
color: #525252;
background-color: #e4e4e4;
border-color: #9a9a9a;
}
.username {
font-weight: 500;
}
.profile-block{
margin:5px auto;
position:relative;
overflow:hidden;
}
.profile-block .nav > li > a {
background: #e7e7e7;
border-radius: 0;
color: #000;
display: block;
font-size: 14px;
padding: 6px 18px;
position: relative;
text-align: left;
text-decoration: none;
}
.profile-block ul > li > a > i {
color: #000;
font-size: 16px;
padding-right: 10px;
}
.profile-block ul > li > a:hover,
.profile-block ul > li > a:focus,
.profile-block ul li.active a {
background: #fff !important;
border-radius: 0;
color: #000 !important;
}
li.paginate_button.page-item {
z-index: 0;
}
