I have much love for Bootstrap by Twitter. But there are some things that I was slow to figure out, see my earlier post on this: How to style Rows in Bootstrap.

Similarly to the style issue, you can’t easily add padding to elements within a row. Say you want to to have a row that has multiple columns. But you need to have a 15px padding for each column. (The row has a styled background and we don’t want the columns to touch the edges). If you try and target your columns directly via the .spanXX class with a descendant selector, you’ll have headaches later on when you change your column width, or add another row that had different needs. (I should mention, this isn’t a unique problem to Bootstrap. Most, if not all, grid systems have this issue.)

The solution is to place a <div> element within the .spanXX column container. This div is then padded and your content is then placed within.

Nice and simple:

<div class="row">
	<div class="span6">
		<div class="extraneous-non-semantic-markup">
			<p>Your Content is Padded!</p>
		</div>
	</div>
	
	<div class="span6">
		<div class="extraneous-non-semantic-markup">
			<p>Yay!</p>
		</div>
	</div>
</div>

And the styling on the class:

.extraneous-non-semantic-markup {
	padding: 15px
}

And that feels so dirty. But it’s a compromise that works because we gain so much more from grid layouts.

About the Author:

Learned something? Need help on your dev project? Well, I'm available for hire on project work:

  • Front End Development (jQuery, ExtJS, Backbone)
  • iOS Development
  • Server Side Development (Java Stack or Rails Stack)
  • System Architecture

Contact me:

Discussion

  1. Nic says:

    Ah, thank you for posting this. I’ve been struggling with padding and margins for a week now trying to get some styling on these spans. So simple!

    • oneblueyedog says:

      For a responsive site I’m making, I simply added a CSS class that padded the bottom only. I have evenly spaced vertical spans when scrolling the page on mobiles.

      Thanks for the great solution.

  2. John Blofeld says:

    .extraneous-non-semantic-markup

    I thought that was just some name you used. It actually has to be called that lol.

    I’m still convinced that somewhere buried in bootstrap they added a way to pad columns.

    Thanks for the info.

  3. Henry says:

    So simple yet so effective. Very nice solution.

    I was toying with modifying the spanx itself but that would have caused a headache with the overall layout.

  4. I’m facing an issue, if i have way too many rows when I pad, they start overlapping each other, which then renders this method of padding useless.

    I want to keep the standard grid size, while being able to “pad inside” the div the content, not expand the div size.

    is there any effective way to do this?

  5. Oli says:

    Good tip, I tried using the built in well class then overriding the box-shadow and border on it, this worked well for the left hand sidebar (span4) but it seemed to add width to the (span8) main content area dropping it underneath

  6. Patrick says:

    I use this approach all the time, regardles sof bootsrap sites, I createa heap of pad1- pad20 classes to use.

  7. Nipsey szo says:

    |

  8. Rob C says:

    This is my solution as well, but the “inner-padding” divs then blow other things, like the delimiting of the scaling of images to the width of columns. This success of the scaling varies widely across browsers; only Safari seems to get it right. I’m still struggling for a solution for this.

Leave a Comment