<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>
<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>
