BS GridColumn & GridRow issue

Hi Guys.

On the ‘caratures’ form I have GridColun & GridRow that I populate from an Ajax call and clone them using the following code:

function getLifestyle() {
 iframesReturnedLifeStyles = Ajax("" , returnedlifeStyles);
function returnedlifeStyles() {
     var i =0;
     var newID;
     var newImage;
     var newTitle;
     var newURL;
     if (iframesReturnedLifeStyles.status == 200) { //success
          //alert('data back '+ iframesReturnedLifeStyles.responseText);
          dataReturned = JSON.parse(iframesReturnedLifeStyles.responseText);
          var newArray = [];
          newArray = dataReturned['data'];
        for (var i = newArray.length - 1; i >= 0; --i) {
        newID =  'animID'+newArray[i]['anims']['id'];
        newDiv = $('#animID0')
        .attr('id', newID)   // <-- Note this line
        //.attr('class', 'testImage')
        newImage = newArray[i]['anims']['thumbnail']; 
        newTitle = newArray[i]['anims']['title'];
        newURL = newArray[i]['anims']['url'];
        animID0.hidden = true;

I have set the gridColumn (animID0) class = testImage
I have set the margin to 1%

This results in the following:
Settings 1

If I use the inspector and set margin : 0px !important I get the following
Settings 2

I need it to look like settings 2 with a margin on the gridColumn. The margin setting screws the size-lg size-md settings as in Settings 1.

So I need:
on large screen 4 across with a 1 % margin
On med screen 3 across with a 1% margin
Small screen 2 across with a 1 % margin
Tiny screen 1 across with a 1 % margin

I’ve played around for a couple of hours but cannot get it to work.


Steve Warby

4 cups of coffee, a soak in the bath and a fresh head…

I added another container within the gridColumn and change the settings around. Now the GridColumn is full size and the ‘inner’ container has the shadow & margin set. goto caricature page if needed.


Steve Warby

That’s exactly what I was going to suggest!

Glad it worked out.