Styling multiple POST actions as a Bootstrap button group

Question

I have multiple "POST" buttons (empty forms with a single submit button) to handle some actions which have side-effects. I need to make these buttons appear as a Bootstrap button group (.btn-group) as if they were a tags with a .btn class applied.

My first idea was to reproduce all the css styles Bootstrap uses for .btn-groups but with a form child element instead of .btn. Well it turns out there are a lot of styles involved! I'm hoping there's another solution. I included the very first basic style needed to have buttons in a single line in the snippet. Many more styles are needed to manage the borders, rounded corners, etc.

.btn-group.try1 > form {
  position: relative;
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<h1>Doesn't work</h1>
<div class="btn-group">
<form method="post" action"./action1">
 <button type="submit" class="btn btn-danger">Action with side-effect 1</button>
</form>
<form method="post" action"./action2">
 <button type="submit" class="btn btn-default">Action with side-effect 2</button>
</form>
<form method="post" action"./action3">
 <button type="submit" class="btn btn-warning">Action with side-effect 3</button>
</form>
</div>

<h1>Desired appearance</h1>
<div class="btn-group">
 <a href="./action1" class="btn btn-danger">Action with side-effect 1</a>
 <a href="./action2" class="btn btn-default">Action with side-effect 2</a>
 <a href="./action3" class="btn btn-warning">Action with side-effect 3</a>
</div>

<h1>Attempt 1</h1>
<div class="btn-group try1">
<form method="post" action"./action1">
 <button type="submit" class="btn btn-danger">Action with side-effect 1</button>
</form>
<form method="post" action"./action2">
 <button type="submit" class="btn btn-default">Action with side-effect 2</button>
</form>
<form method="post" action"./action3">
 <button type="submit" class="btn btn-warning">Action with side-effect 3</button>
</form>
</div>

Why do I use forms?

actions with side-effects should use POST.
I'd rather not use javascript to POST where vanilla HTML works just fine.

Ricky Ruiz · Answer 1 · 2016-09-21T16:10:49.267

You can create a class modifier and use it with bootstrap's .form-group class.

.form-group--flex {
  display: flex;
  flex-wrap: wrap;
}
.form-group--flex button {
  border-radius: 0;
}

Then for the border-radius you can use pseudo-selectors.

.form-group--flex form:first-of-type button {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.form-group--flex form:last-of-type button {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

Code Snippet:

.form-group--flex {
  display: flex;
  flex-wrap: wrap;
}
.form-group--flex button {
  border-radius: 0;
}
.form-group--flex form:first-of-type button {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.form-group--flex form:last-of-type button {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group form-group--flex">
  <form method="post" action "./action1">
    <button type="submit" class="btn btn-danger">Action with side-effect 1</button>
  </form>
  <form method="post" action "./action2">
    <button type="submit" class="btn btn-default">Action with side-effect 2</button>
  </form>
  <form method="post" action "./action3">
    <button type="submit" class="btn btn-warning">Action with side-effect 3</button>
  </form>
</div>

Notes:

The only thing that bootstrap's class .form-group does is add a margin bottom.

.form-group {
    margin-bottom: 15px;
}

Styling multiple POST actions as a Bootstrap button group

1 Answers1