Tips for adjusting the height of Bootstrap Mansory columns

Struggling to figure out how to adjust the height of my column to accommodate three elements in each the first and second columns. As a newcomer to design elements, I could really use some guidance.

Here's the mock-up I aim to create: https://i.sstatic.net/NJ0Z1.png

This is what my code currently looks like: 

<div class="card-columns pl-5 pr-5">
<!-- col 1-->
  <div class="mb-3">
      <h1>Lorem Ipsum</h1>
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Familly-card-hide.png" alt="Card image cap">
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
  </div>
  <!-- col 2-->
  <div class="card">
      <img class="card-img-top" src="assets/Twiter-card-hide.png" alt="Card image cap">
  </div>
  <div class="card">
      <img class="card-img-top" src="assets/Dog-card-hide.png" alt="Card image cap">
  </div>
  <div>
          <span>Lorem ipsum ipsum<img src="assets/Circle-arow-btm.png" alt=""
                                         style="padding-left: 10px; transform: rotate(270deg);"> </span>
  </div>
  <!-- col 3-->
  <div class="card" style="width: 300px;height: auto;">
      <img class="card-img-top" src="assets/Fried-card-hide.png" alt="Card image cap">
  </div>
  <div class="card" style="width: 300px;height: auto;">
      <img class="card-img-top" src="assets/work-card-hide.png" alt="Card image cap">
  </div>
</div>

Seeking clarification on how Masonry functions so I can better utilize it in this scenario.

htmlcssbootstrap-4masonrybootstrap-grid

Answer №1

Instead of using Bootstrap Masonry with .card-columns, a more flexible solution for this case would be to utilize the simple Bootstrap grid system. In this example, I created three columns using .col-sm-6, .col-sm-4, and .col-sm-2. By utilizing the 12 columns of the Bootstrap grid system, we can easily create layouts that fit our needs. The images are responsive thanks to the .img-fluid class, which ensures they do not stretch outside their parent containers.

This example showcases the power of Bootstrap 4 classes alone. If you require specific customizations, additional CSS classes and properties can be added to achieve the desired effect.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container mt-5">
  <div class="row">
    <!-- col 1-->
    <div class="col-sm-6 px-1">
      <div class="mb-2">
        <h1>Lorem Ipsum</h1>
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x600">
      </div>
      <div class="mb-2 text-right">
        <img class="img-fluid w-75" src="https://via.placeholder.com/1000x600">
      </div>
    </div>
    <!-- col 2-->
    <div class="col-sm-4 mt-1 px-1">
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x600">
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1000">
      </div>
      <div class="text-right">
        <span>Lorem ipsum ipsum<img src="https://via.placeholder.com/36x36" alt=""style="margin-left: 10px; transform: rotate(270deg);"> </span>
      </div>
    </div>
    <!-- col 3-->
    <div class="col-sm-2 px-1">
      <div class="mb-2 mt-4">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1300">
      </div>
      <div class="mb-2">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1100">
      </div>
    </div>
  </div>
</div>

For more information on the Bootstrap technologies used in this example, check out the following resources:

  1. Grid https://getbootstrap.com/docs/4.0/layout/grid/
  2. Spacing https://getbootstrap.com/docs/4.0/utilities/spacing/
  3. image-fluid https://getbootstrap.com/docs/4.0/content/images/
  4. Sizing https://getbootstrap.com/docs/4.0/utilities/sizing/

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

Access Silverlight to open Windows Explorer

Is it possible to launch Windows Explorer to a specific folder from a Silverlight application running in a browser? Also, is there a method to retrieve the machine name within a Silverlight app? ...

c#htmlasp.netwindowssilverlight

The CSS effect fails to take effect following an AJAX response

After a successful ajax response, I am attempting to apply a jQuery .css effect. However, it seems that this process is not working as expected because I am trying to retrieve the height of a newly created element and then applying it to another newly crea ...

jquerycss

Arranging multiple lines of text above several images using CSS

I'm encountering issues when trying to place multiple texts in front of multiple images. I've managed to achieve this using absolute and relative positioning, with one text above one image. However, the problem arises when I try to apply this to ...

css

Using JQuery to find the nearest element and narrowing down the search to its child elements

In my program, I have 3 forms identified by form1, form2, and form3. Each form contains its own set of dropdown lists named drop1 and drop2, along with a submit button. When the submit button is clicked in any form, it checks which option was selected from ...

javascriptjqueryhtmlformsfiltering

How can the <animate /> tag be triggered using only CSS and HTML?

