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.

https://i.sstatic.net/iqZyk.png

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

css the vertical column is unable to reach 100% vertical

Check out my website at I need help getting the black column with my thumbnails to extend all the way down on the site. Here is the CSS code for the thumbnails: #thumbnails { position:absolute; top: 110px; width: 190px; height: 100%; ...

css

The Failure of window.pushState in HTML 5 History

Looking to implement ajax loading for updating center content and URL without refreshing the page. Everything seems to be working fine except for the history management. It appears that window.pushState is not properly recording URLs or the popstate even ...

javascriptjsonhtmljquerybrowser-history

When working with JavaScript, the `textarea` value property will not recognize line breaks or white spaces when being read

Recently, I've been developing a browser-based notebook app. However, I encountered an issue where if I type a note like this: *hello this is my first note The app displays it as: hello this is my first note Additionally, I want elements with the ...

javascripthtmlcssbootstrap-4

tips for creating a jquery/css scales animation

I am looking to implement a unique feature on my website where I create scales with a balancing effect. The scales should mimic an up and down motion continuously. You can see an example of what I'm referring to here Is there a way in jQuery or CSS t ...

jqueryhtmlcssjquery-animate

Issue with jQuery .hover() not functioning as expected

The issue I'm encountering is just as described in the title. The code functions correctly on all divs except for one! $(".complete-wrapper-1").hide(); var panelHH = $(".file-select-wrapper").innerHeight; $(".files-button").hover(function(){ $(" ...

javascriptjqueryhtmlcss

I've been stuck on this for the past hour, trying to figure out why /js/bootstrap.min.js can't be located

I'm having an issue with the code in base.html while trying to create a bootstrap starter template. I copied it from bootstrap but when I run it, I get an error related to /js/bootstrap.min.js. Can someone help me figure out what's wrong? Thank y ...

javascripthtmljquerydjangobootstrap-4

I'm looking for guidance on how to merge my JavaScript and CSS files together. Can anyone provide me

As a beginner in web development, I have been looking into combining JS and CSS files. However, explanations using terms like minifies and compilers on platforms like Github and Google are still confusing to me. Here are the CSS files I have: bootstrap ...

javascriptcssminify

Issue with ChartJs version 2.8.0: The custom tooltip remains visible even when clicking outside the chart canvas or moving the mouse pointer

I am utilizing ChartJs to display a line chart with a custom tooltip that appears upon the click event of the data points. The challenge I am facing is that the custom tooltip remains visible even when the mouse pointer is outside the chart canvas area. ...

javascripthtmlcsschartschart.js

Is there a way to optimize downloading multiple identical images using html, css, jquery, etc.?

My chess board features 64 squares, each with a picture of a board piece on either a light or dark square. To ensure proper formatting, a Clear knight is placed on the board. The design utilizes a div element with a background image (representing light or ...

javascriptjqueryhtmlcssimage

Loading Ajax content into div (Wordpress) without pre-loading the font can cause display issues

Currently, I'm implementing a JavaScript function within Wordpress using Ajax to load the content of a post into a modal div when specific elements are clicked. Here is an example of how the JS function appears: function openProjectModal($that) { ...

javascriptphpcssajaxwordpress

Storing user data on the client side of a website is most effectively accomplished by

I am looking to incorporate the following features: I would like to personalize the user experience by greeting them with their login name on the webpage (e.g. 'Hello, Fred!'). I also want to display or hide certain content based on the user&apo ...

javascripthtmlsecurityweb

Utilize jQuery to dynamically apply Bootstrap classes while scrolling through a webpage

Having an issue with jQuery. Trying to include the fixed-top class (Bootstrap 4) when scrolling, but it's not working as expected. jQuery(document).ready(function($){ var scroll = $(window).scrollTop(); if (scroll >= 500) { $(".robig").a ...

javascriptjqueryhtmlbootstrap-4

Height problem with the data-reactroot component

On one of my web pages, there is a data-reactroot element with a height of approximately 1906px. However, the surrounding divs and html tags have a height of only 915px. I am trying to figure out how to make all the enclosing elements match the same heigh ...

htmlcssreact-router

The issue with collapsible elements not functioning properly in an Angular application involving CSS and JS

My implementation of collapsible in a plain HTML page looks like this: <!DOCTYPE html> <html> <head> <title></title> <style> button.accordion { background-color: #777; color: white; cursor: pointer; p ...

javascripthtmlcssangular

What is the user-agent string for the Safari home screen?

Is there a unique user-agent string specifically for Safari on IOS that identifies it as being in "Home screen" or "app mode"? I've observed a bug on IOS8 where the browser window appears incorrectly, with the time and battery information overlapping ...

htmlioscsssafariuser-agent

Add the value of JQuery to an input field rather than a select option

Is there a way to append a value to an input field using JQuery, instead of appending it to a select option? Select option: <select name="c_email" class="form-control" ></select> JQuery value append: $('select[name=&q ...

htmljquery

generating dynamically evolving controls within the MVC framework

I am looking to dynamically create controls in a view based on the source. For example, if the type is a text box, I want to generate a text box; if it is a check box, I want to create a check box dynamically in MVC. Below is the snippet of my current code ...

htmlasp.net-mvc-4razorgeneratorrazor-declarative-helpers

Issue with Safari div not exhibiting proper overflow functionality

I'm looking to set up a webpage with a single sidebar and content area. Here's how I envision it: <div id="mainWrapper"> <!-- Sidebar --> <div id="sidebar"> <p>Sidebar</p> <p>Sidebar< ...

htmlcsssafari

Arrange divs adjacent to each other without any gaps in between

My HTML code includes elements from Twitter Bootstrap and AngularJS framework. <div class="item item-custom-first"> <select class="form-control" style="display:inline; float:right" ng-model="requestdata.units ...

javascripthtmlcsstwitter-bootstrap

Utilizing CSS classes to namespace pseudo-selectors

After attempting to search on Google, I am struggling to find the right keywords. I'm trying to apply a pseudo-selector only to a specific class. In this scenario, if we remove the specified class, the last Hi should appear in blue. However, my expe ...

css