Creation of Buttons with different alignments

Question

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.

Sachin Singh · Answer

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?

Sachin Singh · Answer

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 .btn-group button { background-color: #4CAF50; /* Green background */ border: 1px solid green; /* Green border */ color: white; /* White text */ padding: 10px 24px; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ float : left; /* Float the buttons side by side */ } /* Clear floats (clearfix hack) */ .btn-group:after { content: "" ; clear: both; display: table; } .btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */ } /* Add a background color on hover */ .btn-group button:hover { background-color: #3e8e41; } Button Group class = "btn-group" > Apple Samsung Sony

Mageshwaran R · Answer

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 >

Harsh Shah · Answer

Hii, You can set the first button left, second center, and third button in right using the below code. html, body { height: 200px; } Click Me! Click Me! Click Me!

Sagar Pallavi · Answer

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 Singh · Answer

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

Sagar Pallavi · Answer

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

Creation of Buttons with different alignments

Answers (7)