Some Customizr layout examples

Nicolas showed you the basics of the Bootstrap 2.3.2 layout here. In this snippet, we’ll show you some concrete examples of layouts—first simple images, then more complex layouts.

Simple image layouts

If you have an image gallery to show off, you can use Customizr’s gallery format. However, what if you simply want to put a row of images inside your page or post? Here’s how:

A responsive row of four images

This example shows how to add 4 separate images. When they “flow” on smaller screens, each image will stack on top of the others equally. (Try it! Resize your browser window and watch what happens.)

The html looks like this:

A responsive row of three images

This example shows how to add 3 separate images. When they “flow” on smaller screens, each image will stack on top of the others equally.

The html looks like this:

A responsive row of six images

This example shows how to add 6 separate images. When they “flow” on smaller screens, each image will stack on top of the others equally.

The html looks like this:

Instructions for use

Replace these images with images from your site. For each image:

1. Delete the <a href="http … part of the html (or the part, if you added an image with captions);
2. Put your cursor where you have just deleted;
3. Click the “Add Media” button (just above the editor buttons in your page edit screen);
4. Set the alignment, the link, and the size of the image as you want them to be in the “Attachment Display Settings” at the bottom-right of the insert media panel. If you are using Customizr’s lightbox function, make sure that the “Link to” dropdown is set to Media file.

Repeat for each image.

Once you have added your own images (rather than links to random pictures, as I have above), Customizr’s lightbox effect will work on them (if you have it activated).

As you can see from the html code used to generate these rows of images, you simply need to make sure that the “span” numbers add up to 12. So for each row, you can have 6 x span2s (for 6 images), 4 x span3s (for 4 images), 3 x span4s (for 3 images) or 2 x span6s (for 2 images). Or you can combine different-sized images with span3 + span9, or span8 + span4, etc.

The possibilities are endless. More info here.

More creative layouts: a row of three products, with buttons

As you get the hang of things, you can get more creative. For example, you could create a page that has separate grid elements that are shaded, with product details in each. Again, as they are using the underlying Bootstrap, they are responsive.

The html looks like this:

		
Product detail

		

		
		
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		
		
Buy Now More Details
	
	


		
Product detail

		


		
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		
		
Buy Now More Details

	


		
Product detail

		


		
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

		
Buy Now More Details

	

For the shading, vertical spacing, etc. and a hover effect, you will also need the following CSS:

.my-product-grid [class*="span"] {
  background-color: #eee;
  text-align: center;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  min-height: 20px;
  line-height: 20px;
  border: 2px solid #ccc;
  margin-top: 0px;
  margin-bottom: 20px;
}
.my-product-grid [class*="span"]:hover {
  background-color: #ddd;
}
.my-product-grid [class*="span"] [class*="span"] {
  background-color: #ccc;
}
.my-product-title {
  font-weight: 600;
  font-size: 1.3em;
  line-height: 2em;
}

All images CC-BY-SA. Author details: here.