I have problem with bootstrap buttons when resizing browser - html

Question

I have this in my html:
.btn {
height: 100%;
font-size: 10em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid mb-5">
<div class="row ">
<div class="col pl-0 pr-0 ml-5">
<button type="button" class="btn btn-primary btn-block">ONE</button>
</div>
<div class="col pl-0 pr-0 ml-5">
<button type="button" class="btn btn-primary btn-block">TWO</button>
</div>
<div class="col pl-0 pr-0 ml-5 mr-5">
<button type="button" class="btn btn-primary btn-block">THREE</button>
</div>
</div>
</div>
The problem that I am having is that when I resize browser buttons stick to the right side and to eachother. What can be done here? Any help appreciated!

Answer 1

Please run this in your browser rather than using snippet to have a better response
See I have changed one thing in your code . What I did was just added col-sm for div classes. You can find more about bootstrap grid system via this link. Bootstrap grid system .
I think you expect this.
To see the result please expan the snippet and then with Inspect Element in you browser and then navigate to mobile view . Thanks
Update
In addition to what you asked at the chat I have added some custom css which is responsive to increase the font size . Just added style="font-size:5vw;".The text size can be set with a vw unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
This is the new view after adding style="font-size:5vw;"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid mb-5 ">
<div >
<div class="container-fluid mb-5 ">
<div class="row ">
<div class="col pl-0 pr-0 ml-5 col-sm-3">
<button type="button" style="font-size:5vw;" class=" btn btn-primary btn-block">ONE</button>
</div>
<div class="col pl-0 pr-0 ml-5 col-sm-3">
<button type="button" style="font-size:5vw;" class=" btn btn-primary btn-block">TWO</button>
</div>
<div class="col pl-0 pr-0 ml-5 mr-5 col-sm-3">
<button type="button" style="font-size:5vw;" class=" btn btn-primary btn-block">THREE</button>
</div>
</div>