: Full width web design (with Twitter bootstrap) I have not done much web design previously and wanted to get an understanding of full-width layouts and responsive design. Specifically, my question

@Nimeshi995

If you want to show full width of browser with Twitter Bootstrap
you must overwrite the attribute width of container. You can try my code:

body .container {
min-width: 100%;
padding: 0 15px;
margin: 0 -15px;
}

Vote Up Vote Down

@Ogunnowo487

Twitter Bootstrap uses a responsive grid layout that should have a max width for content, so it should limit the main content sections to a certain width by default.

However, the growing popularity of XD (eXtreme Definition) displays that are 2560px wide or more (e.g. WQUXGA like the IBM T221 family of displays or even 4000px+ wide monitors) means that most max widths you set are going to leave lots of unused space in the margins on a growing number of displays.

So some designers have taken to a design framework/ideology based on frameless grids. The idea being that, instead of focusing on screen sizes (via transition points and media-queries) and using fluid grids to adapt content to the screen, you focus solely on your content. You determine what column widths your content looks best in, and then use something like SASS to auto generate the media queries that will either float another column of content up or drop the content to the next row.

If you extend this concept to its ultimate conclusion, you get an infinite grid—where your layout can consist of an infinite number of columns or rows. How many of each are displayed just depends on the viewport dimensions. Thus there's no need for a max width.



If you're not comfortable with a fully frameless grid, then you can use a hybrid layout. So, for example, you let your column width be fluid/elastic below 320px. Above that, you switch to fixed width columns. So, you might require 25em for each column, and the wider the viewport is, the more columns get floated up, but if there's room, expand the middle column to 50em, etc.

Vote Up Vote Down

@Jennifer507

Well, put it this way: You face many different browsers on Pcs, mobile devices, tablets, OS, so naturally, as much as you try to have a seamless look, differences will happen.

If you set your main div width for example, to a percentage (50%, 70%, 100% etc.), it'll definitely look different always. With different systems and monitor resolutions, you're bound to differences. So setting a fixed width eliminates most of that. Nevertheless, it is very important to have responsive web design.

Test your website with a couple of different resolutions. In the end in my belief there's no right or wrong for this, its a matter of deciding which way to go and sticking with it.

I always go for the fixed width. Mobile devices tend to stretch a page, or shrink it to fit on full width.

Vote Up Vote Down