Create a sleek and uniform design with Bootstrap by setting up three columns that maintain the same height

I am attempting to design a 3 column div that maintains equal height for all responsive rows, each containing an ICON and information.

<div class="container">
  <div class="row row-eq-height">
    <div class="col col-4 border">
        <i class="fas fa-home fa-5x"></i>
        <span>Column1</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-file-invoice fa-5x"></i>
        <span>Column2</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-exchange-alt fa-5x"></i>
        <span>Column3</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-gamepad fa-5x"></i>
        <span>Column4</span>
    </div>
    <div class="col col-4 border">
        <i class="fas fa-users fa-5x"></i>
        <span>Column5</span>
    </div>
    <div class="col col-4 border">Column6</div>
    <div class="col col-4 border">Column7</div>
    <div class="col col-4 border">Column8</div>
    <div class="col col-4 border">Column9</div>
    <div class="col col-4 border">Column10</div>
  </div>
</div>

  1. The div height should be based on the Icon size of the specific row only.
    I aim to maintain all heights equal even when there is no Icon present.

  2. The Icon size is currently fixed at fa-5x. How can I adjust the size of the icon based on the browser size?
    For example: sm-3x, md-4x, lg-5x, xl-6x

  3. Alignment of Icon and text.
    I intend to place the text directly below the ICON, with both the ICON and text centered horizontally and vertically.

htmlcssbootstrap-4

Answer №1

If you want to enhance the appearance of your code, consider incorporating these styles: I tested them out in responsive mode.

