Item location within a Div with Bootstrap 5.3 not displaying as I would expect

To give you a bit of background I am not new to development and have done a variety of different languages however my level of HTML knowledge while growing is still very much more towards the basic level than the advanced.

Saying that, I am currently working on developing this and as part of this I am working on a project where I am creating a fictitious customer portal that is completely responsive. I have opted to go with Bootstrap 5.3 for this and I am getting on well with it however I am facing a particular issue that I can't seem to sort out I am hoping some of you far more experienced and knowledgeable folk on here can assist me with and try and explain it to me.

So the example HTML I have is as follows:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
 <div class="app-wrapper">     
  <main class="app-main">
   <div class="app-content-header">
    <div class="container-fluid">
     <div class="row">
      <div class="col-sm-6"><h3 class="mb-0">Home</h3>
      </div>
      <div class="col-sm-6">
       <ol class="breadcrumb float-sm-end">
        <li class="breadcrumb-item active"><a href="#">Home</a></li>
       </ol>
      </div>
     </div>
    </div>
   </div>
   <div class="app-content">
    <div class="row">
     <div class="col-md-6">
      <div class="card-body">
       <div class="card card-info card-outline mb-3">
        <div class="card-header">
         <div class="card-title">Quickly Connect with  us on Whatsapp</div>
         </div>
         <div class="card-body">
          <div class="row g-3">
           <div class="col-12">
            <div class="info-box">
             <div class="info-box-content">
              <div class="col-md-6">
               <div class="info-box">
                <button type="button" class="btn btn-success mb-2">Click here to start conversation</button>
               </div>
               <!---Using the text-center as identified in bootstrap help-->
               <div class="info-box text-center">   
                <button type="button" class="btn btn-success mb-2 text-center">Click here to start conversation</button>
               </div>
              </div>        
             </div>
            </div>
           </div>
          </div>
         </div>                             
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </main>
 </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/js/bootstrap.min.js"></script>

This displays the following image:

While I am not unhappy with this and the responsive side of things is working really will I was hoping to a stage further, and make it more visually appealing and was hoping to transfer it to more like the following edited image.

Expected Output:

I have been looking through all the examples and documentation on the Bootstrap website and I have found using the text-centre class at the top level div to centralise the content within it however that isn't working for the button. I have tried adding it on several levels, and it never centralises the button.

Solution

Bootstrap does indeed center text with the class text-center. You can center blocks with mx-auto see: horizontally centering.

In your case you want to center a text, but you have to give it room to center. You didn't. The parent is a <div class="info-box"> which will only get a wide as it needs to, to fit its content, and you also have a col-md-6.

To show you that centering does work, see a cleaner version here:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
 <div class="app-wrapper">     
  <main class="app-main">
   <div class="app-content-header">
    <div class="container-fluid">
     <div class="row">
      <div class="col-sm-6"><h3 class="mb-0">Home</h3>
      </div>
      <div class="col-sm-6">
       <ol class="breadcrumb float-sm-end">
        <li class="breadcrumb-item active"><a href="#">Home</a></li>
       </ol>
      </div>
     </div>
    </div>
   </div>
   <div class="app-content">
    <div class="row">
     <div class="col-md-6">
      <div class="card-body">
       <div class="card card-info card-outline mb-3">
        <div class="card-header">
         <div class="card-title">Quickly Connect with  us on Whatsapp</div>
         </div>
         <div class="card-body">
          <div class="row g-3">
           <div class="col-12">
             <p>
              <button type="button" class="btn btn-success mb-2">Click here to start conversation</button>
             </p>
             <p class="text-center">
              <button type="button" class="btn btn-success mb-2">Click here to start conversation</button>
             </p>  
           </div>
          </div>
         </div>                             
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </main>
 </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/js/bootstrap.min.js"></script>

If you do need a <div class="info-box"> around the buttons, make sure they have the CSS style: width: 100%. That is: Use the full width of the parent.