We Keep Coding

Removing space between columns in html table

I have an HTML table which is as following
Some of the code is below:
<table>
<tr>
<td>
<div style="width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 103px; width:80px;" class="location-block">
<div class="city-img">
<img src="worldwide-location.png" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
<td>
<div style=" width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 50px; width:80px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
<div style="height: 50px; width:80px; margin-top: -27px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
the table looks like the following:
enter image description here
As you can see the white space between each column, I am trying to reduce the white spaces between them, but this is not happening, I have tried padding-left and also gave cell spacing to the table, its not changing, can anyone tell me whats wrong with my code? Thanks in advance.

If you decide to use Bootstrap grid you can avoid to use HTML table tag, and use a structure like this:
<div class="row">
<div class="col margin-col">
<div>Images and content 1</div>
</div>
<div class="col margin-col">
<div>Images and content 2</div>
</div>
</div>
usign a proper CSS rule like this to set padding (inside columns) and margin (outside columns):
.margin-col{
padding: 10px;
margin: 20px;
}

Jquery: getting CSS or style

I guess there is something obviously wrong with this:
var elem = document.getElementById("homepage-mobile-cat1");
console.log(elem);
var test1 = elem.style("margin-left");
var test2 = elem.css("margin-left");
This returns elem.style or elem.css function does not exist.
The output of console.log is
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
<a href="http://www.example.co.uk/literacy/">
<div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;"> Literacy Resources</span></p></div> <!-- CSSTable homepage-cat-text -->
</a>
</div>

