Bootstrap3 One and a Half Offset

With 3 1/3 width columns, col-md-3, to be centred within a bootstrap3 col-md-12 I was looking at adding an offset at the left something similar to col-md-offset-1.

Centring 3 Bootstrap3 col-md-3 divs within a row requires an offset which is 1.5 times a single column width. ie. two of these widths, one each side, but we don’t need the one at the right end as we are using an offset.

The situation: for a website footer I was including a widget area which I wished to have 3 columns of links and corporate references.

To give a better looking footer I was looking to have larger side margins and use the bootstrap col-md-3 for each of the columns.

However, the one and a half width doesn’t exist in Bootstrap.

As a percentage this is 100% * 1.5/12 = 12.5%.

Looking at the percentage width assigned to a single width column this is given as 8.33333333%.

Working from the single column width to 1.5 times gives a width of 12.499999995%.

I looked at the other column widths to see a consistent under valuing of the percentage.

I chose to use this width as it gives a small space between the columns, and less chance of the widths summing up to cause the floats to drop onto the next line.

With the 12.499999995% width I created a new offset specific to the larger width devices of col-md-offset-1-half.
thus giving

@media (min-width: 992px) {
   .col-md-offset-1-half { margin-left: 12.499999995%;}

I was unable to add the offset within the layout, it being a series of WordPress widgets. As I was managing the content I made the assumption that all 3 widget areas would be occupied.

So having created the above additional column and handled the responsive offsets, whilst writing this I was considering my original implementation decisions.

I found it easier to add this offset to the first element

@media (min-width: 992px) {
   .footer .widget:first-child{margin-left: 12.499999995%;}    

I could increase the left margin to get the desired insert.

For smaller width screens the insert can be appropriately reduced, if desired.

Based on this view I returned to my work to redesign it using row padding rather than affecting the column offset.

I had investigated the idea of creating a one-and-a-half offset for use in centring 3 columns in a bootstrap3 row. However, as I was unable to edit the particular row layout chose to add a margin to the first child element, when viewed on larger devices.