Excuse me for this somewhat odd query about Bootstrap, but I seem to be a bit scattered today... I would like to change the background color of my container-fluid div so that it covers the entire width of the page. However, I want the child row-fluid div to be centered within the parent, with a minimum width of (for example: 970px). Inside the row-fluid div, there will be various col-* divs. The diagram below may provide some clarity:
This is the structure of my HTML:
<div class="container-fluid text-center header">
<div class="row"> <!-- I lose centering with class="row-fluid" -->
<div class="col-xs-3">Logo</div> <!-- I have also used the col-md-* class -->
<div class="col-xs-3">Dropdown</div>
<div class="col-xs-3">Telephone</div>
<div class="col-xs-3">Local</div>
</div>
</div>
Below is my CSS code (you'll notice I'm using the text-center class provided by Bootstrap):
.header .row {
margin: auto;
float: none;
width: 970px;
text-align: left;
}
While this setup works, I really want to leverage the responsive features of the Bootstrap Grid. However, when I resize the window, the site does not respond accordingly. I understand that I should use the row-fluid class to achieve responsiveness, but then I lose the centering effect. Perhaps I should explore using offsets. Any suggestions on how I can accomplish what I'm aiming for? I also acknowledge that my code has 4 columns, whereas the image depicts 3 columns. Thank you in advance. I am working with Bootstrap 3.1.1.