Center align and bound content
Just like this region
HTML:
<div class=“row-fluid”>
<div class=“bound”>
<div class=“span12”>
Content
</div>
</div>
</div>
CSS:
.ubc-menu .container, /* Center align for menu */
.full-width-container .bound {
max-width: 940px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
@media screen and (min-width: 1200px) {
.ubc-menu .container,
.full-width-container .bound {
max-width: 1170px;
}
}
@media screen and (max-width: 979px) {
/* This class adds the padding back in for mobile/tablet view*/
.full-width-container .bound {
padding-left: 20px;
padding-right: 20px;
width: auto;
}
}
Region without “Bound” will be expand to full width. Best to mix with no-padding CSS rules and class to allow this region flush to window's width
Content will be expand to full width, while maintain the twelve columns grid behaviour