Fluid Container Styles in Twitter Bootstrap

In the previous article, we saw how the container and row styles were used to layout a page. Within each row consists of various span classes, with a numeric value after the class name, denoting a value from 1 to 12, for the 12 columns allowed within a row. In the Bootstrap CSS, the CSS page defines a fixed width layout for each of the span elements; this means the fixed width may leave gaps depending how the browser is sized.

There is an alternative though; using the container-fluid and row-fluid classes, instead of container and row, will use a percentage based layout, taking up some more of the white space around the edges.   All we need is the following setup to make this work:

<div class=”container-fluid”>
<div class=”clearfix row-fluid”>
.
.
</div>
</div>

And then our site uses a percentage-based layout.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s