Question 66377 in Html Question posted in
Some basic documentation can be found here.

Align html buttons in a row in Flask Forms

I have a flask form,

<form action="/data1" method="GET">
    <button type="submit">Feed1</button>
</form>

<form action="/data2" method="GET">
    <button type="submit">Feed2</button>
</form>

Button is displayed as below,

enter image description here

Expectation is to add the buttons in a same row.

Tried below style, but its not helping,

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Any suggestion will be appreciated.
Not sure if is its because of Form tag, it is not getting aligned. I have tried wrapper class as well, but no response.

Tags:

2

Answers


  1. 0

    You can align the buttons in a row using CSS flexbox. Just add a parent container with the display: flex property, and set justify-content: center to center the buttons horizontally.

    Example:

    HTML:

    <div class="button-row">
  <form action="/data1" method="GET">
    <button type="submit">Feed1</button>
  </form>
  <form action="/data2" method="GET">
    <button type="submit">Feed2</button>
  </form>
</div>

    CSS:

    .button-row {
display: flex; /* set the display property to flex */
justify-content: center; /* horizontally center the buttons */
}

button {
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 0 10px; /* add 10px margin to the buttons */
}

    Hope it helps 🙂

    Login or Signup to reply.
  2. 0

    You can do this. Set the display property of your buttons to inline-flex and your class row with a display of flex. Here is a working snippet of what you need to do.

    button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  font-size: 16px;
  margin-right: 10px;
}

.row{
  justify-content: center;
  display: flex;
  margin-right: 10px;
}
    <div class="row">
<form action="/data1" method="GET">
    <button type="submit">Feed1</button>
</form>

<form action="/data2" method="GET">
    <button type="submit">Feed2</button>
</form>


</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search