To achieve this layout, it is possible to utilize CSS without the need for jQuery or JavaScript.
By using .container-fluid instead of .container, the content can span almost the entire width of the window with a small gutter of 15px on each side. Applying the background-color directly to .container-fluid will resolve any issues related to the gutter.
All content intended to fill the height of the window should be placed within the .container-fluid and given a height property. You can use either 100vh for 100% of the view height, or fallback to 100% if needed for older browser support like IE8. Ensure that all parent elements (at least html and body) also have a height: 100% set.
.height-full {
height: 100vh;
}
.bg-dark {
background-color: #333;
color: #fff;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid height-full bg-dark">
<div class="row">
<div class="col-xs-12">
<h1>Full width and height</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Regular content</h1>
</div>
</div>
</div>
If you only need to horizontally and vertically center a small form within the screen's width and height, consider using the standard .container rather than .container-fluid. Surround the .container with a div that has a specified background-color.
To create a centered form using Bootstrap grid, you can apply classes like .col-xs-6.col-xs-offset-3 for a half-width column at the screen's center. Set the column's height: 100vh for full height coverage. Vertical centering can be achieved by absolutely positioning the form, adjusting its position down with top: 50% and up with transform: translateY(-50%).
For instances where the 100vh may conflict with other elements like a navbar, consider positioning it fixed or absolute to remove it from the document flow.
.height-full {
height: 100vh;
}
.bg-dark {
background-color: #333;
color: #fff;
}
.vertically-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="bg-dark">
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 height-full">
<form class="vertically-center">
<h1 class="text-center">Some text</h1>
<div class="row">
<div class="col-xs-4">
<input class="form-control" type="text" />
</div>
<div class="col-xs-4">
<input class="form-control" type="text" />
</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-block">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Regular content</h1>
</div>
</div>
</div>