Steps for building a Bootstrap grid of thumbnails

I need to display an unknown number of thumbs. Below is a sample of the HTML rendered:

<div class="row-fluid">
        <ul class="thumbnails">
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
        </ul>
      </div>

Here are the details:

Question : How can I prevent margin issues on the second row when building the UI dynamically without adding another <div class="row-fluid">

Update Required solution for IE8 compatibility

javascriptcsslayouttwitter-bootstrapweb

Answer №1

If the width of the LI's parent remains constant, targeting the x element using :nth-child(4n) should be effective.

.row-fluid li:nth-child(4n) {
    margin: 10px;
    padding: 0;
 }

Refer to the spec for guidance on formulating :nth-child() formulas.

A simple Fiddle demonstrating it in action.

Update

To support IE8, utilize jQuery (if applicable)

$('.row-fluid li:nth-child(4n)').css({'margin':'10px'});

This approach should resolve the issue.

Answer №2

In a recent situation, I encountered an issue with uneven margins across rows.

To address this, I recommended inserting a hidden 

<li style="display:none"></li>
at the beginning of the list. This way, Bootstrap would target and remove the margin for the specific <li> element that is not displayed.

While having a margin might not be ideal, I believe this solution provides a simple and effective way to maintain consistency without introducing additional styling within JavaScript code.

Answer №3

Encountered a similar problem, although not ideal, I found a quick solution:

.container {
   padding-left: 0px !important;
   padding-right: 0px !important;
}

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

Discovering the Week by week commencement and conclusion dates utilizing angularjs

Previously, I was utilizing the angularjs-DatePicker from npm. With this plugin, I could easily select a date from the calendar. However, now I require two fields - FromDate and ToDate - to display the week StartDate and EndDate whenever a date within that ...

javascriptjqueryangularjsdatedatepicker

Designing personalized visualizations using elasticsearch

After setting up ELK tools, I have a desire to extract data from Elasticsearch and generate my own graphs without relying on Kibana. I've heard about tools like elasticsearch.js, but I'm unsure how to begin using it. What steps should I take in o ...

javascriptangularjsnode.jselasticsearchkibana

Contradictory jQuery extensions

After exploring this site as part of my web coding self-study, I decided to register so I could ask a specific question. Currently, I am in the process of developing my new website and ran into an issue on a test page (www.owenprescott.com/home.html). The ...

javascriptjqueryhovermosaic

Display HTML using JavaScript/jQuery

I am trying to figure out how to print a document by passing custom HTML code. Below is the code I have tried, but unfortunately it's not working: function Clickheretoprint() { var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes, ...

javascriptjqueryhtmljquery-ui

Yarn combined with Webpack fails to execute post-compilation tasks

When using yarn and running yarn prod, I encountered the following error: https://i.stack.imgur.com/2emFk.jpg It seems to be stuck at this particular part of the code: mix.then(() => { execSync(`npm run rtlcss ${__dirname}/Assets/css/admin.css ${__dir ...

javascriptnpmyarnpkg

applying a timeout for the .on(load) event

My goal is to dynamically load images using .on('load') in the script below: .on('load', function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken i ...

javascriptjquery

I have come to realize that my understanding of how Sass nesting works was misguided

Currently struggling with understanding Sass nesting. Any explanations on where I went wrong would be greatly appreciated, as this is a beginner-level issue for me. Thank you in advance. .header { display: flex; height: 10vh; background-color: #13192 ...

cssreactjssassmaterial-ui

What type of technology is typically utilized in creating functional platforms such as goDaddy, wix, and other web design websites?

I am currently working on a web development project that aims to allow users to edit webpages without needing any coding knowledge. Users with authorization will be able to modify not only the text but also various HTML tags on the page, similar to platfor ...

javascriptjavahtml

Utilizing React with Material UI, implement a Select component while disabling the scroll lock and ensuring the menu is positioned relative to

import React from "react"; import "./styles.css"; import Input from "@material-ui/core/Input"; import MenuItem from "@material-ui/core/MenuItem"; import FormControl from "@material-ui/core/FormControl"; import Select from "@material-ui/core/Select"; cons ...

javascriptreactjsmaterial-ui

The Vue router-view is mistakenly loading the parent component instead of displaying its own content

Here is a simple route configuration: { path: '/', component: Home, }, This route configuration sets the path to the home page and loads the Home component when the path is '/'. However, I am encountering an issue where the Po ...

javascriptvue.jsvue-router

Using the axios response to assign data object in VueJS

When making an API call, I am receiving an expected error. While I am able to log the error message in the console, I am encountering issues trying to set a vuejs data variable with the response. Can anyone point out what I might be doing incorrectly? ...

javascriptvue.jsvuejs2axios

Steps for replacing the firestore document ID with user UID in a document:

I've been attempting to retrieve the user UID instead of using the automatically generated document ID in Firebase/Firestore, but I'm encountering this error: TypeError: firebase.auth(...).currentUser is null This is the content of my index.js ...

javascriptfirebasefirebase-authenticationgoogle-cloud-firestore

Making sure to consistently utilize the service API each time the form control is reset within Angular 4

In the component below, an external API service is called within the ngOnInit function to retrieve an array of gifs stored in this.items. The issue arises when the applyGif function is triggered by a user clicking on an image. This function resets the For ...

javascriptangularangular-reactive-formsvaluechangelistener

Exploring new possibilities in ChartJS with the use of multiple Y

I have successfully created a line chart using Chart.js with two datasets, each having its own Y scale and axis. The code for my datasets and options is as follows: datasets: [{ fill:false, label: 'Heat', yAxisID: "y-axis-1", da ...

javascriptangularchartschart.js

JavaScript in fullscreen mode for Internet Explorer

I'm trying to make sure that this code snippet... $('#gatewayDimmer').width($('html').width()); $('#gatewayDimmer').height($('html').height()); $('#gatewayDimmer').css('display','block& ...

javascriptajaxinternet-explorer

What are some methods for submitting an HTML form to a CSV file?

I've been racking my brain for the past few days trying to find a viable solution to this problem. My project requires 100 individuals to take turns sitting at a computer and filling out a form I created. Each time someone submits their information, ...

javascriptphphtmlcss

Adjusting the Direction of Flex Components

As someone who is new to css and html design, I recently started using flex in my bootstrap designs. My goal was to have the components sorted from left to right direction, similar to how it's done on this site. Now, I am looking to shrink the slider ...

htmlcssflexboxcarousel

Tips for optimizing large image files on a basic HTML, CSS, and JavaScript website to improve site speed and ensure optimal loading times

Currently, my site is live on Digital Ocean at this link: and you can find the GitHub code here: https://github.com/Omkarc284/SNsite1. While it functions well in development, issues arise when it's in production. My website contains heavy images, in ...

javascripthtmlcssuser-interfacegsap

The script fails to work correctly when displaying the data

Last night, I finally cracked the code on how to transfer data from my form on the index page to the content page, and then display the results inside the content div back on the index page. However, a new challenge has emerged. My Javascript function (re ...

javascriptphphtml

Encountered a problem initializing Rangy.js on Internet Explorer

Currently, I am developing an angular application that utilizes textAngular along with rangy-core and rangy-selectionsaverestore. However, I am encountering some errors specifically on the latest version of Internet Explorer: Module 'WrappedSelection ...

javascriptangularjsinternet-explorerrangytextangular