how to set the html bootstrap buttons responsive in mobile - html

Question

I am new here so apologies if anything wrong I mention.
I want to make my bootstrap buttons mobile responsive. but, I am new to CSS. i want to display my buttons and text in middle of screen for small devices after video.so please tell me how to do it.
Here is my HTML code:
<div class="row" style="margin-top: 5%">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<p style="float: right; color: black;">I'm Ready to get my risk free <br /> membership today! <br /> (Limited Time and Quantities) </p>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<a href="#">
<button class="btn btn-theme btn-sm" style="background: white;color: #404040">
My Email Address
</button> </a>
<a href="#">
<button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
Keep me on your email list
</button> </a>
<a href="#">
<button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px; float: right; color: black">
Get My Risk <br /> Free Membership today
</button> </a>
</div>
</div>

Answer 1

Here is the code. Hope it will Help you. I have added some of classes into p and a tag. Even i put css for mobile view. If any changes please let me know.
#media screen and (max-width: 767px) {
.email-wrap {
display: block;
margin-bottom: 20px;
text-align: center;
}
.text-wrap {
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p class="text-wrap">I'm Ready to get my risk free <br /> membership today! <br />
(Limited Time and Quantities) </p>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: white;color: #404040">
My Email Address
</button> </a>
<a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
Keep me on your email list
</button> </a>
<a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px;color: black">
Get My Risk <br /> Free Membership today
</button> </a>
</div>

Answer 2

You can use media query for it or bootstrap 4 classes.
here is link for bootstrap class:
https://getbootstrap.com/docs/4.0/utilities/display/
#media (max-width: 575px){
p{
text-align: center;
float: unset !important;
}
a {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
}
<div class="row" style="margin-top: 5%">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<p style="float: right; color: black;">I'm Ready to get my risk free <br /> membership today! <br />
(Limited Time and Quantities) </p>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<a href="#"><button class="btn btn-theme btn-sm" style="background: white;color: #404040">
My Email Address
</button> </a>
<a href="#"><button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
Keep me on your email list
</button> </a>
<a href="#"><button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px; float: right; color: black">
Get My Risk <br /> Free Membership today
</button> </a>
</div>
</div>