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.