TWBS workaround for justified btn group with native buttons

n-btn-.html

<div class="n-btn-group">
  <div class="col-xs-4 n-btn">
    <button type="submit" class="btn btn-success">Save</button>
  </div>
  <div class="col-xs-4 n-btn">
    <button class="btn btn-warning">Reset</button>
  </div>
  <div class="col-xs-4 n-btn">
    <button class="btn btn-danger">Delete</button>
  </div>
</div>

n-btn.sass

// EXAMPLE OF A 'CLOSE ENOUGH' WORKAROUND FOR
// JUSTIFIED BTN-GROUP WITH NATIVE <button>'s
// in sass.

// a wrapping class: n[ative]-btn-group
.n-btn-group

  // a wrapping class: n[ative]-btn
  // reset padding left and right from column
	& > .n-btn
		padding-left: 0
		padding-right: 0
    
    // kill default border radius on .btn class
    // within .n-btn and change default display from
    // inline-block to block to make it stretch
		.btn
		  display: block
			border-radius: 0
    
    // apply left border radiusses for first .n-btn descendant
		&:first-child .btn
			border-top-left-radius: 4px
			border-bottom-left-radius: 4px
    
    // apply right border radiusses for last .n-btn descendant
		&:last-child .btn
			border-top-right-radius: 4px
			border-bottom-right-radius: 4px

// Why does this work?
// .n-btn-group will behave as block element, therefore stretching to it's parent width
// .col-xs-4 (or whatever col you will use) will react to .n-btn-group like it is its container (on block level).
// since .btn now is a 'block' instead of 'inline-block' it will inherit it's parent width
// include the border radius fixes on the first and last occurence, and you come pretty damn close to the real
// btn-group-justified deal!

// for an html example check n-btn.html below