What is the best way to design a scalable row of square elements using Bootstrap 5?

Looking to create a set of 6 Bootstrap 5 cards in square dimensions to function as buttons. Each card should be col-xl-2 wide and exactly square in height.

I've started creating the cards with the code below. Can anyone provide guidance on how to achieve this design?

.card-buttons:before {
  content: "";
  display: block;
  padding-top: 100%;
  align-self: center!important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4abb4a9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container-fluid">
  <div class="row mt-4 ">
    <div class="col-2 mx-auto">
      <div class="card card-body card-buttons">
        <i class="fa fa-comments"></i>
      </div>
    </div>
    
    <div class="col-2 mx-auto">
      <div class="card card-body card-buttons">
        <i class="fa fa-comments"></i>
      </div>
    </div>

    <div class="col-2 mx-auto">
      <div class="card card-body card-buttons">
        <i class="fa fa-comments"></i>
      </div>
    </div>

    <div class="col-2 mx-auto">
      <div class="card card-body card-buttons">
        <i class="fa fa-comments"></i>
      </div>
    </div>

    <div class="col-2 mx-auto">
      <div class="card card-body card-buttons">
        <i class="fa fa-comments"></i>
      </div>
    </div>

    <div class="col-2 mx-auto">
      <div class="card card-body card-buttons">
        <i class="fa fa-comments"></i>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrap

Answer №1

To achieve this, we can transform the cards into flex rows within a flex row container so that the pseudo-elements defining their height do not stack vertically with other child elements.

.card:before {
  content: '';
  padding-bottom: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c8e83838c838383818280e5829d928994">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="container-fluid">
  <div class="row d-flex mt-4">
    <div class="col-2">
      <div class="card card-body card-buttons flex-row justify-content-center align-items-center">
        <i class="fa fa-comments"></i>
        <i class="fa fa-comments"></i>
        <i class="fa fa-comments"></i>
      </div>
    </div>
    <div class="col-2">
      <div class="card card-body card-buttons flex-row justify-content-center align-items-center">
        <i class="fa fa-comments"></i>
      </div>
    </div>
    <div class="col-2">
      <div class="card card-body card-buttons flex-row justify-content-center align-items-center">
        <i class="fa fa-comments"></i>
      </div>
    </div>
    <div class="col-2">
      <div class="card card-body card-buttons flex-row justify-content-center align-items-center">
        <i class="fa fa-comments"></i>
      </div>
    </div>
    <div class="col-2">
      <div class="card card-body card-buttons flex-row justify-content-center align-items-center">
        <i class="fa fa-comments"></i>
        <i class="fa fa-comments"></i>
      </div>
    </div>
    <div class="col-2">
      <div class="card card-body card-buttons flex-row justify-content-center align-items-center">
        <i class="fa fa-comments"></i>
      </div>
    </div>
  </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

Increase the height of the div element by a specified number of

Is there a way to dynamically expand a div's height using CSS without knowing its initial height? I want to increase the height by a specific amount, such as "x px taller" regardless of its starting size. For example, if the div starts at 100px tall, ...

htmlcss

Tips for creating a seamless merge from background color to a pristine white hue

Seeking a seamless transition from the background color to white at the top and bottom of the box, similar to the example screenshot. Current look: The top and bottom of the box are filled with the background color until the edge https://i.stack.imgur.com ...

javascriptcssreactjstypescriptmaterial-ui

Font Awesome icons displayed using the <i class="icon-ok"></i> markup are not styled correctly and do not respond to events in Chrome

I implemented Font-Awesome, an iconic font designed for use with Twitter Bootstrap. Here is the markup: <i class="icon-remove reset-preference-button"></i> And here is the CSS: .reset-preference-button { cursor: pointer; } For JavaScript f ...

jquerycsstwitter-bootstrapfont-awesomejquery-events

Alignment of a div at the bottom inside a jumbotron using Bootstrap 4

Searching for answers on how to vertically align a div within a jumbotron, I have come across plenty of solutions for middle alignment but none for bottom alignment. <section id="profileHero"> <div class="container"> <d ...

csstwitter-bootstrapbootstrap-4

housing the picture within a CSS grid

I am new to working with css grids and I have encountered an issue. The background image I want to use is larger than the size of the grid itself. How can I make the image fit within the grid without exceeding its boundaries? When I attempt to insert the ...

htmlcsscss-grid

"Adjusting the margin for dropdowns in a Bootstrap navbar

Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...

htmlcsstwitter-bootstrap

jquery plugin causing issues with bootstrap button functionality

Currently, I am utilizing the jQuery form plug-in to post my form in an Ajax way. The post function is functioning perfectly with the default button. However, it seems to encounter issues when I try to use a custom Bootstrap button as shown below. Could so ...

javascriptjqueryajaxtwitter-bootstrapjquery-plugins

Steps for sharing a word file between two users

Can someone help me with sending a file to another user and providing them with a download link? I have already attached the file to the database table of the recipient, but now I need to figure out how to allow them to download and view it. I've hear ...

htmlruby-on-railsdownloadcontrollerpaperclip

What are some ways to prompt electron to refresh its rendering with updated CSS?

I am currently in the process of developing my first Electron app on Windows 10, using Visual Studio Code and Git Bash as my primary tools. However, I have encountered a frustrating issue where my app has suddenly stopped updating based on css changes. Spe ...

cssnode.jselectronbrowser-cache

Shifting and implementing various styles across numerous elements at the same time

There is an anchor tag containing two spans... <a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a> When hovering over the anchor tag, I want to c ...

css

Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

I've been tasked with creating two toggle tabs/buttons in a single column on a website where visitors can switch between them without affecting the page's other elements. The goal is to emulate the style of the Personal and Business tabs found on ...

javascripthtmlcsstabstogglebutton

``Only Firefox supports jQuery animations, all other browsers fail to render them properly

This particular issue is a bit complex to articulate, so I'll begin by providing the code and then proceed to elaborate on the problem as best as I can. I'm assuming that you've already compared the results in Firefox and other browsers. He ...

jquerycssjquery-animate

What is the correct way to show a JavaScript response on the screen?

Here is the JavaScript code I used to call the server API: <script type='text/javascript'> call_juvlon_api(apikey, 'getAvailableCredits', '', function(response) { document.getElementById('show').innerHT ...

javascripthtmljson

Make real-time edits to JavaScript code on a webpage

Is there a method aside from using Firebug in the DOM view to edit live JavaScript embedded within an HTML page? For example, code like this within a .html file: <script type="text/javascript> // code here </script> Thank you. ...

javascripthtml

Make sure the navigation bar is fixed to the top of the page only

Looking for a solution to stick the navigation menu to the top of the screen only when the screen is wider than 782px. Progress so far: https://jsfiddle.net/ah4ta7xc/1/ Encountering an issue where there is an unintended gap at the top when applying the s ...

jqueryhtmlcss

Switching up the Label Colors in Chart.JS

It's been a while since my last question, so please bear with me if I'm not following the rules. I've attached my current code and a reference image of the chart. I am completely new to working with ChartJS. The situation is a bit unique: t ...

javascripthtmlcsschart.js

Automatically adjust padding in nested lists with ReactJS and MaterialUI v1

How can I automatically add padding to nested lists that may vary in depth due to recursion? Currently, my output looks like this: https://i.stack.imgur.com/6anY9.png: However, I would like it to look like this instead: https://i.stack.imgur.com/dgSPB. ...

cssreactjstypescriptmaterial-uinested-lists

Is there a way to modify the appearance of a text box to suit individual preferences?

Is it possible to alter the shape of a text box, creating a rectangle with a portion removed from one side? I have included an example image for reference. I came across clip-path: polygon in CSS, but it seems to only accept four coordinates. Thank you i ...

htmlcsstextbox

Adding a certain number of days to a date within an existing ng-module in AngularJS

Hey everyone, I'm new to using AngularJS and I am currently attempting to incorporate one ng-module value into another ng-module date input within AngularJS. For example: if the date is 17-08-2016 and we add 20 days, the expected result should be 03-0 ...

htmlcssangularjsmeanjs

What is the process for incorporating a CSS class into a preexisting Woocommerce/Wordpress widget?

Looking for a way to add additional classes to the Woocommerce Product Categories Widget without tampering with the original source code or creating a replacement widget? The widget_display_callback seems like the way to go, but the available documentation ...

csswordpresswoocommerce