Member Avatar for EvaBozh

I have a JSFiddle with the code for the footer for my website. There are three containers. I need to remove the spaces between those containers. How can I do this?

  • 2 Contributors
  • 5 Replies
  • 202 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Lau_1

Dani AI

Generated

A short diagnosis based on the thread: the visible gap between the three footer boxes is the Bootstrap v2 grid gutter (Bootstrap’s default gutter is 20px), so forcing a negative margin (what ended up doing) will collapse that space but is a local, brittle fix. ’s idea to edit bootstrap-combined.min.css also works immediately, but changing the framework file directly makes future upgrades and maintenance harder. Bootstrap 2 grid / LESS variables. (bootstrapdocs.com)

Why the gap exists: Bootstrap creates gutters from a grid variable and offsets them with negative margins on the row, which is why applying a negative margin can “remove” the gap at once. That behavior is documented and discussed (the .row negative-offset behavior shows up in older Bootstrap threads). If the intent is to remove gutters site‑wide, change the grid gutter at the source (variables.less) and recompile; if the intent is to remove spacing only in the footer, prefer a local override. (stackoverflow.com)

A practical, low‑risk approach for the footer: wrap the three columns in a footer-specific row class and reset only that region’s column padding/margins in a custom stylesheet loaded after Bootstrap. For example, add a footer wrapper class on the .row and zero the column padding there so the change is scoped to the footer only (keeps the rest of the site using the normal Bootstrap gutters). Do not modify the compiled bootstrap*.css file—keep framework files intact and put overrides in a separate file. Why override instead of editing core files. (blog.hubspot.com)

Troubleshooting notes: use browser dev tools to inspect computed margins/padding to confirm which rule is creating the gap, and test at the responsive breakpoints (Bootstrap 2 regenerates grid rules in media queries). Negative margins can introduce horizontal overflow and scrolling, so prefer targeted overrides or a recompile of the LESS variables for a clean, maintainable fix. (bootstrapdocs.com)

Recommended Answers

All 5 Replies

Member Avatar for Lau_1

u need to find and edit in bootstrap-combined.min.css find the

div{}

or u can specify by ur self, but should give a id or class for ur div and add this

div{
    margin-bottom:-10px;
}
Member Avatar for EvaBozh

Okay. Thanks. I'll try this. But can you please specify which DIV exactly should I use?

Member Avatar for Lau_1

add this in ur css file,

div .span4{
    margin-bottom:-10px;
}

the .span4 is ur div class name, to avoid clash, dont use span4 as class name for other div

Member Avatar for EvaBozh

Okay. I did this. But it didn't work. I've changed "bottom" to "right" and instead of 10px, I did 20 px. And it worked. Thank you very much! I'm new to this, so thanks!

Member Avatar for Lau_1

mark as solved if solved ya.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.