Bootstrap Snippet Aryana using HTML CSS Bootstrap

"Aryana"
Bootstrap 3.3.0 Snippet by ajeetaryan

3.3.0

607 0 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  <!DOCTYPE html>  <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="style.css" rel="stylesheet" id="bootstrap-css"> <style> div.header{ height: 60px; border-bottom: 1px solid #ddd; } div.footer{ height:60px; width: 100%; position: fixed; background: #fff; bottom: 0; border-top: 1px solid #ddd; } html, body{height:100%; margin:0;padding:0} .container-fluid{ height:90%; display:table; width: 100%; padding: 0; } .row-fluid {height: 100%; display:table-cell; vertical-align: middle;} ul.num_btn{display: block;margin: 0;padding: 0;list-style: none;max-height: 300px;overflow-y: auto} ul.num_btn li{display: inline-block;float: left;width: 20%;} ul.num_btn li a{display: block;min-width: 40px;height: 40px;text-align: center;line-height: 40px;border: 1px solid #ddd;margin: 1px} .btn-info{ background: #3dbe8b; background: -webkit-linear-gradient(#43c692,#39b885); background: linear-gradient(#43c692,#39b885); border-radius: 4px; border: 1px solid #1f7c57; box-shadow: inset #4fd3aa 0 1px; color: #fff; position: relative; text-shadow: #1c8f3d 0 1px 0; -webkit-transition: background 150ms; transition: background 150ms; } </style> </head> <body> <div class="header"> sdfs </div> <div class="container-fluid"> <div class="row-fluid"> <div class="centering text-center"> <div class="container" style="text-align: left;"> <div class="row"> <div class="col-md-8"> <h4>Question will be appear here</h4> <hr> <ul class="list-group" style="border: none;border-radius: 0;"> <li class="list-group-item"> <div class="checkbox"> <input type="radio" name="answer" id="checkbox2" /> <label for="checkbox2"> List group item heading 1 </label> </div> </li> <li class="list-group-item"> <div class="checkbox"> <input type="radio" name="answer" id="checkbox3" /> <label for="checkbox3"> List group item heading 2 </label> </div> </li> <li class="list-group-item"> <div class="checkbox"> <input type="radio" name="answer" id="checkbox4" /> <label for="checkbox4"> List group item heading 3 </label> </div> </li> <li class="list-group-item"> <div class="checkbox"> <input type="radio" name="answer" id="checkbox5" /> <label for="checkbox5"> List group item heading 4 </label> </div> </li> </ul> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <div style="width:75px;height:75px;border:2px solid #ddd;border-radius: 100%;margin: 10px auto"></div> <h4 class="text-center">Name _here <small>125458</small></h4> <hr> <p>Start Time : </p> <p>End Time :</p> </div> <div class="panel-body" style="padding: 0"> <p style="margin: 0;padding: 10px;border-bottom: 1px solid #ddd"><strong>Question List</strong></p> <ul class="num_btn"> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">125</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">125</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">125</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">125</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> <li><a href="">1</a></li> </ul> <p style="margin: 0;padding: 10px;border-top: 1px solid #ddd"> <label class="label label-default">Not attempted</label> <label class="label label-success">Attempted</label> <label class="label label-danger">Bookmark</label> </p> </div> <div class="panel-footer" style="padding: 0;overflow: hidden"> <button type="submit" class="btn btn-info btn-lg btn-block" style="border-radius: 0">Read Instructions</button> </div> </div> </div> </div> </div> </div> </div> </div> <div class="footer"> Thanks and Regards Ajeet Singh -------------------------------------------------------------------------------------------------------- Project Leader | APV India Pvt. Ltd. Ph.: +91-91298-61333 | E-mail: ajeet.singh@apvtechnologies.com | Skype: er.ajeet@live.com www.apvtechnologies.com </div> </body> </html>

.btn-info:hover { background:#2baa78; background:-webkit-linear-gradient(#33B481,#23A06E); background:linear-gradient(#33B481,#23A06E); color:#fff } .btn-info:active { background:#1a9263; background:-webkit-linear-gradient(#11774F,#1FA06D); background:linear-gradient(#11774F,#1FA06D); box-shadow:none; color:rgba(255,255,255,.9) } .btn-info:focus { border-color:#178156; box-shadow:rgba(28,143,61,.7) 0 0 10px }

Related: See More

Paper Kit 2

Questions / Comments:

Posting GuidelinesFormatting