Bootstrapping buttons - html

Question

I am trying to make three parallel square shape buttons with title in center. something like this
My title
Square button-1 square button-2 square button-3
My code is as follows::
<div class="col-md-12 pt-md-5 text-center">
<p>My title</p>
</div>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div>
<button class="btn btn-sq-lg btn-info">button-1</button>
</div>
<div >
<button class="btn btn-sq-lg btn-info">button-2</button>
</div>
<div>
<button class="btn btn-sq-lg btn-info">button3</button>
</div>
</div>
</div>
</div>
.btn-sq-lg {
width: 150px !important;
height: 150px !important;
}
output I am getting is three vertical without any spaces. But I want three parallel square buttons with equal spaces
how can I do that?
Also how can I make button with white color and black text and title with white color and increase font size?
Just made button as info but want a white background with black text

Answer 1

col-xs-** has been replaced with col-** in v4. You need to separate each button with col-4
.btn-sq-lg {
width: 150px !important;
height: 150px !important;
background: #ffff!important;
color: black!important
}
.square {
text-align: center
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<p class="p-5 w-100 text-center">My title</p>
<div class="container">
<div class="row">
<div class="col-4">
<div class="square">
<button class="btn btn-sq-lg btn-info ">button-1</button>
</div>
</div>
<div class="col-4">
<div class="square">
<button class="btn btn-sq-lg btn-info">button-2</button>
</div>
</div>
<div class="col-4">
<div class="square">
<button class="btn btn-sq-lg btn-info">button3</button>
</div>
</div>
</div>
</div>

Answer 2

Use justify-content-between to row and remove the div with col-xs-4 (xs does not exist in bootstrap 4)
<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.4.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>
<div class="col-md-12 pt-md-5 text-center">
<p>My title</p>
</div>
<div class="container">
<div class="row justify-content-between">
<div>
<button class="btn btn-sq-lg btn-info">button-1</button>
</div>
<div>
<button class="btn btn-sq-lg btn-info">button-2</button>
</div>
<div>
<button class="btn btn-sq-lg btn-info">button3</button>
</div>
</div>
</div>