CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Noor ul ain Ibrahim
Noor ul ain Ibrahim

Reputation: 105

How to make two buttons in a row of same size?

I even tried this link How to make two buttons the same size?

But this didn't work for me

I am using bootstrap 4 and want to make two buttons in a row of same size. How can i fix this? Customer sign up and seller sign up button should be of same size

Here is 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>

Upvotes: 0

Views: 1151

Answers (2)

Lucifer
Lucifer

Reputation: 502

<div class= "row">
  <div class="col-sm-6"><a class="btn"> Customer Sign-up</a></div>
<div class="col-sm-6"><a class="btn">Seller Sign-up</a></div>
</div>

 .btn{
width: 100%;
text-align:center;
background: #040b5a;
color:#fff !important;

}

Upvotes: 1

Hamid Israfilov
Hamid Israfilov

Reputation: 111

Your code were missing "s" for class word on line 40

<div class="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>

Upvotes: 1

Related Questions