After attempting to follow this reference How to make two buttons the same size?
Unfortunately, that solution didn't work for my specific case.
Currently using bootstrap 4, I am facing an issue where I need to ensure that two buttons in a row are of the same size. How can I resolve this?https://i.sstatic.net/kz3GU.png
Below is the snippet from my code:
<style>
.form-style-5{
max-width: 500px;
padding: 10px 20px;
margin-top:2em;
margin: 10px auto;
margin-bottom: 1em;
padding: 30px;
background-color: #ffffff;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.container{
margin-bottom: 2em;
}
.col-sm-6{
width:120px;
height:50px;
text-align:center;
line-height:1.1em;
font-size:1.1em;
}
</style>
<body style="background-color: #040b5a">
<div class="container" style="padding:50px">
<form class="form-style-5" method="post">
<h1 style="font-family:verdana">Login</h1>
{% csrf_token %}
<table>
{{form | crispy}}
<button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="submit" style="background-color: #040b5a; border: 0px">Login</button>
</form>
<hr>
<div class= "row">
<div class="col-sm-6"><a href="/signup" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color: #040b5a; border: 0px"> Customer Sign-up</a></div>
<div clas="col-sm-6"><a href="/seller_signup" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color: #040b5a; border: 0px">Seller Sign-up</a></div>
</div>
</table>
</div>
</body>
</html>