Looking for a way to trigger the animation rules of the <animate /> tag using only HTML and CSS. Is there a new standard in HTML and CSS that allows something like input:checked ~ svg animate {enabled:true;} coming up in 2020? Or some other creative ...

htmlcssanimationsvg

Attempting to vertically center text within a percentage div

I'm trying to create a button that is centered on the screen with text aligned vertically within the button. I want to achieve this using CSS only and restrict the usage of percentages only. Here's what I have so far: Check out my code snippet h ...

css

Navigate to the specified text in the dropdown menu based on the ul li selection

Is it possible to achieve a functionality similar to that of a select box, where typing a keyword that matches an option in the select box will automatically move the pointer to that option? I am looking to implement a similar feature in my HTML code: < ...

javascriptjqueryhtmlcss

How to Incorporate an Anchor Link into a Div as well as its Pseudo Element using CSS, Javascript, or jQuery

How can I make both the menu item and its icon clickable as a link? When either is clicked, the link should work. Here is a CodePen example: http://codepen.io/emilychews/pen/wJrqaR The red square serves as the container for the icon that will be used. ...

javascriptjquerycssanchorpseudo-element

Loading AJAX content within the existing page instead of a pop-up window

My goal is to have the page links load in a popup, but after adding this script, the page loads at the bottom instead. How can I make it open in a popup window instead? $('a[rel="ajax:jmodal"]').click(function(event) { $.ajax({ url: $(this).a ...

phphtmlajax

Minimize the number of HTTP requests by including CSS and JS files in PHP

I've been considering a method to reduce the number of HTTP requests made when loading a page by minimizing the amount of downloaded files, while still keeping separate files on the server. The thought process is as follows: <!DOCTYPE html> &l ...

phpjavascriptcssperformanceimport

Tips for creating a unique custom UI headline using ReactJS, CSS, and bootstrap

Looking to create a design that is responsive in ReactJS using Bootstrap or CSS if needed. I need assistance with placing separators between columns and ensuring the values of each label are aligned in the same column but on the next line. The layout shoul ...

javascriptcssreactjsflexboxbootstrap-5

In IE9, users can select background elements by clicking on specifically positioned links

Trying to turn an li element into a clickable link by overlaying it with an a element set to 100% height and width. While this solution works in Chrome and FF, IE9 is causing issues as other elements behind the link remain selectable, rendering the link un ...

cssinternet-explorer-9

Stretch element to reach the edge of the container

I need help with positioning an input and a textarea inside a container that has a height of 52.5vh. I want the textarea to start right below the input and expand all the way to the end of the container. How can I achieve this layout? Both elements should ...

htmlcss

When you click on a main category, a list of its corresponding subcategories will

concept image My vision involves having users click on a category from the top menu to display all main cards (parent cards), and then further clicking on a parent card will unveil its corresponding child cards. I've even included an image to help v ...

javascripthtmljquerybootstrap-5

The scrollable dialogue disrupts the background's ability to flex and grow

My page layout is pretty simple: <main> <header>Header</header> <section>Content</section> <footer>Footer</footer> </main> <dialog>Dialog</dialog> In terms of CSS, here's how it ...

htmlcssmodal-dialogflexbox

Methods for verifying if a file is included in another file, while disregarding any whitespace adjustments

Let's say I have multiple CSS files (a.css, b.css, ..., e.css) and after concatenating and compressing them, I get a new file called compressed.css. Now, I need to verify if each of the original CSS files is included in the compressed.css file. Are th ...

cssfilecompressionminify

The process of altering the color of a table row in JavaScript can be done after dismissing a pop-up that was triggered by a button within the same row

I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data sub ...

javascripthtmlcss

Confirming the information in two sections of a form

Could someone assist me with validating my form? Specifically, I need help ensuring that the house number field only accepts two numbers and the postcode field only allows 5 characters. I have implemented a pattern attribute for validation and I am curiou ...

javascripthtmlformsvalidation

Strange spacing below body element discovered while browsing website in Firefox 7

Currently, I am facing an issue on my website in Firefox 7. A margin is causing the gradient in #wrapper to shift upwards from the bottom, disrupting the layout. Despite resetting the margin to 0 on body and html, I am unable to pinpoint the root of the pr ...

htmlcssfirefox7

What is the best way to separate one dropdown area from another dropdown area?

I have two dropdown menus where, when an option with the value "other" is clicked, it generates a text area just below the dropdown menu. Both sections are functioning correctly, but I had to create separate parent wrappers for each in order to do so. How ...

javascriptjqueryhtmldynamic