Create a button-group table with Bootstrap

Question

I'm using Bootstrap 4 and I'm having problems trying to create a button group with multiple rows, like sketched in the image below. The usual button groups in Bootstrap only seem to support buttons aranged in one row or column.

Is there a way to achieve this taking advantage of the already existing button support from Bootstrap, without having to write CSS/JavaScript from scratch?

Related, but this only answers the question in case the buttons are nicely aligned in a matrix: How I can make nice looking matrix of buttons with bootstrap 3?

score 2 · Accepted Answer · answered Aug 12 '19 at 18:08

You can align them by using row and col classes.

Example With minumum css:

.inline {
  display: inline-block;
  margin: 25px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />

<div class="inline">
  <div class="row">
    <button type="button" class="btn btn-primary col">btn1</button>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary col-6">btn2</button>
    <button type="button" class="btn btn-primary col-6">btn3</button>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary col-4">btn4</button>
    <button type="button" class="btn btn-primary col-4">btn5</button>
    <button type="button" class="btn btn-primary col-4">btn6</button>
  </div>
</div>

A Copy Of Image Example:

.inline {
  display: inline-block;
  margin: 25px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.btn {
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-radius: 0 !important;
}

.row {
  margin: 0 !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<div class="inline">
  <div class="row">
    <button type="button" class="btn btn-primary col">btn1</button>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary col-6">btn2</button>
    <button type="button" class="btn btn-primary col-6">btn3</button>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary col-4">btn4</button>
    <button type="button" class="btn btn-primary col-4">btn5</button>
    <button type="button" class="btn btn-primary col-4">btn6</button>
  </div>
</div>

Note that I've added important to styles to override bootstrap styles. If you import your stylesheet after bootstrap css you don't have to add !important to it.

Thanks for the quick answer! Two remarks: in the first example all corners of every button are rounded, which gives a weird appearance. The second example looks great except for two things: firstly, because the border radius is only set for the container, the buttons themselves stick out at the corners (which becomes more clear when you raise the border-radius). Secondly, giving a border to the container creates an ugly one-pixel white line right between the border and the buttons (at least in my browser, chrome). Any way to resolve this? — Safron, Aug 13 '19 at 12:24
I'm using chrome, but i cant find the 1px white border between container and buttons, And for the first note i didn't quite understand it, can you explain it more ? — Kareem Dabbeet, Aug 13 '19 at 12:27
I am seeing this in my browser (Chrome version 75.0.3770.142): https://i.stack.imgur.com/ZRiGV.jpg . I guess this is a bug in Chrome. To exaggerate my first point, this is what I see when I raise the border radius to 20px: https://i.stack.imgur.com/KEvOO.jpg . For example, the upper corners of btn1 stick out of the containing div. When the border radius is only 5px this is more subtle but still visible. — Safron, Aug 13 '19 at 20:27
@Mark_Ed I think I figured it out: I'm on Windows and one of the default settings scales everything with 125%. Once I turn this off, the white pixel I show in the first image of my previous comment disappears. Still think it's some bug caused by chrome, but that's another issue than the one I wanted to adress here. As for my other comment: I fixed it by adding `overflow: hidden;` to the `.outline` class. Thanks for the help! — Safron, Aug 14 '19 at 21:28

Create a button-group table with Bootstrap

1 Answers1