"horizontal circle options teacher student quiz "
Bootstrap 4.1.1 Snippet by muhittinbudak

Post to Facebook Tweet this

<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 ----------> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <div class="container"> <center><h4 class="mb-4 mt-4">Bootstrap 4 <br />Small circle buttons for horizontal quiz </h4></center> <hr /> <span class="mx-auto"> <button class="btn btn-light btn-circle btn-circle-sm m-1" style="background-color: #F8F8FD"><strong>1</strong></button> <button class="btn btn-success btn-circle btn-circle-sm m-1">A</button> <button class="btn btn-success btn-circle btn-circle-sm m-1">B</button> <button class="btn btn-success btn-circle btn-circle-sm m-1">C</button> <button class="btn btn-success btn-circle btn-circle-sm m-1">D</button> <button class="btn btn-success btn-circle btn-circle-sm m-1">E</button> </span><br/> <span> <button class="btn btn-light btn-circle btn-circle-sm m-1" style="background-color: #F8F8FD"><strong>2</strong></button> <button class="btn btn-success btn-circle btn-circle-sm m-1">A</button> <button class="btn btn-primary btn-circle btn-circle-sm m-1">B</button> <button class="btn btn-info btn-circle btn-circle-sm m-1">C</button> <button class="btn btn-warning btn-circle btn-circle-sm m-1">D</button> <button class="btn btn-danger btn-circle btn-circle-sm m-1">E</button> </span><br/> <span> <button class="btn btn-light btn-circle btn-circle-sm m-1" style="background-color: #F8F8FD"><strong>3</strong></button> <button class="btn btn-success btn-circle btn-circle-sm m-1">A</button> <button class="btn btn-primary btn-circle btn-circle-sm m-1">B</button> <button class="btn btn-info btn-circle btn-circle-sm m-1">C</button> <button class="btn btn-warning btn-circle btn-circle-sm m-1">D</button> <button class="btn btn-danger btn-circle btn-circle-sm m-1">E</button> </span> <br /> <button class="btn btn-block btn-success mt-3 mb-3" id="tikla">Tıkla</button> <div class="alert alert-success"> <a aria-label="close" class="close" data-dismiss="alert" href="#">x</a> <strong>Success!</strong> This alert box could indicate a successful or positive action. </div> </div> </body> </html>

Related: See More

Vue Argon Design System
loading circle
Sonar Wave Effect in Circle With CSS
Centered Horizontal and Vertical Login Screen

Questions / Comments: