CODEWITHSUNDEEP
htmlbuttonbootstrap-4alignment
Kevin L
Kevin L

Reputation: 23

Align Button with Input

I'm fairly new to web development and I've tried for hours to figure this out. I'm trying to align my button along with the input sections instead of the labels. I've tried to find a few solutions on StackOverflow but it doesn't seem to work.

In CSS I attempted to use margin-top and just push the button down to align with the input which I guess kinda works but there has to be a much easier/better way.

Here's my code (screenshots)

Code

Result

Upvotes: 0

Views: 57

Answers (3)

Programming Maniac
Programming Maniac

Reputation: 127

You could use html Tables!

Check out this page for more info.

Try This:

<form class="container-fluid py-3 m-O">
<h2 class="py-3">Want to sign up for our free monthly newsletter?</h2>
<div class="form-row">
    <table style="width:100%">
      <tr>
        <th>First Name:</th>
        <th>Last Name:</th> 
        <th>Email:</th> 
      </tr>
      <tr style="text-align: center;">
        <td >
            <input type="text" class="form-control" placeholder="First name">
        </td>
        <td>
            <input type="text" class="form-control" placeholder="Last name">
        </td>
        <td>
            <input type="text" class="form-control" placeholder="Email">
        </td>
        <td>
            <button type="submit" class="btn-md btn-always-col">Submit!</button>
        </td>
      </tr>
</div>

Upvotes: 0

Brix Angeles
Brix Angeles

Reputation: 61

Try to add a label on submit then hide it.

P.S. Adding a label will also be good for accessibility.

Upvotes: 1

Maykel Esser
Maykel Esser

Reputation: 319

Try to insert "align-self-end" class to the last "col-md-3".

<div class=“col-md-3 align-self-end“>
    <button>
</div>

Upvotes: 0

Related Questions