CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jtheis
jtheis

Reputation: 916

Should Twitter Bootstrap Row/Col be used for layout?

I'm using Twitter Bootstrap for the beginnings of a very basic web store. I began using it mostly for some easy styling and whatnot, but as I got I find myself using more of their layout features.

One thing I'm curious about: I recall being told that I should, in general, not use HTML tables for page layout. I.e. it's fine to use them for tabulated data (its intended purpose) but not for arranging elements on a page.

My question is this: should the Bootstrap row and col classes be used for page layout, or exclusively for tabulated data? It seems very similar to using tables, but it also seems like they built Bootstrap with row/col being used for responsive layouts. Why are they different, if they are?

Upvotes: 2

Views: 255

Answers (3)

Janak
Janak

Reputation: 5052

You've got the most of it!

You should use bootstrap classes (row,col-) and not table structure coz of the foll reasons:

1) The classes allow you to have a responsive layout [if you see the code, you'll find everything defined in %, so it helps you get a fluid layout]

2) Also if you want the body content to have a centered layout [say 10% gutter space of both -left and right side], doing this with table is quite a tedious process. While if you use bootstrap, you can do this using offset classes

3) They can be easily switched from fluid to static and vice-versa layouts.

Upvotes: 0

Faust
Faust

Reputation: 15404

Bootstraps row and column classes are fine.They are not the same as using tables (table, tr, and td tags) for non-tabular-data layouts.

The problem with tables for layouts is two-fold

  1. Their rigidity: you can't convert <td>s in a row into a structure that operates like floats (at least not just with CSS), so your only recourse to changing the layout will be going in and re-arranging the markup structure, like ripping the cells out of a table and converting them to divs. This makes them quite useless for responsive design (there's your key buzz-word)

  2. Their semantics: tables are supposed to say "hey, I'm an array of ordered data" so for humans reading HTML code, your muddying the waters by using them for page-layout. It's also (theoretically) an issue for search-engine optimization.

Neither of these points apply to bootstrap row and col- classes, or for using display:table (etc.) in general

Upvotes: 2

danwarfel
danwarfel

Reputation: 880

Yes, you can use Bootstrap's CSS helper classes, "row" and "col". They access the Bootstrap Grid. Don't confuse this with using HTML tags "table", "td", "tr", etc. for displaying content, which yes should only be used for tabular data.

Upvotes: 0

Related Questions