Tips for achieving vertically centralized components with uniform height columns in Bootstrap 4

I tried implementing the solution provided in this question: Bootstrap 4 vertical center - equal height cards

However, I am still facing an issue. Despite applying the suggested code:

<div class="cycle-des h-100 justify-content-center">Product Cycle</div>

Here is a screenshot illustrating the problem:

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

You can check out my Demo for more details.

Answer №1

Here is the code snippet for you:

  <div class="container">
      <div class="row">
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="cycle-des h-100 align-items-center justify-content-center">Product Cycle</div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">01</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">handloom: 4-7days</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">02</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">S/S MQ: 50M</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">03</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">S/S: 25-30days</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">04</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">Order MQ: 2000M</div>
            </div>
          </div>
        </div>
        <div class="col-md-4 mb-3 pr-md-0">
          <div class="row no-gutters h-100">
            <div class="col-4 col-lg-3">
              <div class="cycle-num h-100 align-items-center justify-content-center">05</div>
            </div>
            <div class="col-8 col-lg-9">
              <div class="cycle-des h-100 align-items-center justify-content-center">Order delivery date: 35-50 days</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    .cycle-num, .cycle-des {
      color: #fff;
      text-align: center;
      padding: 20px 10px;
      display: flex;
    }
    .cycle-num {
      background-color: #666;
    }
    .cycle-des {
      background-color: #333;
    }

Consider optimizing the div structure to improve the efficiency of your code. You can use grid classes selectively for layout purposes.

Check out this link for a live demo!

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

Managing form submissions using Jquery and checkboxes

Whenever I submit my dynamically created form, all checkboxes briefly become selected for a split second. Does anyone have an explanation for this behavior? Is it common or is there something wrong with my code? Although the form submits correctly, it migh ...

Cut an image using CSS while maintaining its original quality

I am currently working on an upload page where users can upload images. Here is the link to the page: MyPage. However, I would like to implement image cropping functionality that displays more of the image rather than just a small portion as it does now. A ...

Tips for adjusting the angle in SVG shapes

I have designed an svg shape, but I'm struggling to get the slope to start from the middle. Can someone please provide assistance? <svg xmlns="http://www.w3.org/2000/svg" fill="none"> <g filter="url(#filter0_b_1_2556)"&g ...

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

PHP loading incorrect CSS file

I have a question about how I am linking a CSS file in my PHP program: <html> <head> <title>Untitled Document</title> <link href='sa_mal_link_1.css' rel='stylesheet' type='text/css'> </head> ...

Creating a sleek CSS animation for a slot machine effect: Ensuring it stops smoothly and at a specific time limit

I'm working on creating a CSS animation that mimics a slot machine, but I'm struggling to achieve a smooth transition. .scrollable { height: 150px; width: 150px; margin: 0 auto; padding: 0; background: #000; ...

When the height of the window decreases, scrolling is not implemented

Having trouble adjusting the height of my Responsive Modal when the window height decreases. The content is slipping under the window and the scroll bar isn't adjusting accordingly. It seems like the nested div structure is causing issues. https://i.s ...

Display Page Separation with JavaScript

I am working on a project where I have created payslips using Bootstrap through PHP. To maintain organization, I am looking to create a new page after every 6 payslips. Below is the code snippet that I am using to generate the payslips: foreach($results a ...

What is the best way to apply CSS hover effects to specific cells within a table?

Is there a way to selectively apply CSS hover effects to only specific cells in a table? And can I disable it on the cells where I don't want it? td:hover { border-style:dotted; border-color:#F60; border-width:medium; border-left-styl ...

Is there a way to automate testing for my web application bundled with webpack against FUOC?

After creating a React + Redux web app bundled with webpack, I encountered a bundling error that caused my website to display flash of unstyled content (FUOC) behavior. Certain components did not inject their CSS into the server response, resulting in pa ...

What are the steps to format text into 2 columns with a personalized design?

As I develop a website using HTML, CSS, and jQuery, I encountered a layout challenge. The text on the page is designed in a 2-column style, with an image positioned before it. Currently, the structure looks like this: <div> <div style=" ...

Switch div and expand/shrink the rest

Apologies for what might seem like a trivial question, but after working for a few hours now, I'm finding it difficult to wrap my head around this. My initial instinct is to handle this by manipulating the entire div structure with JavaScript, but I c ...

Tips for embedding a script snippet into an Angular HTML file

Incorporating Bootstrap tooltip in a component using CLI and Bootstrap: Take note that Tooltips need to be initialized with jQuery: <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> W ...

Delay the jQuery event handler for a few milliseconds before triggering

I'm currently working on a navigation menu, but I've encountered some bugs and I'm struggling to fine-tune it completely. Here are the issues I'm facing, and any help or solutions would be greatly appreciated. The menu items (About ...

What is the process for adjusting the switch size in react-bootstrap?

I've been struggling to increase the size of the react-bootstrap switch without success. I searched through the documentation and tried various methods, but couldn't find a solution other than directly modifying the bootstrap css. Here's the ...

Detecting whether a browser is capable of supporting dark mode

One method to determine if dark mode is active is by using prefers-color-scheme: dark: const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; Is there a way to detect if a browser supports dark mode as well? (By "supports ...

The content on the page is not visible when viewing on an Android device in

After spending a considerable amount of time browsing StackOverFlow for coding solutions, I have come across a problem that I can't seem to find an answer for. Yesterday, I made some changes to the media queries on my site in order to incorporate a dr ...

issues encountered when trying to integrate bootstrap.js in Django framework

My website is built using the Django templating engine with Bootstrap for design and basic JavaScript. While the CSS components from Bootstrap are working fine, I'm having trouble getting the JavaScript to work: {% load staticfiles %} <!d ...

Bootstrap is having trouble properly organizing the columns within the row

I am facing a challenge with arranging three columns in a row: Interested listings | Basic profile | Connections However, when the screen size is reduced to that of a phone, they should be stacked like this: Basic profile Interested listings ...

Learn the process of creating a unique item layout to suit your preferences

Exploring the use of div to create the desired layout but struggling to achieve my goal .skills-container { height:50px; /* aiming for around 50px */ padding:5px; } .skill-pic { width:48px; height:48px; } .skill-content { } .skill-content p { } .progres ...