<style>
    .col-4{
    min-height: 100px;
    text-align: center;
    }
    .col-4 span{
      display:block
    }
    .col-4 i{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
    </style>

Answer №2

To ensure equal height for all cards, I am utilizing the h-100 class on the card element and nesting it within a col-* attribute. This approach guarantees that all cards will align with an equal height automatically.

Take a look at the snippet below:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="card h-100">
        <h4 class="my-2">column 1</h4>
      </div>
    </div>

    <div class="col-4">
      <div class="card mb-4 h-100">
        <h4 class="my-2">column 2</h4>
        Div with larger content that extents to equal height of all div
      </div>
    </div>

    <div class="col-4">
      <div class="card h-100">
        <h4 class="my-2">column 3</h4>
      </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

Why does Froala Editor not maintain formatting when retrieving data from the database?

I've been using the Froala editor to add content on my website, and it's doing well for inserting data into the database. However, I'm facing an issue when retrieving data from the database as it doesn't maintain the original formatting ...

javascripthtmlfroala

Split the page in half with a background image on one side and text on the other

Is there a way to split the page vertically, with a background image on one side and text on the other? I've been struggling to achieve this layout - the background image won't stay on the left while the text remains on the right. Can someone off ...

htmlcssimagebackgroundbackground-image

Conceal the Floating Panel when printing dialog box is open

I'm working on a floating panel that needs to be completely hidden when printing. I am using JSPanel3. I want the entire panel to only be hidden during the print display. HTML Code <div style="position: absolute; top: 30px; left: 20px" id="indxPo ...

angularjshtml

AngularJS utilizes JSON objects to store and manipulate data within

My task requires accessing information from an array that is nested inside another array in Json format. Here's a more detailed example: [ { "id": 1, "name": "PowerRanger", "description": "BLUE", "connections": [ {"id": 123,"meg ...

javascriptjsonangularjshtml

The text input is malfunctioning in the IE web browser

For my project, I am incorporating AngularJS but encountering an issue with the input type text in IE browsers specifically IE 11 and IE 10. The problem arises when clicking on the input box - while the focus is triggered, the cursor does not appear insid ...

jqueryhtmlangularjsinternet-explorer

What is the method for inserting a clickable link into a data-image line of code using CSS3?

Recently, I delved into the world of CSS and am still getting the hang of it, Below is a snippet of code that I have been working on, <div id='ninja-slider'> <ul> <li> <div data-image="images/md/1.j ...

javascripthtmlcssslider

Is there a way to incorporate a callback function for animation in cgscenegraph?

After creating my animation, I am interested in incorporating a callback function when the loop of the animation comes to an end. Is there a way you can guide me on achieving this? Thank you. ...

javascripthtmlanimationcanvasframeworks

Send the user back to the homepage without the need to refresh the page

When the user clicks "Okay" in my window.prompt, the code below opens a new tab. Is there a way to direct the user to the home page without opening a new tab? if (window.confirm("Do you really want to leave?")) { window.open("./Tutoria ...

javascripthtmlreactjswindowalert

Encountered an unforeseen token "<" that is causing the server to return a 404 HTML page instead of the intended .js

I am currently developing a to-do list application using Node.js Express and EJS. In the app, I have implemented a filtering functionality with a URL path of "/filter/query". Based on the selected category (either "lists" or "lastupdated"), the app filters ...

javascripthtmlnode.jsexpressejs

Creating a dynamic input box with an add/remove button in each row using jQuery

Need help with a jQuery-based UI that allows users to dynamically add input boxes. The desired look is as follows: Default appearance: INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON] Clicking on the [Add_Button] should add another row like this, and so on: ...

javascriptjqueryhtmldynamic

Position a div in the center both horizontally and vertically within a section, ensuring that each section expands to fill the entire page when scrolling

I'm currently working on coding a page layout where each section takes up the entire screen. My goal is to have the content within each section centered both vertically and horizontally. I'm unsure if this is achievable, so any guidance or advice ...

htmlcssweb

How can I make the expired date display in red color in a JavaScript date property?

In my HTML, I have 4 different dates. The expired date "END MAR 20" should be displayed in red color instead of green. The next date, "END APR 29," should be in green color. All preceding dates should also be displayed in red. I have successfully filtered ...

javascriptjqueryhtmlcolors

Accessing and showcasing MySQL information using hidden forms

I'm facing an issue with displaying the selected data from MYsql. The values are stored in my database fields, and I want the review of the chosen movie to show up when the user clicks the submit button, but it's not working as expected. Below i ...

phphtmlmysql

Python // Regular Expressions // Categories

My attempt to retrieve specific text content from various HTML tags using BeautifulSoup (BS4) proved unsuccessful. The code snippet I used only managed to extract the first text item after the <td tag, leaving out the rest that I needed. My goal is to p ...

pythonhtmlregexbeautifulsoup

The CSS style tag does not function in Safari

I am trying to dynamically load background images using CSS based on the display resolution using the @media keyword. This method works perfectly in Firefox and Chrome, but unfortunately, it does not seem to work in Safari. Is there something I might be ...

csssafari

Having difficulty displaying data in the proper format with two-way binding

In the realm of my webpage, I have a plethora of headings, paragraphs, images, and other data at my disposal. From the backend, a dataset is provided to me that includes an array with various properties housing the desired information. The challenge lies i ...

htmlcssangulartypescript

Looking for a way to keep the mobile ad unit fixed at the bottom of the screen

I am currently working on incorporating a 320x50 mobile ad into the mobile version of my website. The goal is to have the ad fill the entire width of a mobile device. However, the issue I'm facing is that the ad appears small and does not stretch acro ...

cssmobile

How come an absolutely positioned element does not disregard its sibling's position and appears after it?

<div> is styled flexibly, while <section> is inserted within it and formatted statically. However, <section> shows up underneath the lower right corner of the image, rather than at the upper left corner of its flexible parent. I am strugg ...

csscss-position

javascript cannot utilize html reset functionality

My drop down menu includes an onChange event that triggers a JavaScript method. However, when I select a new value and then click the reset button, the dropdown reverts back to its original value but the onChange event does not fire. <select onChange= ...

javascripthtml

Ways to reload an independent page in order to access PHP session variables:

Starting off, I want to mention that my approach may not be the most efficient. As a novice in JavaScript and PHP, I am aware that there are better and simpler ways to achieve what I'm attempting. The issue seems to be related to session variables an ...

javascriptphphtmlajax