I recently created a section using Bootstrap that contains 8 buttons, with 5 in the first row and 3 in the second. However, the alignment of the content is not as I envisioned. See the current layout below:
Here's how I want to align the contents:
To achieve this, I tried adding justify-content and mx-auto properties to my row, but nothing seems to work. Below is my complete code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
.banner-cta {
background: #23746F;
padding: 30px;
}
.banner-cta h2,
.banner-cta p,
.banner-cta a {
text-align: center;
margin: auto;
position: relative;
display: block;
color: white;
font-family: 'Raleway', sans-serif !important;
}
.banner-cta h2,
.banner-cta p {
padding-bottom: 50px;
}
.banner-cta p {
max-width: 700px;
font-size: 1.1em;
}
#dada {
padding-bottom: 1%;
}
</style>
<div class="container-fluid">
<div class="banner-cta">
<h2 class="banner-cta-title">PARTY AT RAMOJI FILM CITY</h2>
<div id="dada" class="row justify-content-center">
<a href="#"><button class="btn btn-light btn-md">DAY TOURISM</button></a>
<a href="#"><button class="btn btn-light btn-md">BIRTHDAY PARTY</button></a>
<a href="#"><button class="btn btn-light btn-md">SAHAS</button></a>
<a href="#"><button class="btn btn-light btn-md">CORPORATE PACKAGES</button></a>
<a href="#"><button class="btn btn-light btn-md">VENUE BOOKINGS</button></a>
</div>
<div class="row">
<a href="#"><button class="btn btn-light btn-md">SURPRISE PARTY</button></a>
<a href="#"><button class="btn btn-light btn-md">POST WEDDING RELAX</button></a>
<a href="#"><button class="btn btn-light btn-md">WEDDING STYLE</button></a>
</div>
</div>
</div>If anyone could assist in identifying what might be wrong in my code, I would greatly appreciate it. Thank you in advance.