style is not a function in javascript.elem.style.marginLeft will give the value
var elem = document.getElementById("homepage-mobile-cat1");
var test1 = elem.style.marginLeft;
console.log(test1)
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style=" margin-left: 0 !important;">
<a href="http://www.example.co.uk/literacy/">
<div class="CSSTable homepage-cat-text" style="">
<p><span style="width:80%; display:block !important;margin:0 auto;"> Literacy Resources</span></p>
</div>
<!-- CSSTable homepage-cat-text -->
</a>
</div>
css is a jquery method & it will work with jquery object
console.log($("#homepage-mobile-cat1").css("margin-left"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
<a href="http://www.example.co.uk/literacy/">
<div class="CSSTable homepage-cat-text" style="">
<p><span style="width:80%; display:block !important;margin:0 auto;"> Literacy Resources</span></p>
</div>
<!-- CSSTable homepage-cat-text -->
</a>
</div>

Try jquery:
alert($('#homepage-mobile-cat1').css('margin-left'));

var elem = document.getElementById("homepage-mobile-cat1");
// You can use this method to calculate the style
var test1 = window.getComputedStyle(elem).getPropertyValue("margin-left");
console.log(test1);
//Or directly get the value from style. But this requires the property value to be already assigned to the style. If not, use the method above.
console.log(elem.style.marginLeft);
//Or alternatively, you can use JQuery
console.log($("#homepage-mobile-cat1").css("margin-left"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="
margin-left: 0 !important;"><a href="http://www.example.co.uk/literacy/">
<div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;"> Literacy Resources</span></p></div> <!-- CSSTable homepage-cat-text --></a>
</div>

Try elem.style.marginLeft.
var elem = document.getElementById("homepage-mobile-cat1");
console.log(elem);
var test1 = elem.style.marginLeft;
console.log(test1);
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
<a href="http://www.example.co.uk/literacy/">
<div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;"> Literacy Resources</span></p></div>
<!-- CSSTable homepage-cat-text -->
</a>
</div>

Bootstrap Grid thumbnails with expanded preview on click

I have an application, part of which is listing posts for a user profile:
<div class="row">
<%#posts.each do |x|%>
<div class="col-lg-4">
<%=x.body%>
</div>
<%end%>
<div class="row">
<div class="col-lg-12" style="border:1px solid black">
dsafasf
</div>
</div>
If i wasn't using dynamic data (lots of posts), this is what i want to happen ultimately (one row of posts shows up - then on click the large row underneath is toggled):
https://jsfiddle.net/nk2vLhhp/2/
However, I am trouble having this work with dynamic data. It is currently just showing one large row at the end of all posts (not just one row of posts). I want one large col-12 row after every three posts
How would i go about doing this? Any help please?
PS: My end, end goal is something like this: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

There are many ways to do it.
Method 1 :
$('.col-xs-4').click(function() {
$(".explanation").slideUp().remove();
var $desc = $("<div/>", {
class: 'explanation row'
}); //it can contain a close button like the others.
$desc.html($(this).find('.hidden').html());
$(this).closest('.row').after($desc).slideDown();
});
.col-xs-4 {
border: 1px solid black;
}
.col-xs-12 {
border: 1px solid black;
}
.hidden {
display: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
post 1
<div class='desc hidden'>Post 1 description</div>
</div>
<div class="col-xs-4">
post 2
<div class='desc hidden'>Post 2 description</div>
</div>
<div class="col-xs-4">
post 3
<div class='desc hidden'>Post 3 description</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
post 5
<div class='desc hidden'>Post 5 description</div>
</div>
<div class="col-xs-4">
post 6
<div class='desc hidden'>Post 6 description</div>
</div>
<div class="col-xs-4">
post 7
<div class='desc hidden'>Post 7 description</div>
</div>
</div>
Method 2 (with animation) :
Almost same as above but instead of creating the div.explanation everytime, simply define it hidden in the html, beneath every row.
https://jsfiddle.net/nk2vLhhp/13/
$('.col-xs-4').click(function(e) {
var $target = $(e.currentTarget);
$('.explanation').hide();
var targetClass = $target.attr('data-target');
$('.' + targetClass).removeClass('hidden').hide().slideDown();
});
.col-xs-4 {
border: 1px solid black;
}
.col-xs-12 {
border: 1px solid black;
}
.hidden {
display: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4" data-target='1-content'>
post 1
</div>
<div class="col-xs-4" data-target='2-content'>
post 2
</div>
<div class="col-xs-4" data-target='3-content'>
post 3
</div>
</div>
<div class='row'>
<div class='col-xs-12 explanation hidden 1-content'>Post 1 description</div>
<div class='col-xs-12 explanation hidden 2-content'>Post 2 description</div>
<div class='col-xs-12 explanation hidden 3-content'>Post 3 description</div>
<div>
<div class="row">
<div class="col-xs-4" data-target='4-content'>
post 4
</div>
<div class="col-xs-4" data-target='5-content'>
post 5
</div>
<div class="col-xs-4" data-target='6-content'>
post 6
</div>
</div>
<div class='row'>
<div class='col-xs-12 explanation hidden 4-content'>Post 4 description</div>
<div class='col-xs-12 explanation hidden 5-content'>Post 5 description</div>
<div class='col-xs-12 explanation hidden 6-content'>Post 6 description</div>
<div>

Get parent id of placeholder container drag&drop

I am trying to get the placeholder id of my drag/drop elements.
on first drag&drop i could retrieve it, however the content comes from database and mostly will be pre-populated.
The problem i am facing now is, i cannot find the id of the binded drop container.
$('document').ready(init);
function init() {
$('[data-type]').bind('dragstart', function (event) {
event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
});
// bind the dragover event on the board sections
$('#header-container, #header-storage').bind('dragover', function (event) {
event.preventDefault();
//$(event.target).css({"background-color":"#AA0000"});
});
// bind the drop event on the board sections
$('#header-container, #header-storage').bind('drop', function (event) {
event.preventDefault();
var notecard = event.originalEvent.dataTransfer.getData("text/plain");
event.target.appendChild(document.getElementById(notecard));
var room = document.getElementById(event.target.id).parentNode;
console.log(room);
// Turn off the default behaviour
// without this, FF will try and go to a URL with your id's name
var $id = $(event.target).attr("data-element-id");
alert('you dropped ' + notecard + ' into '+$id+' but into what container i do not know? In header-container or storage container?');
});
}
/* Customize container */
#media (min-width: 768px) {
.container {
padding-top: 20px;
}
}
.popover {
min-width:300px;
height:auto;
}
[data-type="column"] {
padding: 10px;
min-height: 30px;
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, 0.2);
}
.row-hightlight {
padding: 15px;
background-color: #C9C9C9;
border: 1px solid #FFFF33;
margin: 4px 0px;
}
[data-type="div"] {
padding: 15px;
background-color: rgba(194, 200, 230, 1);
border: 1px solid #000;
margin: 4px 0px;
max-width: 1022px;
}
.container-fluid {
padding: 30px;
background-color: #a4a4a4;
border: 1px solid red;
margin: 10px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<!-- row start -->
<div class="row">
<!-- col starts -->
<div class="col-md-3">
<!-- panel starts -->
<div id="storage" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Storage Container</h3>
</div>
<div id="header-storage" class="panel-body">
<!-- div Starts -->
<div class="clickMe " data-element-id="59" data-type="container" id="59" draggable="true">container</div>
</div>
</div>
<!-- panel ends -->
</div>
<!-- col ends -->
<!-- board starts -->
<div id="header-container">
<div class="col-md-9">
<!-- div Starts -->
<div class="clickMe " data-element-id="43" data-type="div" id="43" draggable="true">
<!-- Container Starts -->
<div class="clickMe container-fluid" data-element-id="57" data-type="container" id="57" draggable="true">
<!-- div Starts -->
<div class="clickMe " data-element-id="52" data-type="div" id="52" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="60" data-type="row" id="60" draggable="true"></div>
<!-- row Ends -->
</div>
<!-- div Ends -->
</div>
<!-- container Ends -->
<!-- Container Starts -->
<div class="clickMe container-fluid" data-element-id="54" data-type="container" id="54" draggable="true">
<!-- div Starts -->
<div class="clickMe " data-element-id="55" data-type="div" id="55" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="56" data-type="row" id="56" draggable="true"></div>
<!-- row Ends -->
</div>
<!-- div Ends -->
</div>
<!-- container Ends -->
<!-- Container Starts -->
<div class="clickMe container-fluid" data-element-id="44" data-type="container" id="44" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="45" data-type="row" id="45" draggable="true">
<!-- column Starts -->
<div class="clickMe col-xs-6 col-sm-6 col-md-6 col-lg-6" data-element-id="51" data-type="column" id="51" draggable="true"></div>
<!-- column Ends -->
<!-- column Starts -->
<div class="clickMe col-xs-6 col-sm-6 col-md-6 col-lg-6" data-element-id="49" data-type="column" id="49" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="50" data-type="row" id="50" draggable="true">
<!-- column Starts -->
<div class="clickMe col-xs-12 col-sm-4 col-md-4 col-lg-4" data-element-id="47" data-type="column" id="47" draggable="true"></div>
<!-- column Ends -->
<!-- column Starts -->
<div class="clickMe col-xs-12 col-sm-4 col-md-4 col-lg-4" data-element-id="48" data-type="column" id="48" draggable="true">
<!-- div Starts -->
<div class="clickMe " data-element-id="53" data-type="div" id="53" draggable="true"></div>
<!-- div Ends -->
</div>
<!-- column Ends -->
<!-- column Starts -->
<div class="clickMe col-xs-12 col-sm-4 col-md-4 col-lg-4" data-element-id="46" data-type="column" id="46" draggable="true"></div>
<!-- column Ends -->
</div>
<!-- row Ends -->
</div>
<!-- column Ends -->
</div>
<!-- row Ends -->
</div>
<!-- container Ends -->
</div>
<!-- div Ends -->
</div>
</div>
<!-- board ends -->
</div>
<!-- row ends -->
</div>

After var $id = $(event.target).attr("data-element-id"); add:
alert( $(event.target).closest('#header-container, #header-storage').attr('id'));

How to center all divs in bootstrap 3

I need to center align every divs in Bootstrap3. To make it an accounting report. There're 3 level of divs - Header, subheader and detail list. Each level I use col-md-* to limit the width. I've tried text-align but it's not help.
Here's the code :
<div class="container">
<div class="header text-info">
<h1>Heading</h1><br />
<h2>Acc. Type</h2><br />
<h3>Month</h3>
</div>
<legend>Income</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div>
</div>
<legend>Expense</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div><!-- /col-md-12 -->
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
</div><!-- /acc-content -->
</div>
DEMO : http://fiddle.jshell.net/nobuts/mshwa1yt/1/show/ (please view in desktop).
I expect all the divs to center aligned like this : (red border is just a test)
Please be adviced.

Add col-md-offset-*. For example:
<div class="col-md-10 col-md-offset-1">
and
<div class="col-md-8 col-md-offset-2">
You must also change your margin: 5px on .acc-content div[class*='col-md-'] to margin-top: 5px; margin-bottom: 5px because it overwrites Bootstrap's margin-left for col-md-offset-*.
DEMO: http://jsfiddle.net/mshwa1yt/5/embedded/result/
DOCS: http://getbootstrap.com/css/#grid-offsetting

using block-center class wrapping using row

all the col classes from bootstrap have the float left property. either remove them (not adivsed) and add margin:auto to the divs...or add more divs:
if u have a col-8 add col-2 left and col-2 right (offsets)...so you keep the grid system in place

You need to add this to the divs:
.acc-content div[class*='col-md-'] {
float: none;
margin: 5px auto;
}
First one overwrites the float: left rule that's pretty much the opposite of center aligning it, the second one actually aligns it to center.

Bootstrap 3 has a mixin called center-block found in utilities.less.
First, add class center-block to elements that should be centered.
Then, if using Less, add to CSS:
.center-block {
.center-block();
}
If using plain CSS, add:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}

in this example replace this
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
with this
<div class="col-md-10 col-md-offset-1">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8 col-md-offset-2">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
add class col-md-offset-"number of cols" to col- divs