CODEWITHSUNDEEP
bootstrap-4
Ifunanyam
Ifunanyam

Reputation: 11

Is it okay to nest two rows in one container?

I am designing a site with Bootstrap 4 and I want the first content to be on one row while the other content to be on another row.

I achieved this by nesting two cols in one col and then, in a row. But I didn't think it was logical to do it this way. So, I want to know if it's okay to put the content separately in a row and then, in a container.

<div class="container">
 <div class="row">
  <div class="col-sm-12 text-center text-content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit magni tempore magnam cumque est explicabo placeat error culpa ipsum, cupiditate sit debitis animi reprehenderit nostrum dolorum veniam nemo quidem, illo ullam! Suscipit totam tempora, ullam et odit assumenda unde perspiciatis omnis autem nulla est deserunt excepturi, tenetur porro ut voluptatibus.</p>
   </div>
  </div><!--row-->
 <div class="row">
  <div class="col elld-btn text-center">
    <a href="#" class="btn btn-lg button1" role="button" aria-pressed="true"><i class="fas fa-download"></i>Download Elld</a>
    <a href="#" class="btn btn-lg button2" role="button" aria-pressed="true"><i class="fas fa-book-open"></i>View Docs</a>
   </div>
 </div>
</div><!--container-->

Upvotes: 0

Views: 58

Answers (2)

Nisharg Shah
Nisharg Shah

Reputation: 19662

You can also do it like that, you can nest two rows in one container but if there is many possibilities to avoid spacing creating by row class because row class is uses margin: 0 15px for that you need to set row at margin: 0

<div class="container">
 <div class="row">
  <div class="col-sm-12 text-center text-content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit magni tempore magnam cumque est explicabo placeat error culpa ipsum, cupiditate sit debitis animi reprehenderit nostrum dolorum veniam nemo quidem, illo ullam! Suscipit totam tempora, ullam et odit assumenda unde perspiciatis omnis autem nulla est deserunt excepturi, tenetur porro ut voluptatibus.</p>
   </div>
   <div class="col elld-btn text-center">
    <a href="#" class="btn btn-lg button1" role="button" aria-pressed="true"><i class="fas fa-download"></i>Download Elld</a>
    <a href="#" class="btn btn-lg button2" role="button" aria-pressed="true"><i class="fas fa-book-open"></i>View Docs</a>
   </div>
 </div><!--row-->
</div><!--container-->

Upvotes: 1

zmag
zmag

Reputation: 8261

Yes it is.

The example in the reference also has multiple rows in a container.

https://getbootstrap.com/docs/4.3/layout/grid/#equal-width

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Upvotes: 2

Related Questions