1
I have a question regarding the Bootstrap Grid System, it is valid to use a .row within an element with class .col-x-y in case I want to create more than one column inside that .col-x-y?
In short, it is good practice or not to use .row inside .col?
2
Yes you can do it this way. There is even an example of this in the official documentation as you can see here: https://getbootstrap.com/docs/4.0/layout/grid/#nesting
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
This technique is called Nesting Grid
See the full example below:
.row>[class^=col-] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>Browser other questions tagged css css3 twitter-bootstrap bootstrap-4
You are not signed in. Login or sign up in order to post.
Wow, I read the bootstrap documentation finding for example like this and the one passed me beaten. Thank you so much!
– Rodrigo Fontes
@Rodrigosources smoothly my young the documentation is extensive even, but always remember the concept of nesting "Nesting" it is recurring in various framworks. tmj
– hugocsl
One last question, whenever I create . cols within a . col I have to use a . Row as in the example above or each case is a case as it has the issue of spacing as well?
– Rodrigo Fontes
As a general rule YES, because . Row has right and left margins, already a . col has padding the right and left, roughly one slaughters the value of the other and is aligned, but the internal content of . col does not touch the edge of the .row. In the commentary it is difficult to explain, but using purely one . col within another . col vc can generate an unwanted padding inside the . col that is inside the other... It is complicated to explain with a few rss words. But if you want to open another question I give you more details and examples.
– hugocsl