Centering Bootstrap5 buttons on mobile-CodePudding

I am currently working on a web application and I am trying to figure out how to center two bootstrap buttons side-by-side. It works on mobile, but when I try to inspect the page and view it on a mobile device, they go on separate lines and center (one on top of the other). How can I fix this so that on mobile, they appear side-by-side like on the computer? Here is the code:

<div >
        <div >
            <div >
                <a href="#" style="font-size: 18px;"  role="button">Button 1</a>
            </div>  
            <div >
                <a href="#" style="font-size: 18px;"  role="button">Button 2</a>
            </div>
        </div> 
</div>

CodePudding user response：

How about this. Remove the breakpoints from your columns and make them occupy half the space no matter what screen size you are using:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
    <div >
      <a href="#" style="font-size: 18px;"  role="button">Button 1</a>
    </div>
    <div >
      <a href="#" style="font-size: 18px;"  role="button">Button 2</a>

    </div>
  </div>
</div>

CodePudding user response：

This might look more cleaner

<div  style="display:flex">
<div  style="margin:auto">
<a  href="">Button1 </a>
<a  href="">Button2 </a>
</div>
</div>
</div>
</div>