I could not make iframe responsive.
Solution
I used the bootstrap class .ratio ratio-1x1
<div class="col-lg-6">
<div class="ratio ratio-1x1">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31716.287090531176!2d3.4217404999999994!3d6.4535713!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x103bf4cc9b07cf55%3A0xc4ae10b395418b9b!2sLagos%20Island!5e0!3m2!1sen!2sng!4v1668719706222!5m2!1sen!2sng" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>