Arrange a Matrix of Bootstrap Buttons

I'm struggling to align an array of buttons with varying lengths so that the center of each button lines up with the button below it. I've attempted several solutions, thinking that using justify-content-around would be the solution, but it hasn't worked as expected. I also tried using mx-auto, but that didn't solve the issue either.

<div class="d-flex justify-content-around">          
      <a href="/" role="button" class="btn btn-info mx-auto btn-sm">these words</a>
      <a href="/" role="button" class="btn btn-info mx-auto btn-sm">are</a>
        <a href="/" role="button" class="btn btn-info mx-auto btn-sm">different lengths unfortunately</a>
  </div>
  <div class="d-flex justify-content-around">
      <a href="/" role="button" class="btn btn-info mx-auto btn-sm">aa</a>
      <a href="/" role="button" class="btn btn-info mx-auto btn-sm">bbb</a>
        <a href="/" role="button" class="btn btn-info mx-auto btn-sm">cccccccc</a>
  </div>

Is there a recommended fix for this alignment issue, especially in terms of utilizing Bootstrap 4.5?
csstwitter-bootstrapbootstrap-4

Answer №1

To achieve centered content in a grid layout with 2 rows and 3 columns each, you can use the following code snippet:

<div class="row">
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">these words</a>
  </div>
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">are</a>
  </div>
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">different lengths unfortunately</a>
  </div>
</div>

<div class="row">
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">aa</a>
  </div>
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">bbb</a>
  </div>
  <div class="col d-flex justify-content-center">
    <a href="/" class="btn btn-info btn-sm" role="button">cccccccc</a>
  </div>
</div>

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

Utilizing Javascript Conditional for Substitution

