Is that possible to wrap div inside a row? I know it's possible but I just want to know it's a bad practice or not. I'm not using any col-md classes inside row.
Please see the example below..
<div class="row">
<div class="home-bg">
1
</div>
</div>
It's a bad practice because .row is only meant to contain grid col* as specifically stated in the Bootstrap docs...
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins.. In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
http://getbootstrap.com/docs/4.1/layout/grid/#how-it-works
Your question is the same as asking can I have a div wrapping another div? The class row is just a bootstrap class with some css rules. Nothing more nothing less.
You will need to do this so many times. You will mix divs with classes from different libraries, with custom classes that you will have created and with so many different types of elements.
There isn't a question of good practice or bad practice. If you need some bootstrap functionality that already exists from a class, it's a good practice to use the existing functionality. If not then do whatever you want.
You can do this, but the question is why do you want to? All the row class does is add negative margins and the necessary flex properties to allow the column grid to work, seeing as you don't need the column grid, do you need the negative margins? If not then don't add the rowclass. Having a non-column grid class as the child of row isn't going to break your site, but it's important to bare in mind it may cause some undesired design bugs due to the negative margins it adds.
You can learn more about the Bootstrap column grids here.
