Pragmatism in the real world

Customising Bootstrap 3

I’m sure everyone already knows this, but it turns out that you can customise Bootstrap 3 without having to understand Less.

Part of the reason that I didn’t realise this is that I run my web browser windows quite small and regularly don’t see the main menu of getbootstrap.com as it’s hidden being the “three dashes” button. However, there’s an option called Customize on it.

This page gives you a massive form where you can configure lots of Bootstrap settings.

For one project, I have tightened the spacing to suit the customer’s requirements. This was easily done by changing:

	@grid-gutter-width: 16px
	@modal-inner-padding: 10px
	@modal-title-padding: 10px
	@panel-body-padding: 10px
	@panel-heading-padding: 10px 10px

The Compile and Download button at the bottom rather helpfully puts your configuration file into a gist so you can find it again too.