Creation of Buttons with different alignments

Sagar Pallavi

Hi Team,

I am developing one MVC project and in my view page I have to show three HTML button controls in the same row.

If I use DIV tags then it is not coming in the same line. Please let me know what is the best way to design buttons with the same look and feel and also display all of them in same row.

Thanks a lot for your help.

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mageshwaran R5y ago
Hi Pallavi,
Use HTML Table
<table>
      <tr>
           <td><input type="button" name="button1" id="button1" value="Button1" class="btn btn-primary" onclick="" />td>
            <td><input type="button" name="button2" id="button2" value="Button2" class="btn btn-primary" onclick="" />td>
             <td><input type="button" name="button3" id="button3" value="Button3" class="btn btn-primary" onclick="" />td>
        tr>
<tr>
           <td><input type="button" name="button4" id="button4" value="Button4" class="btn btn-primary" onclick="" />td>
            <td><input type="button" name="button5" id="button5" value="Button5" class="btn btn-primary" onclick="" />td>
             <td><input type="button" name="button6" id="button6" value="Button6" class="btn btn-primary" onclick="" />td>
        tr>
         table>
+1
Harsh Shah5y ago
Hii,

You can set the first button left, second center, and third button in right using the below code.

Sachin Singh5y ago

test another one the one with css from my code, it may solve your Issue.

use margin and padding as per your need, how could i help in paddings when i don't know how your layout looks like?

Sagar Pallavi5y ago

Actually I tried with Bootstrap code and three buttons are displaying in a single row but all of them are alinged to left with little space in between like below. Do I need to change anything else?

Button1 Button2 Button3

Sachin Singh5y ago

it is already in that order, please test by copy pasting.

Sagar Pallavi5y ago

Thanks Sachin for your response. How to align first button to the left, Second button to center and middle button to the right? Kindly suggest.

Many Thanks

Sachin Singh5y ago

This is if you use bootstrap

class=row>
class="col-md-4">
class="btn btn-primary">click me

class="col-md-4">

class="btn btn-primary">click me

class="col-md-4">

class="btn btn-primary">click me

This is if you dont't use bootstrap

Button Group
class="btn-group">

Creation of Buttons with different alignments

Button Group