Design a table featuring button groups using Bootstrap styling

I'm currently using Bootstrap 4 and facing some issues while attempting to create a button group with multiple rows, similar to the design shown in the image provided below. The default button groups in Bootstrap appear to only support arranging buttons in either a single row or column.

https://i.sstatic.net/JybUgt.jpg

Is there a way to achieve this layout utilizing the existing button functionality in Bootstrap, without having to manually code CSS/JavaScript from scratch?

A related query pertains to aligning buttons in a matrix format: How can I create a visually appealing matrix of buttons using Bootstrap 3?

csstwitter-bootstrapbootstrap-4buttongroup

Answer №1

To align elements, you can utilize the row and col classes.

Here is an example with minimal 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>

Here is a duplicate of an 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>

Please note that I have applied important styles to override bootstrap's default styles. If you include your stylesheet after the bootstrap CSS, you may not need to use !important.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Searching for columns should be at the top of an angular datatable, not at the bottom

In my Angular 7 project, I am utilizing the library found at this link. I have followed the example provided, which can be seen here. Everything is working perfectly, except for the position of the search columns. I would like the search columns to appear ...

javascriptcssangulardatatablesangular-datatables

Chrome tab freezes when scrolling with the mouse

Working on a particularly interesting bug, I've managed to replicate it using a fiddle. The issue arises when the middle mouse button is clicked over the div element containing text, causing the pointer to become stuck. Is this possibly a browser bug ...

javascripthtmlcssgoogle-chrome

Is your bootstrap tooltip appearing in a different location than your mouse cursor on mouse move?

When hovering over multiple images, I want the tooltip to follow the mouse according to this solution. However, sometimes the tooltip appears very far away from the mouse and flickers. Does anyone know why? Additionally, the CSS code provided below doesn& ...

jquerytwitter-bootstraptooltip

Covering the entire screen, the Div element takes up the entirety of

Just like with other pages, the main div always takes up the entire screen visible to the user. As they scroll down, another div becomes visible: example1 , example2 Regardless of the screen size, the main div will always fill the space visible to the use ...

javascripthtmlcss

Move a 'square' to a different page and display it in a grid format after clicking a button

I am currently developing a project that allows students or schools to add projects and search for collaborators. On a specific page, users can input project details with a preview square next to the fields for visualization. Once the user uploads the ...

javascripthtmlcssgridviewcss-grid

Having trouble with Viewport CSS being restricted by Blogger?

I've been working on configuring my personal blog, which is hosted on Blogger, to properly adapt to the Windows 8 IE snap feature. Through my research online, it has been suggested that I include a @viewport in the CSS. However, it seems like the CSS ...

htmlcssinternet-explorerwindows-8.1blogger

How can we use Bootstrap to ensure that items in a div are aligned horizontally on larger devices and vertically on smaller devices?

I am currently working on creating a div that contains some information, similar to the layout used on the Coinbase website. However, I am encountering issues with styling as I want this div to be responsive - horizontally aligned on larger devices and ver ...

htmlcss

Issues arising from utilizing Twitter Bootstrap 3.1.x, the box-sizing property, and Revolution Slider

I'm currently working on a PyroCMS theme that is built with Twitter Bootstrap 3.1.x and includes Revolution Slider. However, I've encountered an issue where the property box-sizing: border-box; creates an unwanted grey border as shown in the imag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Why are my div elements mysteriously adding bottom margin?

I've encountered an unexpected margin bottom issue while working on some HTML and Bootstrap code. No matter how I try to set the div margin to 0 in a separate stylesheet, like this: body { margin: 0; } div { margin-bottom: 0; } The problem persi ...

htmlcssbootstrap-5

Two media queries are combining the same declaration, with one targeting iPads and the other targeting desktop devices

In my code, I am utilizing two media queries within a bulleted list li tag. The issue arises when both queries, clearing every nth-child(2n+1) and nth-child(3n+1), are active on the same page in Chrome's device views. This causes the grid layout to ap ...

htmlcss

Is it possible to create an animation with CSS3 transitions?

Experience a dynamic blinking border animation when hovering over the title: #link_list a:hover { border-left: 10px solid #E3E3E3; animation: blink 1s infinite; -webkit-animation: blink 1s infinite; -moz-animation: blink 1s infinite; -o-animation: blink 1 ...

cssanimationcss-transitions

When the enter key is pressed on a child modal dialog, it triggers the enter action on the parent modal dialog in IE11 and

Having two bootstrap modal dialog windows, where one creates the other, is causing a problem. When the enter key is pressed on the child's text input, it triggers an event on the parent as well. If the last focused button on the parent was the one to ...

javascriptangularjstwitter-bootstrap

Is there a way to determine the quantity of items within a sortable div?

In my HTML document, there are multiple divs containing smaller divs that can be rearranged within each other. Upon loading the document, a random assortment of these smaller divs are added to #boxtop. Below is a snippet of my HTML code: <html> &l ...

javascriptjqueryhtmlcssjquery-ui-sortable

Breaking a line within a list item will create additional spacing between the lines

Is there a way to break a line <br/> inside a <li> tag? For example: First line second line Second list item Third list item I've tried setting margin and padding to 0, but I still get an unwanted space between the lines. Any suggesti ...

htmlcss

Choosing the attribute value using jQuery/CSS

Looking for a way to retrieve attribute value using jQuery/CSS <dt onclick="GomageNavigation.navigationOpenFilter('price-left');"> I tried using $("dt[onclick='GomageNavigation.navigationOpenFilter('price-left')']") bu ...

javascriptjqueryhtmlcss

Empty gaps separating two divs nested within another div within a div (unable to function)

I'm diving into the world of HTML, CSS, and JS as I embark on creating a weather application. My vision is to include the temperature, followed by the city and its corresponding weather (accompanied by an icon), and lastly additional details like humi ...

htmlcssflexbox

The iPython terminal is not displaying properly due to a constrained screen width

When my iPython displays a long list, it appears as one tall column instead of utilizing the full width of the terminal screen. I have attempted to adjust the CSS in '.ipython/profile_default/static/custom/custom.css' by setting '.container ...

pythoncssipython

Issue with footer not properly aligning on the page's bottom

In my current project, I am utilizing both angularjs and node js for development. Within my index.html, the views are being called in the following manner: <div ng-include="'views/header/header.view.html'"></div> <div ng-view styl ...

htmlcssangularjsnode.jsng-view

The Reason Behind Angular Error when Using CSS Custom Tags

I have the following SCSS code: main{ width: 100%; height: 840px; /*background: red;*/ margin: 10px auto; position: relative; padding: 5px 0; } section{ width: 98%; height: 600px; margin: auto; display: flex; ...

htmlcssangular

Styling HTML elements using CSS within PHP echo statements

I am a beginner when it comes to PHP and I'm trying to figure out how to style this table. I tried creating a class, but changing the styles in a separate CSS file didn't work for me. Should I use style tags? How should I go about styling this? ...

phphtmlcss