Bootstrap 4: Ensuring consistent height for all rows

I'm having trouble creating a preloader with rows. I want to divide my grey rectangle into 3 rows, each with 33% height.

Here's what I need:

  • In the first row, a SVG logo
  • In the second row, a loader
  • In the third row, some text

Here's the visual representation of what I am trying to achieve:

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

Below is the code I have so far: 

#loader-modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0,0,0, 0.9);
    z-index: 100000;
}

.rectangle-chargement {
    width: 25%;
    height: 50%;
    top: 25%;
    left: 37.5%;
    position: absolute;
    background-color: #E2E2E2;
    border-radius: 0.15rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>



<div id="loader-mod…

Any suggestions on a cleaner and effective way to implement this? Please share your insights!

cssbootstrap-4

Answer №1

If you're looking for a cleaner way to handle heights without hard coding them, consider using flexbox with a column flow direction. By setting the flex-grow property of flexbox children to 1, you can allow them to grow dynamically without specifying fixed heights for each row.

This approach eliminates the need to manually set heights and allows for a flexible number of rows.

<div class="rectangle-chargement d-flex flex-column">
    <div class="rectangle-chargement-row flex-grow-1">
        Logo
    </div>
    <div class="rectangle-chargement-row flex-grow-1">
        Loader
    </div>
    <div class="rectangle-chargement-row flex-grow-1">
        Some text
    </div>
</div>

https://i.sstatic.net/3xFp0.png

See demo here: https://jsfiddle.net/davidliang2008/sngkbLcq/32/

To center the content within each row, apply flexbox properties to align and justify the items in the center.

<div class="rectangle-chargement d-flex flex-column">
    <div class="rectangle-chargement-row flex-grow-1 
        d-flex justify-content-center align-items-center">
        Logo
    </div>
    <div class="rectangle-chargement-row flex-grow-1 
        d-flex justify-content-center align-items-center">
        Loader
    </div>
    <div class="rectangle-chargement-row flex-grow-1 
        d-flex justify-content-center align-items-center">
        Some text
    </div>
</div>

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

See centered demo here: https://jsfiddle.net/davidliang2008/sngkbLcq/36/

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 is my Tailwind Grid displaying elements in a horizontal layout?

<div className='grid grid-cols-12 gap-12 mb-8'> <div className='col-span-8'> <div className='box'></div> </div> <div className='col-span-4'> <d ...

cssnext.jstailwind-csstailwind-ui

What are some strategies for creating a smooth transition with a max-height of 0 for a single-line div?

I have a div that is one "line" in height. When a button is clicked, I want it to disappear and simultaneously another div with more lines should appear. I have managed to make this work, but no matter what I do, the one-line div disappears very quickly al ...

jqueryhtmlcss

What is the best way to insert an image between two sections using CSS?

As I work on a new webpage, I find myself stuck (yes, I'm a beginner :-) ). I have a header followed by a section, and I would like to place images in between the two. However, despite my attempts to position the images, they keep getting hidden "und ...

htmlcssz-index

Within a container, there are two divs separated by a white bar

Hello everyone, I am in need of creating a unique slideshow for my website and I want to start by splitting a div into two sections using a slightly skewed diagonal line that is either semi-transparent black or solid white. I have searched extensively onli ...

htmlcss

Images that dynamically adjust within the confines of a single div

My issue involves a simple script that includes two responsive images. When the window is minimized, the images adjust accordingly. However, when I place both images within the same div like this: <div class="wrapper"> <div class="block"&g ...

htmlcssresponsive-images

How to design 'Sliding gallery panels' using jQuery and CSS3?

Usually, I know how to start a project with tutorials or some experience, but this time I'm stuck on what to even call it. Simply defining the concept could help me search for the right resources. Here's a quick mockup I put together: I want to ...

jquerycsssliderhtml5-canvaspanel

Angular Universal causes SASS imports to malfunction

Check out this sample app that you can download to see the issue in action: https://github.com/chrillewoodz/ng-boilerplate/tree/universal I am currently working on implementing angular universal, but I'm encountering an error with a SCSS import in o ...

cssangularsassangular-universal

The correct functionality of canvas coordinates may become unreliable once CSS has been implemented

After successfully setting up my drag and drop game in canvas, I decided to make my canvas responsive by adding the following code to my css file: #canvas { width:100% } However, this adjustment caused a discrepancy in my coordinates. Now, when I cli ...

csshtmlcanvasresponsive-design

Refresh the data in a table upon clicking the menu

I am looking to develop an accordion MENU, but unsure if I should use divs or <ul>. When a submenu is clicked, I want to execute a mysql query to update the data in the table next to the menu. I'm not sure of the best approach and whether to uti ...

phphtmlcssajax

Utilizing Bootstrap 4 to arrange each card in its own row

On small screens, I want Bootstrap to display 1 card per row, 2 cards per row on medium screens, and 3 cards per row on large screens. I'm using <div class="col-sm-12 col-md-6 col-lg-4"> and it's working for medium and large screens, but o ...

htmlcssbootstrap-4

How can the top height of a jquery dialog be reduced?

Just starting out with jquery, I've got a dialog box and I'm looking to decrease the height of this red image: https://i.sstatic.net/BuyQL.png Is there a way to do it? I've already made changes in the jquery-ui.css code, like so: .ui-dia ...

javascriptjqueryhtmlcss

Using CSS to position a pair of divs containing text and images side by side

Is there a better approach to creating two divs and two pictures without using negative margins, similar to the example shown here? ...

csslayout

Provide the email address to use on the forum

Is there a way to code an email address in HTML that will be invisible and undetectable by forums? Thank you in advance. I'm looking for a more advanced solution like this one! <h>mariaburkke76</h><h><h><h><h>< ...

javascriptphpcsshtml

Having trouble with the CSS drop down menu in Internet Explorer 10?

Can you assist me with a challenge I am facing? I am currently working on creating a dropdown menu using only HTML and CSS. However, I have encountered an issue where the hover function is not functioning properly in IE10, although it works perfectly fine ...

htmlcssinternet-explorer-10

Unable to retrieve the DOM element using jQuery

I'm currently facing an issue with fetching a DOM element from a jQuery selector array. var index = $(this).index(); $titleElement = $(".title:not(.small)")[index]; Unfortunately, the code above only gives me the text and not the actual DOM element ...

javascriptjqueryhtmlcssdom

When combining <a> with the class line-through, the line does not appear

I am currently utilizing a class to replace the deprecated strike in HTML: .entfall { text-decoration: line-through; } However, when using Firefox 38.x and the following code: <span class="entfall"><a href="some link">text</a></span ...

htmlcss

Height specification in Tailwind Grid

Hi there! I'm currently working on implementing a grid system in NextJS using Tailwind CSS. However, I've hit a roadblock when it comes to automatically sizing the grids to fit the parent element. Let me illustrate my issue with two images below ...

csslayoutnext.jstailwind-csscss-grid

Issues surrounding the determination of CSS attribute value using .css() function within a variable

I have been working on a function to change the color of a span dynamically from black to a randomly selected color from a predefined list. However, I am encountering an issue with the .css("color", variableName) part of my code and suspect that my synta ...

javascriptjquerycss

Scaling down the screen for a smaller display

Having trouble achieving a specific effect and could use some assistance. My goal is to create an action where, upon clicking on the nav element (for simplicity, I've set it to be triggered by clicking anywhere on the body), the following should occur ...

javascriptjqueryhtmlcss

Unexpected problem discovered with Firefox and JqueryUI - content is misaligned within the dialog box

I seem to be having an issue with a dialog that I recently set up. I've been working with jqueryUi for quite a while so I'm not sure why I can't figure this out. When using Firefox, I noticed that the dialog opens and closes when clicking " ...

jquerycssjquery-uimodal-dialog