Use d-flex and class in your col.
<div class="col-6 col-md-4 offset-md-3 d-flex">
You can also add pl-3 class to SIGN UP button for the space between the buttons.
Solution 1 :
Solution 2 :
If you are using Bootstrap 4 it will work if you use two columns, each of size 6 or you can change the size of columns accordingly.
<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-6">
<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-6">
<a href="/register" class="grad2"><img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Sign Up"></a>
</div>
</div>
</div>
</div>
</body>
Solution 3 :
the entire row columns are about 12 columns so it should be col-md-6 or add d-flex to the row itself.
<div class="row mt-4">
<div class="col-6 col-md-6 ">
<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-6 ">
<a href="/register" class="grad2"><img class="landing_button" src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up"></a>
</div>
</div>
Problem :
I am used two images button and place them in a a tag in the same bootstrap column. However this is how they look like:
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 do I align so the next two buttons are next to each other with some spacing between them as well?
Comments
Comment posted by Rob
Your HTML is invalid. A
Comment posted by Lord Jesus
and i put them in two seperate columns?
Comment posted by Burak Gavas
No, in the same column
Comment posted by Lord Jesus
is there any diff separating into two columns?
Comment posted by Burak Gavas
Actually there is not much difference for using multiple columns or the same column. But, it is better to use multiple columns instead of using d-flex class because by using d-flex you are making your column similar to row. Using row and col in appropriate places is always better. For your case, you can use col-auto for each button column
Comment posted by Burak Gavas
I gave. Actually, I did not understand why people downvote your question.
Comment posted by Lord Jesus
how come I tried adding offset-sm or xs for mobile layout on chrome dev tools, it does not reflect changes for mobile?
Comment posted by Hamad Javed
try using col-md-4 col-sm-4 col-sm-offset-2 for the column, its working for me
Comment posted by Hamad Javed
you can change the column size as per your requirement
Comment posted by jsfiddle.net/hamadjaved/v2epyx9m
jsfiddle.net/hamadjaved/v2epyx9m
Comment posted by Hamad Javed
have you checked the demo?
Comment posted by Lord Jesus
how come I tried adding offset-sm or xs for mobile layout on chrome dev tools, it does not reflect changes for mobile?