Building a sleek grid similar to Pinterest in Bootstrap v4.0 without relying on jQuery (using a black color scheme with equal width and varying height)

Is it feasible to craft a grid similar to Pinterest using Bootstrap 4?
I am aware of the jQuery plugins that can be used, but is there a way to achieve this purely with CSS?

Note: This is not a duplicate question. Please try to comprehend my query first. I need to avoid using jQuery. Just stick to CSS and refrain from utilizing columns in CSS since they alter the list order. I hope you grasp my request.

This is what I currently have:
https://i.sstatic.net/TTEqK.jpg

But this is what I desire: https://i.sstatic.net/zect3.jpg

Here is my existing code:

 <!DOCTYPE html>
        <html>
        <head>
            <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
            <style type="text/css">
                .items{
                    background-color: #999;
                    margin: 5px 0;
                }
            </style>
        </head>
        <body>
            <div class="row">
                <div class="col-4"><div class="items">1<br><br><br></div></div>
                <div class="col-4"><div class="items">2<br><br></div></div>
                <div class="col-4"><div class="items">3<br><br><br><br></div></div>
                <div class="col-4"><div class="items">4<br><br></div></div>
                <div class="col-4"><div class="items">5<br></div></div>
                <div class="col-4"><div class="items">6<br><br></div></div>
                <div class="col-4"><div class="items">7<br><br><br><br></div></div>
                <div class="col-4"><div class="items">8<br><br></div></div>
                <div class="col-4"><div class="items">9<br><br><br><br></div></div>
                <div class="col-4"><div class="items">10<br><br></div></div>
                <div class="col-4"><div class="items">11<br><br><br><br></div></div>
                <div class="col-4"><div class="items">12<br><br></div></div>
            </div>
        </body>
        </html>

htmlcsstwitter-bootstrapgridbootstrap-4

Answer №1

To create that visual effect in Bootstrap 4, you can utilize the card-columns class as demonstrated below.

This method achieves the desired outcome using only the built-in Bootstrap 4 classes without the need for any additional custom CSS.

Feel free to click the "run code snippet" button below and expand it to see the full presentation:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-columns">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Card title that wraps to a new line</h5>
            <p class="card-text">This is a longer card with supporting text.</p>
        </div>
        <img class="card-img-bottom" src="https://placeimg.com/900/300/animals" alt="Card image cap">
    </div>
    ... (additional card elements)
    <div class="card p-3">
        <blockquote class="blockquote mb-0 card-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">
                <small class="text-muted">
                    Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
</div>

Answer №2

If you're looking to avoid using jQuery, consider giving Mansonry a try.

Answer №3

Are you searching for this? CSS styling only

Pinterest relies on JavaScript to create this design. I have been contemplating replicating it using pure CSS, and now I have achieved it:

body{
    background:#eee;
    font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif
}
h1{
    width:90%;
    background:#fff;
    padding:0.5em;
    text-align:center;
    border-radius:5px;
    font-size:15px;
    font-weight:600;
    margin:0 auto
}
.container{
    column-width:250px;
    column-gap:15px;
    max-width:100%;
    margin:30px auto
}
.container>div{
    display:inline-block;
    column-break-inside:avoid;
    background:#fff;
    border-radius:5px;
    margin-bottom:1em;
    font-weight:bold;
    color:#666
}
.container>div>div{
    padding:1em 1em 1em 1em
}
img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:5px 5px 0 0
}
<body style='background:#eee;'>
   <div class='container'>
      <div>
         <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGbwy5hxX7ff_m0Ihj0mrzf8XVbdakQ_boPtH-0aekfsUOyB1z' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.dailypioneer.com/uploads/main/mn_story_image/T330_158723_Untitled-2.gif' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.tollymasala.com/TollyAdmin/gallery/756/watermark/ankita-Spicy-Actress-In-Rain-cute-photo-stills.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://ste.india.com/sites/default/files/2016/12/30/559004-301216-gs-tch-10.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.newscrab.com/wp-content/uploads/2017/12/Parineeti-Chopra.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='https://dailypost.in/wp-content/uploads/2017/08/27-29.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://us.sulekhalive.com/images/photos/thumbnailfull/photos-2013-12-30-2-39-17.jpg' />
         <div><span>aaaaa.png</span></div>
      </div>
      <div>
         <img src='http://www.gulte.com/content/2016/11/news/1478346624-1517.jpg' />
         <div><span>aaaaa.jpg</span></div>
      </div>
      <div>
         <img src='https://i.pinimg.com/736x/35/10/c2/3510c27bfc544b3331717b2b03d6407a--heroines-cinema.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.telugusquare.com/wp-content/uploads/2015/06/Rakul-Preet-Singh-14.jpg' />
         <div><span>aaaaa</span></div>
      </div>
   </div>
</body>

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

Placing numbers at the top of the HTML table cell for better visibility

I am currently utilizing a two-column HTML table to showcase a list of rules. In one column, I have the rule's number, while in the other, I have the rule itself. However, I've noticed that the rule numbers are appearing near the bottom of their ...

css

Javascript eval function providing inaccurate results

I have encountered a problem while using eval() for a calculator I am developing. When I input the following code: console.log(eval("5.2-5")); The output is: 0.20000000000000018 I am confused as to why this is happening. Thank you for your assistance. ...

javascripthtmleval

