How to centralize Bootstrap grids - html

Question

In my website I have a bar on the top of the page. It contains some music player elements. They will be kept in 3 columns. I would like to keep the bar all back in the top of the page, but the grids stay in the middle.
<div class="container navbar-inverse navbar-fixed-top" style="height:50px;">
<div class="row">
<div class="col-md-2">
<div class="playerButton pre"></div>
<div class="playerButton play" onClick="play()"></div>
<div class="playerButton next"></div>
</div>
<div class="col-md-8">
<div class="waveBar">
<div class="waveBarTheme"></div>
<div class="waveBarPlayed"></div>
</div>
</div>
<div class="col-md-2">
<div class="playerButton unmute"></div>
<div class="playerButton repeat"></div>
<div class="playerButton addToPlaylist"></div>
<div class="playerButton screen"></div>
<div class="playerButton share"></div>
</div>
</div>
</div>
DEMO: http://jsfiddle.net/danials/b88mc56g/
Any idea to have the bar full-width and grids in the center ?

Answer 1

You have to separate the container(which is what restricts the width) from the navbar. Like this:
<div class="navbar-inverse navbar-fixed-top" style="height:50px;">
<div class="container">
<div class="row">
<div class="col-md-2">
<p>Left box</p>
</div>
<div class="col-md-8">
<p>Center box</p>
</div>
<div class="col-md-2">
<p>Right box</p>
</div>
</div>
</div>
</div>
Updated JSFiddle