How to remove this margin-left

HTML & CSS
1

hi there,

i am just trying to learn about bootstrap and create really simple online store but i got a problem. here are my code: http://pastebin.com/Nth7m82j. You can see that code and what i want to do is to print my product (from database) in #main-box then it must auto move to new line when it have to print 4 product each line. This is the result pic and make me confuse …

Please someone help me to fix my problem. I just want to fetch producst from database and print 4 products each line and move to new line after that. So sorry for my bad english :slight_smile:

Thank You

2

Presumably there’s too much padding or margin on the columns. It would be more helpful to have a working demo (free of PHP etc.). Just insert the relevant HTML and CSS into a template like this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style>

[COLOR="#FF0000"][I]your CSS here[/I][/COLOR]

</style>
	
</head>
<body>

[COLOR="#FF0000"][I]your HTML here[/I][/COLOR]

</body>
</html>

Full guidelines:

3

i don’t know about padding & margin of this element cause i just use span3 on bootstraps, mate.

i fetch the content from database so i need php at current time.

4

We can’t help unless we can see the CSS and the HTML that goes with it. But it needs to be in a for we can actually test. You could view the source code of the rendered page, grab the relevant code and paste it into the template I gave above. Or just link to the site. But PHP is not relevant to the issue, so should be left out.

5

Hi,

When you nest span classes in bootstrap you need to create a fluid-grid parent to hold the inner elements.


<div class="span8" id="main-box">
[B]    <div class="row-fluid">[/B]
     <div class="span3">Fluid 3</div>
     <div class="span3">Fluid 3</div>
     <div class="span3">Fluid 3</div>
     <div class="span3">Fluid 3</div>
[B]   </div>[/B]
</div>

In that way the margin-left on the first div is removed automatically by the bootstrap rules.
bootstrap css:


.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}