Bootstrap does not provide circular buttons by default. However, appropriate use of CSS styling functions like width, height, padding, and border-radius with Bootstrap 4 custom button styles will give us circular buttons.

#   
## Code

Below is an example for better understanding.

<!DOCTYPE html>
<html><head>
	<title>
		How to get circular buttons
		in bootstrap 4.
	</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<style type="text/css">
		.btn-circle.btn-xl {
			width: 100px;
			height: 100px;
			padding: 13px 18px;
			border-radius: 60px;
			font-size: 15px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="container">
	<h1>Circular Buttons</h1>
	
	<div class="container"></div>

	<button type="button" class="btn btn-success btn-circle btn-xl">Green circular buttton</button>
	<button type="button" class="btn btn-secondary btn-circle btn-xl">Gray circular button</button>
	<button type="button" class="btn btn-primary btn-circle btn-xl">Blue circular button</button>
	<button type="button" class="btn btn-danger btn-circle btn-xl">Red circular button</button>
	<button type="button" class="btn btn-warning btn-circle btn-xl">Yellow circular button</button>
	<button type="button" class="btn btn-light btn-circle btn-xl">White circular button</button>
	<button type="button" class="btn btn-dark btn-circle btn-xl">Black circular button</button>
	</div>
	</div>
	</body>
</html>		


// document.addEventListener("DOMContentLoaded", function () {
//   pTag = document.querySelector("div");
//   newVal = document.createElement("p");
//   newVal.innerHTML = 'Hello, Hello';
//   pTag.appendChild(newVal);
// });

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

#    
## Explanation
The focus should be on the `btn` classes and the styles included in the `head` section in lines 30-36.
	
`btn-success` and other contextual classes `btn-secondary,btn-primary,btn-danger,btn-warming,btn-light and btn-dark` give the buttons their different colors. 

`btn-circle` is added to each line of code. This is to make the other values, which are specified in the style section, work.

A specified `width` and `height` are added in the style to make all the buttons have the same size of equal width and height in lines 15 and 16, respectively.

`padding` is added to separate the buttons and makes the button groups look better in line 17.
	 
`border-radius` is added to give the buttons a circular shape in line 18.
	
`font-size` and `text-align` are added to control the size and the text position, respectively. `text-align` is set to `center`, and this brings the texts to the center of the buttons. Check lines 19 and 20.

How to get circular buttons in Bootstrap 4

CSS styling with width, height, padding, and border-radius in Bootstrap 4 enables circular buttons.