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="/[email protected]/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="/[email protected]/js/bootstrap.min.js"></script>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/npm/[email protected]/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/npm/[email protected]/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.
Share Improve this question edited Feb 15 at 21:10 j08691 208k32 gold badges269 silver badges280 bronze badges asked Feb 15 at 17:17 Luke Frost IEng MIMechELuke Frost IEng MIMechE 33 bronze badges New contributor Luke Frost IEng MIMechE is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.1 Answer
Reset to default 0Bootstrap 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/npm/[email protected]/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/npm/[email protected]/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.