Challenge with arranging images in Bootstrap grid gallery

I am currently working on constructing an image grid using Bootstrap, but I am facing some challenges in understanding how to write the code. You can find the final example here: https://i.sstatic.net/aDcIs.jpg

Below is my current code:

.border { border: 1px solid red; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-4 border">
      <img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
    </div>
    <div class="col-md-4 border">
      <img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="516" title="someText" alt="someText">
    </div>
    <div class="col-md-4 border">
      <img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 border">
      <img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
    </div>

    <div class="col-md-4 border">
      <img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
    </div>
  </div>
</div><!-- container -->
htmlcsstwitter-bootstrap

Answer №1

In your setup, you have a row with three columns. Two of these columns contain two rows.

Here is a simple example to get you started:

.gallery .v-spacer {
  margin-top: 30px; /* Default Bootstrap gutter (10px) x 2 */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row gallery">

  <div class="col-sm-4">
  
    <div class="row">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400/FC0/">
      </div>
    </div>
    <div class="row v-spacer">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400">
      </div>
    </div>  
  
  </div>
  
  <div class="col-sm-4">
    <img class="img-responsive" src="http://placehold.it/600x830">
  </div>

  <div class="col-sm-4">
  
    <div class="row">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400">
      </div>
    </div>
    <div class="row v-spacer">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400/FC0/">
      </div>
    </div>  
  
  </div>

</div>

It's important to keep using .row and column classes like .col-**-** to ensure the correct structure of the grid with padding and margins for spacing between columns and containers.

Note: When making the middle image responsive, it may not align perfectly with stacked images due to varying heights. The total height of stacked image columns is different from the middle image, which has a single variable height instead of two variable heights plus a fixed height in the stacked columns.

Answer №2

It is recommended to adhere to the grid structure outlined below:

<div class="container">
  <div class="row">

    <div class="col-md-4 col-sm-4">
      <div class="row">
        <div class="col-md-12 border">
          1
        </div>
        <div class="col-md-12 border">
          2
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-4">
      <div class="row">
        <div class="col-md-12 border long">
          3
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-4">
      <div class="row">
        <div class="col-md-12 border">
          4
        </div>
        <div class="col-md-12 border">
          5
        </div>
      </div>
    </div>

  </div>
</div>

Take a look at this example on jsFiddle.

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

Answer №3

Below is a code snippet that you can use:

Check out the demo: Demo Link


   <div class="row">
      <div class="col-xs-4">
         <div class="row">
            <div class="col-xs-12">

         </div>
         </div>

      <div class="col-xs-4">
         <div class="row">
            <div class="col-xs-12">

         </div>
         </div>

      <div class="col-xs-4">
         <div class="row">
            <div class="col-xs-12">

          </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

Start a HTML 5 video and pause any others playing

On my webpage, I have a series of HTML5 videos listed, but I want to ensure that when one video is played, the others automatically stop or pause. The framework I am using is Angular 2 with TypeScript. <video controls (click)="toggleVideo()" #videoPla ...

htmlangulartypescriptangular2-template

Attempting to modify the background hue of a Bootstrap 5 Button using javascript

I've been experimenting with changing the background color of a bootstrap 5 button using JavaScript. While I've been able to successfully change the text color with JavaScript, altering the button's color has proven to be elusive. Below is ...

javascripthtmlbootstrap-5

Decoding JavaScript content with Python

Currently, I am dissecting this specific portion of HTML <script type="text/javascript"> var spConfig = new Product.Config({"attributes":{"150":{"id":"150","code":"size_shoe","label":"Schuhgr\u00f6\u00dfe","options":[{"id":"494","label ...

javascriptpythonhtmlparsingbeautifulsoup

Are you experiencing issues with Font Awesome Fonts failing to load?

I am currently using a rails app with bower to manage my assets, avoiding gems for JS and CSS. In the directory vender/assets/stylesheets, I have "font-awesome" containing both scss and fonts. In app/assets/stylesheets/application.scss, I have included va ...

htmlcssruby-on-railsfontsfont-awesome

The visual content I have does not fill up the entire screen, which results in some empty spaces in the layout

Whenever I insert an image, I strive to have it fill the entire space but end up with white gaps. This is my code: <div style="background-image: url('../assets/img/food-with-ingredients.jpg'); -webkit-background-size: cover; -moz-back ...

cssbootstrap-5

What is the best way to emphasize a selected row in a table when clicked using both Bootstrap 4 and Angular 6?

My Bootstrap table is styled with table-hover and all functions as expected. The .table-hover class activates a hover effect on table rows within a <tbody>. Additionally, I have implemented the following method: listClick(event, newValue) { this ...

htmlangulartypescriptbootstrap-4angular6

Attempting to make a gallery image expand when clicked on

Having trouble with image expansion in a gallery when clicking on different images. Currently, the expanding feature only works on the first image in the set. If I click on another image, the first one is the one that expands. <div ng-repeat="album ...

angularjshtmlimage

Issue with Image display when UpdatePanel is triggered

I'm currently in the process of developing a website using ASP.NET and C#. Within this site, I have implemented 2 sets of Image Banners. The first set is static and does not change, featuring images based on my C# code. <div class="divArticleCar" ...

javascriptc#jqueryhtmlasp.net

Why is my second CSS animation, which is running late, causing such chaos?

I am currently in the process of animating a simple text. However, I am encountering some issues with making it disappear after a certain period of time: During the initial fade in, the opacity value does not seem to be respected, as the text seems to a ...

csscss-animationscss-transitions

When the mouse hovers over a CSS positioned absolute div, it will be displayed on

I am currently working with an HTML table and my goal is simple. I want to create a menu that opens when the mouse hovers over it, but within a table. When I hover my mouse over the <span>Telephone:</span> element, I want the <div class="se ...

javascriptjqueryhtmlcss

What steps can be taken to ensure the WhatsApp icon is easily visible on a small screen?

I currently have a navigation bar with the left side dedicated to navigation items and the right side featuring a whatsapp icon. <mat-toolbar class="nav"> <a routerLink="app-aaa" mat-button>aaa</a> <a routerLi ...

htmlcssangularangular-material

Default Documents on Login.aspx are being displayed even though it hasn't been specified in the web.config file

When I decided to move my website from the built-in web server (Cassini) to IIS, I encountered an issue with my Login.aspx page. The web.config file was showing an error "The requested page cannot be accessed because the related configuration data for the ...

asp.netdefaulthtml

The jQuery pagination feature combined with the :hover pseudo-class

Here is a link to my website: Gutdesign If you click on TV located on the left side, you will see a list of projects. Everything looks good to me, but I am having trouble figuring out how to hide the orange arrows at the start. I want them to appear only ...

jqueryhtmlcsspagination

Center text vertically inside a form

I have attempted various solutions provided in previous responses, but none have proven effective for my situation. The challenge I face is aligning the bar vertically within this form. <form action="index?q=<?php echo $_POST['query']? ...

htmlcssbootstrap-4caret

Unable to determine why node.js express path is not working

const express = require("express"); const app = express(); app.use(express.static("public")); var dirname = __dirname; app.get("/:lang/:app",function(req,res){ console.log(req.params.lang + " " + req.params.app); ...

javascripthtmlcssnode.jsexpress

JQuery and ajax are not functioning properly with Javascript

<div class="RegistrationForm"> <form method="post" id="form" action="registeration.php" class="reg" enctype="multipart/form-data"> <input type="file" class="fileChooser" name="img"> ...

javascriptjqueryhtmlajax

Efficient creation of a user-friendly interface application designed to retrieve data from a nearby server

The Challenge I am faced with the task of creating a simple GUI application that can either be run on a local Ubuntu 14 server or locally while still being able to access data from the server for multiple users to make changes to a basic array data file. ...

pythonhtmluser-interfaceserverwysiwyg

Position the <i> element to the right side of the <div> element in an HTML document

I am trying to make this <i> element align to the right within my <div>. Here is the HTML code I have so far: <div class="container-fluid p-1 bg-primary text-white d-flex align-items-center justify-content-center"> <h2&g ...

htmlbootstrap-5

Error in jQuery animation on Bootstramp template

For my website, I utilized a template that can be found here: http://www.bootply.com/100702. However, the animated menu is experiencing issues such as being buggy and laggy when clicking on menu options. Upon clicking on the link provided, the page blinks ...

javascriptjqueryhtmlcsstwitter-bootstrap

Display results in a Web application using Google Apps Script

function doGet() { return HtmlService.createHtmlOutputFromFile("vi"); // var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>'); } function doPost() { return HtmlService.createHtmlOutputFromFile("vi"); // var out ...

javascripthtmlwebgoogle-apps-scriptgoogle-apps