why should write
<div class="row"> <div class="col-xs-12"></div></div>
i can write that only <div class="col-xs-12"> </div> without class="row">
??
Iâve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard.
Iâm not sure I understand your question.
But you would never want something to have a class of row AND a class of col-* - that would not make sense. Something is either a row or a collum. Generally, we have columns grouped into rows - the rows contain the columns, and the columns contain the data. An example from the bootstrap webstie.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
1 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>
A simpler example might be this:
<div class="container">
<div class="row">
<div class="col-md-6">
Column A
</div>
<div class="col-md-6">
Column B
</div>
</div>
</div>
Or I could add some background colors to make it clearer (normally Iâd do it in CSS but Iâll do it in situ in the HTML for simplicityâs sake):
<div class="container">
<div class="row">
<div class="col-md-6" style='background-color: red'>
Column A
</div>
<div class="col-md-6" style='background-color: green'>
Column B
</div>
</div>
</div>
Please let us know if that doesnât answer your question.
1 Like
thank you 
1 Like
Hello, I know this was asked a while ago now, but I donât think Kevinâs answer really covered why a col element needs to be inside a row element. Which is what I think the question was asking.
The short answer is a columnâs container needs to have a fixed display.
If you inspect a row element in your browser youâll see all the CSS styles applied by the bootstrap class. The main CSS rule that makes the row/col relationship work, is âdisplay: fixed;â though there are other styles involved.
So to reiterate, the col classes require a row class because there are CSS rules that need to be applied to the columns container too, and not just the column elements themselves.
You can very easily test this by replacing class="row" with style="display:flex;" and comparing the results. Youâll find the styling is enough to get the desired layout.
For example:
https://jsfiddle.net/airatkinson/3ho9x4t6/
<style>
/* background color classes to differentiate between elements */
.blue { background: blue; }
.green { background: green; }
.red { background: red; }
.orange { background: orange; }
.teal { background: teal; }
/* to help space out and differentiate between elements */
.spacing { padding: 10px; margin: 10px; }
</style>
<div class="container">
<h6> Boostrap vs Custom Row Class </h6>
<div class="row spacing blue">
<!-- first col (green, spacing) -->
<div class="col green spacing">
<!-- ROW CLASS (red, spacing) -->
<div class="row spacing red">
<!-- inner col (teal) -->
<div class="col teal"> col 1 </div>
<!-- inner col (teal) -->
<div class="col teal"> col 2 </div>
</div>
</div>
<!-- second col (green, spacing) -->
<div class="col green spacing">
<!-- NO ROW (orange, spacing) -->
<div class="spacing orange" style='display: flex;'>
<!-- inner col (teal) -->
<div class="col teal"> col 1 </div>
<!-- inner col (teal) -->
<div class="col teal"> col 2 </div>
</div>
</div>
</div>
</div>
I hope that clarifies why exactly you canât just write, <div class="col-xs-12"> </div> without the row class.
[edit: fixing jsfiddle link]
1 Like
Sorry to reply to an old post, I just wanted to address you saying it doesnât make sense for an element to be both a column and a row. This isnât entirely accurate.
It is true that a single element canât be both a column and row in reference to another single element. However, those classes can be in reference to two different elements.
In other words, an element could be a column to one element (its parent), and a row to another element (its child) at the same time.
For example
https://jsfiddle.net/airatkinson/vdxqbtuy/
<style>
/* background color classes to differentiate between elements */
.blue { background: blue; }
.green { background: green; }
.red { background: red; }
.teal { background: teal; }
/* so rows edges are visible (instead of being fully covered by their inner col elements) */
.spacing { padding: 10px; margin: 10px; }
</style>
<div class="container">
<h6> Independent Col & Row Classes vs Combined Col & Row Classes </h6>
<div class="row spacing blue">
<!-- COL CLASS (green) -->
<div class="col green ">
<!-- NESTED ROW CLASS (red, spacing) -->
<div class="row spacing red">
<!-- inner col (teal) -->
<div class="col teal"> col 1 </div>
<!-- inner col (teal) -->
<div class="col teal"> col 2 </div>
</div>
</div>
<!-- COMBINED COL & ROW CLASSES (red, spacing) -->
<div class="col row red spacing">
<!-- inner col (teal) -->
<div class="col teal"> col 1 </div>
<!-- inner col (teal) -->
<div class="col teal"> col 2 </div>
</div>
</div>
</div>
Keep in mind this can only be used in place of a row inside of a col, not a col inside of a row.
Meaning you could swap <div class="col"> <div class="row"> ...content... </div> </div>
with <div class="col row"> ...content... </div>
just fine (though you do see some spacing differences relative to its container, since one class will override styles shared by both classes)
But the same wonât work as a replacement for
<div class="row"> <div class="col"> ...content... </div> </div>
If you think about it, this makes perfect sense.
Combining a column element with its child row element just means âthis column is going to be a row layoutâ (ie it will contain columns).
But combining a column element with its parent row element would mean âthis row is going to be its own and only columnâ. And a row with one column isnât really a row, itâs just a single item.
[edit: fixing jsfiddle link]