Bootstrap, center buttons in row - css

Question

I have the problem with center all button in each col-md-4:
<div class="row position-relative mt-2">
<div class="col-md-4 center-block">
<div class="center-block align-to-bottom">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-warning btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
</div>
<div class="col-md-4 center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-warning btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
<div class="col-md-4 center-block">
<p>
<button class="btn btn-success btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
Also second question -> I uses also w-100, h-85... But it is no working. I am also looking for solution to set up relative size of buttons.

Answer 1

To horizontally align a button you can just add the class text-center to your parent column.
I also removed the p tags and instead added the margin to the button itself with the class mb-2
I did remove a lot of your classes too as they didn't seem to be Bootstrap 4 classes. If these are needed just add them back where you think neccessary.
Also rather than making your button a block which gives it the full width of your parent, I just added another row and put each button in its own full width column which will act as the block.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mt-2">
<div class="col-md-4 text-center">
<div class="row">
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="row">
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<button class="btn btn-success btn-sm" type="button">
Button
</button>
</div>
</div>
I hope this solves your issues, let me know if it's not quite what you were looking for.