Organize the Div elements in the form of a message

Here is the code I am working with:

https://jsfiddle.net/bdqgszv5/1/

This is the same code without jsfiddle:

<section id="aussteller" class="row separated">
                <div class="section-header text-center">
                    <h2>Aussteller</h2>
                    <h4>Unsere Aussteller informieren Sie über die neusten Innovationen</h4>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="aussteller">
                        <div class="aussteller-info">
                            <div class="aussteller-photo">
                                <img src="http://allbrochures.net/wp-content/uploads/2015/04/ricoh-logo.jpg" alt="Ricoh">
                            </div>                              
                        </div>
                        <h3>Ricoh</h3>
                        <p>Zeigt uns im RICOH-truck die neusten Drucksysteme</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="aussteller">
                        <div class="aussteller-info">
                            <div class="aussteller-photo">
                                <img src="http://reonline.com/wp-content/uploads/2014/01/lexmark-logo-18863_640x480.jpg" style="width: 220px; height: 220px" alt="Lexmark">
                            </div>
                        </div>
                        <h3>Lexmark</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>
                </div>

... (continue with remaining code)

            </section>

I want to rearrange it like this:

https://i.stack.imgur.com/CBZbU.png

The end result should be responsive and maintain the order. How can I achieve this?

htmlcsstwitter-bootstrap

Answer №1

While my expertise lies in CSS foundation, the concept of using 12 as a base for grid layout remains consistent. Consider coding it with a grid width set to small 2 columns and leaving some empty space to align with your layout.

UPDATE: You also have the option to utilize the empty spaces as small 4 columns, or alternatively, apply a center class if feasible. Best of luck! :)

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

Adjust the size of the container DIV based on the content within the child DIV

I have been searching for a solution to my question without success. Here is the issue: I have a DIV that acts as a container for a Post in my project. Inside this post are classes for the poster avatar, name, timestamp, text, and more. The problem arise ...

htmlcsssize

Angular ensures that the fixed display element matches the size of its neighboring sibling

I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: The issue arises when setting the div's width as a percentage of the ...

htmlcssangularjstypescript

Pictures fail to load on Safari browser for desktop and iPhone, yet display correctly on various other smartphones and Windows browsers

Having trouble with images not displaying on Safari browsers for Mac and iPhones, but they load fine on Windows and Android. Even after updating to the latest version of Bootstrap, the issue persists. Here are the current Bootstrap content delivery networ ...

htmlcssiosbootstrap-4safari

Elements that possess identical class attributes yet exhibit dynamic behavior

I'm currently facing challenges with dynamically generated elements. I am working on a page for my website that will show a list of users (data provided by the controller). Each user is represented within a div, containing two h3 tags displaying the u ...

javascriptjqueryhtmlcss

When transformed into clickable links, the list items start piling up on

Here are two groups of code along with a straightforward question that most people can answer easily, but still worth asking. Below is the initial piece of code with working CSS implementation: <div class="subTopHolder"> <ul class="language ...

htmlcss

Arranging particular placement

How can I position my links to the right of the second photo (opus1) and slightly below the first photo (coverPhoto)? I've tried various methods but haven't found a simple solution yet. <!DOCTYPE html> <html lang="en"> <head ...

htmlcss

Troubleshooting PHP password change functionality issue

I'm having trouble with my code and need some help identifying the issue. The problem I'm facing is that when I try to set a new password, it doesn't seem to save in my database and I can't log in with the new password. Here's the ...

phphtml

The CSS infinite animation becomes erratic and sluggish after a short period of time

My website featured a banner with a series of thumbnail images that animated at different intervals and looped indefinitely. Initially, the animations ran smoothly, but after a few seconds, they began to slow down and lose consistency. To troubleshoot, I u ...

htmlcssanimationanimate.css

td:before combined with vertical-align:middle

To achieve a table with square cells, I implemented the following CSS: table { width: 100%; table-layout: fixed; } td { text-align: center; vertical-align: middle; } td:before { content: ''; padding-top: 100%; float: ...

htmlcsshtml-tablevertical-alignment

Ways to apply CSS in jQuery using various combinators

I'm facing an issue with changing CSS using jQuery. The specific CSS line I want to modify is: .switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside { top: 40px; } My attempt at changing it looked like this: $('.switch-vertic ...

javascriptjquerycss

HTML5 will consistently display the video control panel

I am looking to keep the control panel of the html5 <video> element visible at all times while hiding the play/pause button. I attempted the following: <style> video::-webkit-media-controls-panel { display: flex !important; ...

html

Styling a Fixed Header in CSS/HTML - Scroll Effect

Is it possible to hide only the upper part of the nav-bar, similar to the behavior in WhatsApp? I am using material-ui for this particular use-case. Currently, my implementation causes the app-bar to extend only when the scroll position is less than 48px, ...

cssreactjsmaterial-ui

Arranging hierarchical data in JavaScript

After populating the hierarchy data, it is structured as follows: Here is a screenshot: I am looking to sort this data. Currently, I have a flat data object for rendering purposes. For example, my rendering object looks like this: renderedobjects=[ {1,. ...

javascriptjqueryhtmlarrayssorting

The ideal method for eliminating a targeted border in HTML

I need to make a table more visually attractive by removing specific borders without affecting the overall design. After applying the border-collapse property, I attempted to remove the right border from certain cells using CSS. However, this unintentional ...

htmlcsshtml-table

Format specific words or characters in a text input

In HTML, when I want to display strings in a Text Input or TextArea, I am looking for a way to have specific substrings render with a box around them. I envision these boxed substrings as being treated as a single entity, similar to how highlighting or tex ...

javascripthtml

Filtering input that is compatible with Firefox

Attempting to restrict certain special characters (excluding "_" and "-") from being used in a text input field has been a bit of a challenge. I initially tried using regex filtering by pattern, but it didn't work as expected. Then I turned to dynami ...

javascriptjqueryhtmlfirefox

An intuitive guide on showcasing the dynamically generated variables' values with AngularJS

I am facing an issue with my HTML template code: <p>{{"fieldname_"+lang}}</p> Within the controller, I have defined the following: $scope.lang = "mr"; $scope.fieldname_mr = "Dynamic variable"; My expected result is Dynamic variable, however ...

htmlangularjs

Why is it that when I store a DOM element reference in a JavaScript Array, I cannot reuse that stored reference to add an event listener

I have a little confusion and I hope someone can help me out. I am facing an issue with dynamically created buttons, where each button has a unique id. To keep track of these buttons in a well-organized manner, I store their references using a simple two-d ...

javascripthtmlarraysdomreference

CSS and the best practices for button styling in a navigation bar

My friend and I are facing a CSS issue while working on a webpage together. We both have limited experience with HTML and CSS. Here's the code snippet in question: .nav li { margin: auto; display: inline-block; color: white; padding: 10px; font ...

htmlcsshtml-listsnav

Using relative paths to showcase images in Node.js

I am currently working on my first Node.js MVC app where I am using native Node and not utilizing Express. One issue I am facing is the difficulty in displaying images from my HTML files through their relative paths. Instead of sharing my server.js and ro ...

javascripthtmlnode.jsimagefiletree