Utilize the alignment capabilities of the Bootstrap framework or any other suitable plugin for

I am trying to dynamically display my div's similar to the image below. I am not able to find a solution for this problem on SO or Google yet.

https://i.sstatic.net/0QcfF.jpg

.box {
  width: 25%;
  height: auto;
  float: left;
}

.box-1 {
  background: red;
}

.box-2 {
  background: green;
}

.box-3 {
  background: orange;
}

.box-4 {
  background: #263139;
}

.box-5 {
  background: #d11d69;
}

.box-6 {
  background: #14ea41;
}
<div class="box box-1">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
  duis dolore te feugait nulla facilisi.
</div>
<div class="box box-2">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
</div>
<div class="box box-3">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor
</div>
<div class="box box-4">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation Lorem ipsum dolor sit amet, consectetuer adipiscing
  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
</div>
<div class="box box-5">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation Lorem ipsum dolor sit amet, consectetuer adipiscing
  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
</div>
<div class="box box-6">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation Lorem ipsum dolor sit amet, consectetuer adipiscing
  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
</div>

csstwitter-bootstrap-4

Answer №1

If you want to create a responsive layout with multiple columns in CSS, you have a couple of options:

.columns-layout {
  columns: 3;
}

.column {
  height: auto;
  margin-bottom: 15px;
}

.column-1 {
  background: red;
}

.column-2 {
  background: green;
}

.column-3 {
  background: orange;
}

.column-4 {
  background: #263139;
}

.column-5 {
  background: #d11d69;
}

.column-6 {
  background: #14ea41;
}
<div class="columns-layout">
  <div class="column column-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="column column-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="column column-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="column column-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="column column-5">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="column column-6">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

Alternatively, you can achieve a similar layout using a JavaScript library like Masonry:

$(function() {
  $('.columns-layout').masonry()
});
.column {
  height: auto;
  width: calc(100% / 3);
  float: left;
}

.column-1 {
  background: red;
}

.column-2 {
  background: green;
}

.column-3 {
  background: orange;
}

.column-4 {
  background: #263139;
}

.column-5 {
  background: #d11d69;
}

.column-6 {
  background: #14ea41;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="columns-layout" data-masonry='{ "itemSelector": ".column" }'>
  <div class="column column-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="column column-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="column column-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="column column-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="column column-5">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="column column-6">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </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

Unable to understand the reason behind why the button is not being displayed

I'm having trouble with my quiz app. I have a button to submit answers and move on to the next question, but whenever I try to place it within the div that contains the quiz, the button disappears. Can someone please help me figure out what's wro ...

javascriptjqueryhtmlcss

Display fewer search results initially and have the option to view more when hovering

I am working with a PHP function that generates a ul element. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> I am looking to display the list in a li ...

phpjquerycsshtml-lists

The use of HTML 5 Autofocus causes interference with CSS loading

Whenever I apply the autofocus="autofocus" attribute to an input element, it causes a brief glitch in Firefox. The content briefly appears without the CSS styling applied, resulting in elements not centered and headings rendered in default fonts. If I tak ...

csshtmlfirefoxautofocus

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

javascripthtmlcss

Adjust the size of multiple elements upon hovering over one of them

I encountered a puzzling issue, and here is a demonstration of my problem: https://jsfiddle.net/k1y8afst/ <div class="Sample"> <div class="Dummy"> <div class="Books"> <a st ...

htmlcsshovertransformation

How to Maintain SASS Code Efficiency with Media Queries

How can I avoid repeating myself in my CSS code when using two different media queries for phones and tablets that require the same exact styling? $mobile-portrait: "only screen and (max-width: 680px)"; $tablet-portrait: "only screen and (min-device-wid ...

htmlcsssassmedia-queries

What is the best way to align this alert in the center of the screen

Hey there, I'm facing an issue with aligning an alert horizontally when a user clicks a button. I've been trying different methods but can't seem to get it right. The goal is to keep the alert within #main. You can check out this fiddle for ...

htmlcsstwitter-bootstrap

Animating links with multi-line effects on :before.orEnhancing

As per the given query, I have a code snippet Is there any way to apply this effect to multiple lines of text instead of just one line? Currently, the effect only appears on one of two text lines (as shown in the example). :root { --00a3a3: #00a3a3; ...

cssanimation

Ways to modify the screen when a click event occurs

To make the display block when clicking this icon: <div class="index-navi-frame-box"> <p onclick="expandFunction()"> <i class="fa fa-bars"></i> </p> </div> Here is what it should change to: <div class=" ...

javascripthtmlcss

Location of the search bar

I am having trouble figuring out which class in Bootstrap I should modify in order to center the search bar in the navigation bar. Can anyone help? <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> ...

htmlcssbootstrap-5

What is the best way to make twitter-bootstrap navbar subitems collapse/expand on smaller screens?

After experiencing success with the twitter-bootstrap 'hero' example, it has become evident that on small screens, the navbar menu only displays first-level items, with sub-items collapsed. However, tapping on an item with child elements expands ...

csstwitter-bootstrapdrop-down-menunavbarhandhelddevice

Tips for keeping an image at a fixed size within a grid, even when the browser window is resized

As a newcomer to front end coding, I am currently working on a practice website to familiarize myself with the code. One issue I am facing is related to using a bootstrap grid with an image in the left column. I want to prevent the image size and position ...

htmlcssbootstrap-4

What is the best way to enable flex-items to expand without changing their original size?

Using Flexbox can really enhance the design capabilities of a web designer. However, figuring out exactly how to achieve certain layouts can sometimes be tricky. For instance, consider this plunk. I want the items to expand within each row without stretchi ...

cssflexbox

`There is a delay in rendering the background image on Chrome`

Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...

javascriptcssgoogle-chrome

Menu stack with content displayed to the right on larger screens

Given the content div's position (up middle), what method can I use to stack the divs in this manner? Is it possible to accomplish with only CSS or is jQuery necessary to move the div content out on larger screens? ...

htmlcsstwitter-bootstrap

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

So, here's a strange issue I'm facing. On my website, the background image changes with a smooth fadeIn/Out transition. Video: Website in action: Here is the HTML markup: <div class="fondo" onclick="descargar(2,500);descargar(1,500);"> ...

javascriptjquerycssopacity

What is the best way to format FormControl for proper spacing?

<FormControl fullWidth component="fieldset" inputRef={register({ required: true })}> <FormLabel component="legend">Format</FormLabel> <RadioGroup row aria-label="format&q ...

cssmaterial-ui

Tips for customizing the appearance of a child component using the parent component in Vue.js

I am working on creating a layout using Vuejs and flexbox that includes elements like 'header, sidebar, main-content, sidebar, footer'. I have separated each part of the layout into individual .vue files, such as header.vue and sidebar.vue. In ...

javascriptcssvue.jsstylesvue-component

Mobile Safari is having troubles loading CSS

After a long time of using in-line CSS directly on the page, I finally decided to consolidate it all into one file for my own sanity. Initially, I attempted the standard <link rel="stylesheet" href="URL"> approach and it loaded successfully, alt ...

phphtmlcsssafarimobile-safari

CSS class for modifying color based on certain conditions

Suppose I have this CSS code: label { color: #AAAAAA; } Can I modify it to include a condition that changes the color to red if the label has the "error" class? I am aware that I can dynamically add the class to the label in HTML, but I am curious if ...

htmlcss