I am attempting to arrange 1 title and 2 buttons in the following manner:
On mobile : title: centered, one row button1 and button2: full width, stacked on top of each other see image here
Current mobile view: see image here
On desktop: title: right aligned button1 and button2 small
Current desktop view: see image here
I am utilizing bootstrap 5.3 and this is my progress so far:
<div class="container-fluid p-0 m-0">
<div class="row ">
<div class="col-6 col-xs-12 ">
<h2 class="card-title fw-bold">Calendar (<i>not connected to google</i>)</h2>
</div>
<div class="col-6 col-xs-12 d-flex justify-content-end">
<button class="btn btn-flex btn-primary btn-block" data-kt-calendar="connect_to_google">
<i class="ki-double-arrow-back fs-2"></i>Connect to Google</button>
<button class="btn btn-flex btn-primary btn-blockt" data-kt-calendar="add">
<i class="ki-duotone ki-plus fs-2"></i>Add Event</button>
</div>
</div>
</div>
Appreciate your assistance.