Tips and Tricks: Bootstrap

Remove Responsiveness

If you want to disable the built-in responsive-features of the framework, you have to remove the meta-tag "viewport" from the master template. This you will find in the file application/views/master/main.php.

Read more about disabling the responsiveness here: http://getbootstrap.com/getting-started/#disable-responsive

Change Gutter Width

From the bootstrap-documentation: Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

Change to 2 pixel width:

You have to share the indented width into two parts and set them as padding and margin into container-, row- and content-div's:

.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}

Change to 5 pixel width (or any other odd number):

You could share into two different values. For example 3 + 2. And set different margin and padding values for the right and the left paddings and margins. Another solution is to remove all the paddings and margins from the left side, and put the whole value into the right side:

.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}

Use Glyphicons as List Item Bullets

    li{
	padding: 0 0 5px 20px;
	display: block;
	position: relative;
    }
    li:before {
	font-family: 'Glyphicons Halflings';
	position: absolute;
	left: 0;
	top: 3px;
	font-size: 80%;
	content: '';
	color:#DEAE4A;
    }