The link text does not appear in black color

Can anyone assist in modifying this code snippet? I'm trying to make the text appear black, but it's showing up as light grey on the Dreamweaver preview screen even though the CSS says it should be black. View Fiddle Below is my HTML code: < ...

csshyperlink

Copy and paste content from Outlook, Word, or any Office software directly into the embedded browser

Our application is performing well, but there is an issue with some users copying text to Word before pasting it into the app. The HTML gets parsed out somewhat correctly, but it often includes tags from outlook or word that our XHTML engine doesn't r ...

htmlms-office

How to Achieve a Fixed Bottom Footer in Ember Framework

Hello, I am working on an Ember application and trying to implement a Sticky Footer feature. I followed a tutorial on Sticky Footer On CSS-Tricks which worked for me previously, but it seems to not work with Ember. Here is my CSS code: .mainFooter { ...

cssember.js

unable to execute PHP code

I am attempting to execute a PHP file that will update a database. On Chrome, I am encountering this error: https://i.sstatic.net/3ruNL.png This is the code I have in my index.html file: <!DOCTYPE html> <html> <body> <input type ...

javascripthtmlajax

What are the steps to play this using Internet Explorer?

I am having trouble with my player code in Internet Explorer. Can anyone provide assistance on how to make it work across all browsers? <object data="http://bitcast-b.bitgravity.com/player/6/bitgravity_player_v6_1_4.swf" id="bitgravity_player_6" ...

htmlflash

The CSS form appears to be too large for the page

On every single one of my pages, the content fits perfectly within the body: However, when I have forms on the page, they extend beyond the footer and the body doesn't resize accordingly: Where could the issue be coming from? ...

asp.net-mvc-3htmlcss

Unable to view image when using material-ui CardMedia component

Hello, I've encountered a problem with rendering an image in my application. Let me explain the issue in a simplified manner. So, I have a card component (MyCardComponent) where I need to pass a string prop containing the image file location. The goa ...

javascriptcssreactjsmaterial-ui

Issues with Laravel 5.8 and Bootstrap not functioning properly in Jquery

Check out this link for using Bootstrap Select. The code works perfectly in the view, but when I try to implement it with jQuery below, it doesn't work. Can someone help me fix this issue? View Code: <table id="tableAppointment" style=&q ...

htmljquerycsslaraveljquery-ui

Incorporate a unique element onto your WordPress homepage

I'm seeking guidance on how to incorporate a custom feature (including a textbox and a button) onto my WordPress homepage. My goal is to create an area where users can input a code into a textbox. Here's the challenging part: Once the user click ...

phphtmlwordpress

The battle between Typography and HTML formatting elements

When it comes to choosing between the <Typography/> tag and normal HTML tags like <p>, I find myself in a state of ambiguity. <Box className={someClassName}> <Typography>{someVariableName}</Typography> </Box> or <p ...

htmlcssreactjsmaterial-ui

Tips for creating a div element with a header and scrollable section

Greetings! I am currently developing a code to manage a sprinkler system interface with a modern and visually appealing design. At the moment, I have two columns on the page, each containing boxes. Unfortunately, the alignment of these boxes is not as desi ...

htmlcss

An instructional guide on utilizing Python to extract the URLs of companies from a LinkedIn search

I'm having an issue extracting company profile URLs from a LinkedIn search as I keep getting a "not found" message. Despite my code running smoothly, the problem persists. Here is my code: import requests import csv import time import numpy from bs4 ...

pythonhtmlselenium-webdriverbeautifulsoupspring-social-linkedin

Above, there are two components with a scrollbar, while below there is a fixed div that remains in place when the screen

Just a heads up: below is an example with code of how I envision my interface to look, but I'm not sure if it's valid? I've been trying to create an HTML5/CSS interface that resembles the MIRC fullscreen layout (check out the image below) a ...

csshtml

Is it feasible to execute exe files within a ReactJS environment?

Hey there! I've created a Game Launcher using ReactJS for my Unity game and was wondering if it's feasible to start the game (an exe file) simply by clicking on the play button. Can anyone please advise me on this? ...

javascripthtmlcssreactjs

Ways to incorporate margins into text on PDF pages produced by Puppeteer without altering the background color

I am currently using puppeteer to generate PDFs that contain dynamic content. My goal is to include margins/padding above and below the text on consecutive pages. Unfortunately, when I try to add margins with the property margin: { top: "1cm", bottom: "1 ...

javascripthtmlcssreactjspuppeteer

The CSS file cannot be found on the live XAMPP server

Here is the current structure of my project: https://i.sstatic.net/foUiy.png I attempted to link my CSS stylesheet by navigating to the project path, then /css, and finally /style.css. This setup works correctly when opening the .html file locally in a b ...

phphtmlcssxampphref

Combining ASP.NET MVC with HTML5 for dynamic web development

We are in the process of planning a new project and are interested in utilizing ASP.NET with the MVC pattern. Additionally, we want to incorporate the new features of HTML5. However, we have been having trouble finding sufficient information or connecting ...

asp.net-mvchtml

What is the best way to change a SCSS hexadecimal value into a string for usage as a CSS class name?

My SCSS file contains numerous variables like: $blue: #007bff !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #e83e8c !default; $red: #dc3545 !default; I am wondering if it is possible to convert the value of $blue to a ...

sassbootstrap-4