Grow your CSS skills. Land your dream job.

Twitter Bootstrap Span/Margin Issues

  • # February 20, 2013 at 12:49 am

    http://www.petebunke.com/newportfoliosite/petebunke_contact.html

    I am currently working on an HTML layout, pre-PHP, for my contact page. My issue is that there seems to be an arbitrary margin on the left-hand side of the form that is making the span classes not divide evenly. For example, the span3 spans in the form itself are not making two-wide input/select rows, but instead line breaking to fit the span6. The two span6 divs in the larger span12 div are also doing the same thing, offsetting the placeholder image to the row beneath the form.

    I’ve scoured both bootstrap.css and bootstrap-responsive for what may be causing the strange padding/margin to the side, but cannot find the culprit, assuming that that space is causing this issue.

    # February 20, 2013 at 1:51 pm

    Your rows and columns aren’t structured properly. For one thing, each row should be wrapped in a div.row, and that last span.span3 in the form (wrapping the button) is completely unnecessary. This is what your final HTML *should* look like: http://jsbin.com/uwiniq/1/edit

    # February 20, 2013 at 9:16 pm

    Ah, I think I lacked the fundamental understanding that .row pertains specifically to individual rows, and not as a container that adds margins between the spans. Thanks a lot!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".