Apologies for my lack of experience, I am relatively new to this field!
I have encountered the following problem:
I currently have 4 pricing tables available:
However, when I attempt to remove 2 pricing tables in order to keep only 2 in the center (as it was designed in the template), the layout becomes messy and appears like this: Appears like that
I would like to center them properly. How can I achieve this?
This is the code snippet for the pricing tables:
<!-- Price Start -->
<section class="section bg-light" id="price">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="section-title">
<h4 class="title text-uppercase fw-normal mb-4">Our <span class="text-primary fw-bold">Pricing</span> </h4>
<p class="text-muted mx-auto para-desc mb-0">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
</div>
</div><!--end col-->
</div><!--end row-->
<div class="row">
<div class="col-lg-3 col-md-6 mt-4 pt-2">
<div class="pricing-table shadow rounded business-plan position-relative bg-white text-center">
<h5 class="pricing-plan rounded-top text-uppercase bg-primary text-light p-4 mb-0">Standard Package</h5>
<div class="price-value p-4 text-center position-relative">
<div class="price-lable rounded-pill">
<h4 class="mt-4 d-block">€640</h4>
</div>
</div><!--end price value-->
<div class="pricing-features">
<ul class="list-unstyled mb-0">
<li>Consultation</li>
<li>Assistance with choosing universities</li>
<li>Sworn Polish translation within Poland</li>
<li>Online registration</li>
<li>Communication with universities and clarifying any questions</li>
<li>100% admission success rate</li>
<li>Accommodation in suitable housing</li>
<li>Financial consultation during studies</li>
<div class="price-button p-4">
<!-- <a href="#" class="btn btn-primary rounded-pill">Buy Now</a> -->
</div><!--end button-->
</div><!--end price features-->
</div><!--end table-->
</div><!--end col-->
<div class="col-lg-3 col-md-6 mt-4 pt-2">
<div class="pricing-table shadow rounded bg-white text-center">
<h5 class="pricing-plan rounded-top text-uppercase bg-light p-4 mb-0">VIP Package</h5>
<div class="price-value p-4 text-center position-relative">
<div class="price-lable rounded-pill">
<h4 class="mt-4 d-block">????</h4>
</div>
</div><!--end price value-->
<div class="pricing-features">
<ul class="list-unstyled mb-0">
<li>Includes the "Standard" package</li>
<li>We will meet you at the airport or train station</li>
<li>Assistance with settling in</li>
<li>Personal introductory program arrangement</li>
<li>Visit to currency exchange point;</li>
<li>Visit to shopping center for domestic and food purchases;</li>
<li>Orientation on public transport guidelines;</li>
<li>Guidance and introduction to university: visit to dean’s office, student ID issuance, class allocation.</li>
<li>Bank account opening (if desired);</li>
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<!-- Price End -->
I suspect Bootstrap is being used here, although I am not very familiar with it. My assumption is that the issue lies somewhere in bootstrap.min.css perhaps?