html - Is it ok to use col class inside col class in bootstrap?

Question

I want to draw a line below a paragraph with hr element. The propbelem is that the p element has 15px padding in bootstrap but the hr element spans to the full available width. The line below the paragraph extends 15px left and 15 right to the paragraph's width. So I just did the following:

             <div class="row">
              <div class="col-lg-12 text-justify">
                <p> 
                  Some text is here.
                </p>

              </div>
              <div class="row">
                <div class="col-lg-12"> <div class="col-lg-12"><hr></div></div>
              </div>

I nested col-lg-12 directly inside col-lg-12. But in bootstrap we ought to nest .col inside .row classes. So is it okay use col class inside col class here?

Answer 1

No. It's not a Bootstrap best practice since as you mentioned col should be inside row.. The effect will be extra spacing on the left and right side of the inner col. The inner columns will wrap and not layout horizontally as expected.

"content must be placed within columns and only columns may be immediate children of rows"