Bootstrap 3 and the fluid layout
Posted:

I was a bit at a loss with version 3 of Bootstap with the removal of the .container-fluid but when they moved to a mobile first system this actually translates to a "fluid system". By making the framework fluid and removing references to .container-fluid classes they cut out a lot of bloat.

What does this mean then .. well in in Bootstrap 2 you would define <div class="container-fluid"> now simply don't define a container at all. This makes sense in some parts as a "container" should contain your code, which it does now by providing max-widths at 728px, 940px en 1170px for the large grid system. If you need to overwrite the max width you should be able to do this in a new stylesheet placed after the Bootstrap source.

Basic fluid tempalte

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Bootstrap 100% fluid</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-lg-6">
50% (col-lg-6)</div>
<div class="col-lg-6">
50% (col-lg-6)</div>
</div>
</body>
</html>

comments powered by Disqus
© AndyJarrett 2013 | RSS Feed