Guide on building a dynamic grid layout with dual sides?

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

My current code is causing some issues and not displaying as desired. I have included a sample of my code below:

<style>
   .red{

   background-color: red;
   }
</style>

{% endblock stylesheets %}

{% block content %}

<div class="container-flex m-3">
    .... // More code here

I am trying to achieve a specific layout with cards containing titles, text, and icons. However, the length of the text varies which is affecting the alignment in my grid.

I need help adjusting the height of each element responsively and creating this grid to span the full page height using Bootstrap. What changes should I make to my code to achieve the layout shown in the image?

htmlcssbootstrap-5

Answer №1

The h- class utilizes predefined percentages for height adjustments. To make the elements fill 100% of the available height, simply set it to h-100. Similarly, you can customize the percentage using CSS for the other side as well. Note that h-150 is not a valid class and removing it will not affect the layout.

Visit this link for more information on sizing utilities in Bootstrap. 
.red {
  background-color: red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5c9d5cb">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container-flex m-3">
  <div class="row">
    <div class="col-sm">
      <div class="d-flex justify-content-around mb-3">
        <div class="col-3">

          <div class="h-100 speak p-3 box red" style="border-radius: 5%;">
            <div>
              <h4 class=" title">TEXT</h4>
              <h5 class=" card-text">TEXT</h5>
            </div>
            <div>
              <h5 class=" card-text">ICON</h5>
            </div>
          </div>
        </div>>
        <!-- More code snippets here -->
      </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

Transferring an image file from PHP to JavaScript

I have encountered an issue with transferring images stored as LONGBLOB files in my database to a JS file for dimension comparison with the screen. Here is how I retrieve the images: function fillArrays(){ $idArray = array(); $sql = "SELECT oglas_id,s ...

javascriptphpjqueryhtml

Is it possible to programmatically bind a click event to each individual word in a div element?

I'm attempting to link each word within an element without altering the markup inside the element using Javascript. ...

javascriptjqueryhtml

Troubleshooting a mapping problem with CSS elements

While building my website, I have successfully mapped the elements by ID for all alphabet letters except A. When clicking on the letter A, it does not go to the respective elements. Can anyone please help me find a solution? Visit this link for reference ...

htmlcss

The video is not displaying on the webpage when connected locally, but it appears when the source is a URL

Recently, while practicing some basic tasks on a cloud IDE called Goorm, I encountered an issue with displaying a video on a simple webpage. The EJS file and the video were located in the same folder, but when I set the src attribute of the video tag to "m ...

javascripthtmlnode.jsexpress

Flask-WTForms QuerySelectField not displaying properly when rendered with Bootstrap causing <select> HTML tag issue

I am facing an issue while constructing a Flask form that includes a QuerySelectField. Despite having everything in place, Bootstrap is displaying the <select> as if it were a text input field. Upon inspecting the page source, I noticed that the fie ...

cssjinja2flask-wtformsbootstrap-5

Randomize elements with the click of a button

Every time the page refreshes, the words shuffle around. For instance, "May I# know# your name?" shuffles to "know May I your name". To display the correct sentence with "#" as "May I know your name?", click the SHUFFLE button to trigger the shuffling. HT ...

javascriptphphtmlshuffle

What is the best way to place my website's logo in the top-left corner using html and css?

Hello everyone. I am currently working on customizing a website using an HTML and CSS template for a project, but I need to make some modifications. My main goal is to add the company logo to the header, specifically in the top-left corner, however, I&apo ...

htmlcss

Align two distinct images using CSS

Is it possible to insert two images in CSS and center them both? I am aiming for a layout similar to this: link My current CSS code only centers one image: position: absolute; top: 0; bottom:0; left: 0; right:0; margin: auto; ...

cssimagecenter

Is there a way to start playing HTML5 Audio without having to wait for the entire buffering process to finish

My internet connection is fast but it still takes 2-3 seconds for the song to start playing. The file size is around 3mb-4mb, with an average bitrate of 128kbps MP3. I've tried setting preload="auto" but it didn't improve much. Is there a way to ...

htmlaudio

Positioning a text directly next to an image that are both hyperlinked to the same webpage located in the center of the image

When viewing my site on a mobile device, I want to have an image with text next to it that both link to the parent menu. However, I'm facing an issue with the text not aligning properly (it should be centered within the picture height but appears at t ...

htmlcss

Unable to link JavaScript to HTML file through script tag

Upon testing out a responsive nav bar, I encountered an issue with the JavaScript not connecting. Despite placing the script tag at the bottom of the body as recommended, it still fails to function. index.html <html lang="en"> <head> ...

javascripthtml

Footer not being pushed down by content in mobile view on page

Hello everyone, Can you assist me with a query, please? My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why. Here is my code: .upload-pic { position: absolute; max-width: au ...

htmlcsstwitter-bootstrapbootstrap-4

Obtaining data from an external ng-repeat element

My list contains items that are being repeated using ng-repeat details. I want to be able to hover over one of the li elements and have the background of a div called background (which is outside of the ng-repeat) change to the url of the corresponding d ...

javascriptjqueryhtmlcssangularjs

Regular expression to identify items containing `href=""` within a specific set of tags

After using a Regex pattern to check for every href="" in my document, I now want it to specifically target all hrefs located between <a and </a> tags while still allowing other parameters within. Do not include in the match: <base href="http ...

phphtmlregex

Adjust the SVG to match the dimensions of the label, which may vary in both

How can I efficiently resize and embed SVG images into checkbox labels without using a viewbox attribute? Each SVG varies in height and width, making it challenging to find the best solution. .check__button { display: none; } .check__icon { display ...

htmlcsssvg

Utilizing Vue CSS variables as inline styles

Incorporating CSS variables in my component has allowed me to dynamically set the width of a div based on computed data within the setup() setup(props) { const progressBar = PositionService.getProgressBar(props.position); const progressWidth = `${p ...

cssvue.jscontent-security-policy

Is it possible to execute the Go compiler within a web browser?

Just discovered that Go can be compiled to WebAssembly. How awesome! According to this Go documentation, the Go toolchain is actually written in Go itself. This got me thinking, is it possible to run the Go compiler in a browser? Can I create a website w ...

htmlgowebassembly

How to align the last item in the bottom row using Flexbox styling

Is it possible to center the last element when resizing the window to a smaller resolution, even though the parent's justify-content parameter is set to space-between? I understand that using center or space-around would achieve the desired result, bu ...

cssflexbox

Ways to reconfigure an array for storing as pairs

I want to transform an array from array(1,2,3,4,5,6); to display in pairs like this: array(1,2) array(3,4) array(5,6) I know I can achieve this using foreach loop, but I'm wondering if there is a built-in PHP function that can do this automatical ...

phphtml

Deleting sections of a string using JavaScript

I've encountered a rather unique issue where I need to address a bug on a website. The problem is that when a string is generated dynamically, it automatically adds 5 spaces before and after the string. Ideally, this should be fixed in the backend cod ...

javascripthtmldomstring