Currently, I have a JavaScript function that replaces all links with registration messages: <script> function replaceLinks() { var links = document.querySelectorAll('.restore a:link'); for (var i = 0; i < links.length; i++) { ...

javascriptcss

Setting up breakpoints for nested rows in Bootstrap can be achieved by utilizing the responsive

Currently, I am in the process of learning how to create a responsive website. One thing that has me puzzled is how to set the breakpoints for the content when the screen size changes. Here is what I am aiming to achieve: https://i.sstatic.net/DeyD0.png ...

htmlcssbootstrap-4responsive-designfrontend

Trigger fixed element to appear/disappear when scrolling using JavaScript

I've tried multiple solutions, but I can't seem to get this functionality to work properly on my website. I'm attempting to create a "schedule a demo" button similar to the one on www.bamboohr.com Currently, I have the following html, css, ...

javascriptjquerycssshow-hide

Having trouble with popovers after upgrading to bootstrap v4

I am facing an issue while trying to migrate Bootstrap from version 3 to 4. The problem specifically lies with popovers and the popper.js library. Each time I hover over an element, the following error is displayed: Uncaught TypeError: Cannot read property ...

javascriptangularjstwitter-bootstrapbootstrap-4popover

Creating a Responsive Table with HTML and CSS in Magento

I'm having trouble formatting a table on my Magento website using the HTML Code Element. Even with responsive media types, the table is still extending off the screen on mobile devices. Check out my Magento Responsive Table for Mobile <style&g ...

htmlcssmagento

Ensure the webpage is set to have a minimum width of 1024 pixels

Is it possible to make a webpage that utilizes bootstrap, Angular 2x, and Scss stop being responsive once the screen width reaches 1024px? I would like the layout to stay fixed at this size and enable horizontal scrolling for users who resize their browser ...

htmlcsssass

Tips on how to maintain the underline when text is split into two sections

Revised This question is distinct from the duplicate one. I am specifically addressing the issue of ensuring the underline continues until the end of the text, regardless of how many lines it spans. The challenge I am facing is with displaying the underl ...

htmlcssunderline

The menu remains open at all times

Currently, I am developing a web-accessible menu that needs to comply with 508 standards. However, I encountered an issue where the menu does not close when I reach the last item using the TAB key on the keyboard. Additionally, I am looking for a solution ...

javascripthtmljquerycssdrop-down-menu

Eliminate the empty space below the fixed footer in Bootstrap 4 when viewing on an iPhone

When I view my website on small mobile devices like 'iPhone SE', I notice white space below my sticky footer. I used the same footer and CSS from Bootstrap examples, but I can't seem to get rid of the whitespace. I initially thought it was ...

twitter-bootstrapbootstrap-4

Creating a dynamic radio button group with buttons

Currently, I am occupied with crafting some helper functions for my colleagues in the office who are not very familiar with Bootstrap. This involves taking basic HTML and transforming it into Bootstrap layouts. Specifically, I am working on creating a jus ...

javascriptjqueryhtmltwitter-bootstrap

The idea behind this jQuery and CSS 3 animation is to create a dynamic visual of moving along a road that disappears into the

At the outset, let's clarify that I am seeking a conceptual solution or approach rather than actual working code. The Issue at Hand I have been tasked with exploring a navigation concept for a timeline wherein you would walk down a road towards the ...

jquerycssanimation3d

Using JavaScript to animate a background composed of SVG shapes

My code is successfully adding an svg background with js and rotating it using set interval. It works perfectly on Chrome, but not on any other browser. Any suggestions on how to make it work universally? let i = 0; setInterval(() => { document.b ...

javascriptcsssvgjquery-animate

Creating a SASS rule for targeting an element only if its parent does not have a specific classname can be achieved by using the '&' symbol in

Before anything else, I want to express my apologies if a similar query has been raised previously. Unfortunately, finding such specific cases can be quite challenging. My objective is to style every "a" element, excluding those enclosed within h1, h2, h3 ...

htmlcsssassparent

Shifting and positioning the card to the center in a React application

I am currently constructing a React page to display prices. To achieve this, I have created a Card element where all the data will be placed and reused. Here is how it appears at the moment: https://i.stack.imgur.com/iOroS.png Please disregard the red b ...

javascripthtmlcssreactjs

Adding an image to the right side of a jumbotron component in Bootstrap

Hey there! I'm trying to add an image to the jumbotron component in Bootstrap. I'd like to position it on the right side of the jumbotron. Here's the code I have so far: <section class="jumbotron text-center"> <div class="conta ...

twitter-bootstraptwitter-bootstrap-3bootstrap-4

Tips for automatically incorporating animation upon page initialization

I'm looking to add an automatic image effect when the page is loaded. I currently have this code in my js file: $(window).ready(function(){ $(pin).click(function(){ $("#pin01").show().animate({left: '650px'}); }) }); Here is the HTML wit ...

javascriptjquerycsshtml

Implement jQuery Styling using .toggleClass on Freshly-Added DOM Elements

I am currently developing a webpage with a unique "notepad" widget, and I have made some adjustments to the interface: The notepad is essentially an aesthetically modified <ul> where each line on the notepad page is represented by its own <li> ...

javascriptjqueryhtmlcssdom

Tips on preventing a div from being draggable within another div that is draggable

I have a plugin called Owl-Carousel that allows for sliding functionality. It automatically slides, but you can also manually slide it by dragging the slides. I want to insert some divs inside the slides; however, if the drag starts from that div, I don& ...

javascriptjqueryhtmlcssowl-carousel

Why is scroll-snap-type not functioning properly?

I have attempted to incorporate snap-scroll on my page, but it doesn't seem to be working. Can someone please point out where I may have gone wrong in my CSS code? Thank you body{ margin:0; overflow-y: scroll; scroll-snap-type: y proxim ...

htmlcsssass

Struggling to align my image and text next to each other in three different sections using Bootstrap

Having difficulty aligning my images to the left of each block of text, they keep appearing underneath. I am utilizing col-md-4 for three sets of text and image. .container { float: left; display: block; } <div class="container"> <!--Row ...

htmlcsstwitter-bootstrap