I’m trying to improve my project’s HTML structure and I found something along these lines:
<div class="full-sidebar">
<div class="col-xs-12"></div>
</div>
Where “full-sidebar” is a custom class.
What I’ve been wondering is: is it a good idea to do so? Would I be better off in wrapping the column divs in a row? It just feels “wrong” done in the current way.
4
Answers
I know of at least one reason to use a row.
“cols-” are floated and wrapping them in a row adds a clear after all columns. This prevents subsequent content from potentially overlapping with your columns. Additionally, it also ensures the row’s height is equivalent to the height of the column content. If you don’t clear the columns’ container, then the container will not include the column in its own height.
Note that “col-” is only floated at widths greater than 992px. So you’ll only run into content overlap issues above that limit. See this fiddle.
HTML:
CSS:
Also, as others have mentioned, col padding and margins are designed to work in conjunction with row padding and margins.
You should always wrap
<div class="col-xs-12"></div>
inside<div class="row"></div>
.Reason-1
That’s the bootstrap grid-system. We use bootstrap to make a layout clean and responsive. It doesn’t create any harm if you do so.
Reason-2
If you don’t wrap within
<div class="row"></div>
it will create unnecessary problem in near future once your layout grows long. You won’t be able to keep a track of your layout.so, in general it is good to wrap it inside
<div class="row"></div>
, if you don’t have a solid reason for not doing it.Hope this helps!
No.
Bootstrap
col-*
should only be used withinrow
. From the docs..Also see: Bootstrap Rows and Columns – Do I need to use row?
Actually it is not standard procedure to use bootstrap column classes outside the row. It might disturb the layout of the column design. In bootstrap css file each column class has assigned different width percentage according to their use. If you use column classes outside the row class it may form different or disturbed layout than actual layout prescribed by the bootstrap. So it is not a good practice to do.
Grid System Rules
Some Bootstrap grid system rules specified by w3Schools.com
.container
(fixed-width) or.container-fluid
(full-width) for proper alignment and padding.row
and.col-sm-4
are available for quickly making grid layouts.rows
.col-sm-4