"Quiz advance design"
Bootstrap 3.0.0 Snippet by dataweby

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="privew"> <div class="questionsBox"> <div class="questions">Which of the following is correct about data-keyboard Data attribute of Modal Plugin?</div> <ul class="answerList"> <li> <label> <input type="radio" name="answerGroup" value="0" id="answerGroup_0"> It specifies static for a backdrop, if you don't want the modal to be closed when the user clicks outside of the modal.</label> </li> <li> <label> <input type="radio" name="answerGroup" value="1" id="answerGroup_1"> It closes the modal when escape key is pressed; set to false to disable.</label> </li> <li> <label> <input type="radio" name="answerGroup" value="2" id="answerGroup_2"> It shows the modal when initialized.</label> </li> <li> <label> <input type="radio" name="answerGroup" value="3" id="answerGroup_3"> Using the jQuery .load method, injects content into the modal body. If an href with a valid URL is added, it will load that content.</label> </li> </ul> <div class="questionsRow"><a href="#" class="button" id="nextquestions">Next</a> <a href="#" class="button" id="skipquestions">Skip</a><span>2 of 20</span></div> </div> </div>
.privew { margin-bottom: 20px; } .questionsBox { display: block; border: solid 1px #e3e3e3; padding: 10px 20px 0px; box-shadow: inset 0 0 30px rgba(000,000,000,0.1), inset 0 0 4px rgba(255,255,255,1); border-radius: 3px; margin: 0 10px; }.questions { background: #007fbe; color: #FFF; font-size: 22px; padding: 8px 30px; font-weight: 300; margin: 0 -30px 10px; position: relative; } .questions:after { background: url(../img/icon.png) no-repeat left 0; display: block; position: absolute; top: 100%; width: 9px; height: 7px; content: '.'; left: 0; text-align: left; font-size: 0; } .questions:after { left: auto; right: 0; background-position: -10px 0; } .questions:before, .questions:after { background: black; display: block; position: absolute; top: 100%; width: 9px; height: 7px; content: '.'; left: 0; text-align: left; font-size: 0; } .answerList { margin-bottom: 15px; } ol, ul { list-style: none; } .answerList li:first-child { border-top-width: 0; } .answerList li { padding: 3px 0; } .answerList label { display: block; padding: 6px; border-radius: 6px; border: solid 1px #dde7e8; font-weight: 400; font-size: 13px; cursor: pointer; font-family: Arial, sans-serif; } input[type=checkbox], input[type=radio] { margin: 4px 0 0; margin-top: 1px; line-height: normal; } .questionsRow { background: #dee3e6; margin: 0 -20px; padding: 10px 20px; border-radius: 0 0 3px 3px; } .button, .greyButton { background-color: #f2f2f2; color: #888888; display: inline-block; border: solid 3px #cccccc; vertical-align: middle; text-shadow: 0 1px 0 #ffffff; line-height: 27px; min-width: 160px; text-align: center; padding: 5px 20px; text-decoration: none; border-radius: 0px; text-transform: capitalize; } .questionsRow span { float: right; display: inline-block; line-height: 30px; border: solid 1px #aeb9c0; padding: 0 10px; background: #FFF; color: #007fbe; }

Related: See More


Questions / Comments: