Vertical margins in Bootstrap

Today I've been working on a simple login page where I had to align the login box vertically, quite prosaic problem: How do I align the box vertically center? For me answer is simple, do not. If we prefer to create a simple and responsive design for mobile also we should resign from some fancy tricks to align things center, unless you have to. So I decided to create more generic and simple solution for it. I'm using LESS, so I've written simple script to generate classes set in a spirit of Bootstrap :-) Take a look below.

	/* Vertical offsets - Bootstrap Like */
	.generateVerticalOffsets(@prefixVal, @offset: 12) when (@offset >= 0) {
	@var: ~"@{prefixVal}";
	.v-@{var}-top-@{offset} {
	margin-top: unit(@offset / 12 * 30, em);
	}
	.v-@{var}-bottom-@{offset} {
	margin-bottom: unit(@offset / 12 * 30, em);
	}
	.generateVerticalOffsets(@prefixVal, @offset - 1);
	}
	.generateVerticalOffsets("xs");
	@media (min-width: 768px) {
	.generateVerticalOffsets("sm");
	}
	@media (min-width: 992px) {
	.generateVerticalOffsets("md");
	}
	@media (min-width: 1200px) {
	.generateVerticalOffsets("lg");
	}

view raw bootstrap_vertical_margins.less hosted with ❤ by GitHub

Just a quick explanation. First I declare simple mixin executing itself recursievly, decreasing offset, so we receive a simple loop solution. Inside I've put two classes v-top-XXX and v-bottom-XXX with margins generated arbitraly for my application. You can choose any different value than 30em as a maximum. Simple usage:

	<div class="col-md-4 col-md-offset-4 v-md-top-5">
	<form>
	<h3 class="text-center">Login</h3>
	<div class="form-group form-group-lg">
	<input class="form-control" id="email" placeholder="Email" type="text"/>
	</div>
	<div class="form-group form-group-lg">
	<input class="form-control" id="pass" placeholder="Password" type="password"/>
	</div>
	<p class="text-center v-xs-top-0 v-xs-bottom-1">
	<a class="link">Hide password</a>
	</p>
	<button type="submit" class="btn btn-primary btn-lg col-xs-12">Submit</button>
	</form>
	</div>

view raw bootstrap_vertical_margins.html hosted with ❤ by GitHub

Hope the solution will help :-)