I have used two image buttons and placed them in an a tag within the same bootstrap column. However, this is how they appear:
https://i.sstatic.net/5O3bm.png
This is my code:
<body>
<div class="backgroundImage">
<div class="text-right p-3">
<a href="/register-dealer " class="btn p-2"><b>{{ __('Be A Dealer') }}</b></a>
</div>
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-4 col-md-4 mx-auto my-auto">
<img class="mw-100" src="{{ asset('storage/logo/Bujishu_logo.png') }}" alt="Bujishu">
</div>
</div>
</div>
<div class="container">
<div class="row mb-4">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h2 class="bujishu-motto">
A home is made of
<i>
<p class="bujishu-recursive">hopes</p>
</i>
and
<i>
<p class="bujishu-recursive">dreams</p>
</i>
</h2>
<h2 class="bujishu-motto">
Let us
<i>
<p class="bujishu-recursive">inspire</p>
</i>
you to build the perfect home!
</h2>
</div>
</div>
<div class="row mt-4">
<div class="col-6 col-md-4 offset-md-3 ">
<a href="/login " class="grad2"><img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login"></a>
{{-- </div>
<div class="col-6 col-md-4 "> --}}
<a href="/register" class="grad2"><img class="landing_button" src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up"></a>
</div>
</div>
</div>
</div>
</div>
</body>
How can I align the next two buttons side by side with some space between them?