how to render content with react-bootstrap correctly?

Question

I have my html chunk below and I am expecting a result like this:

row1

1item 1item 1item 1item

row2

1item 1item 1item 1item

instead they stack up on eachother for some reason.

my html:

<div class="container-fluid">
    <div id="main" class="staticMain clearfix">      
            <div class="row">
                <div class="col-md-12">
                    <h3>Table 1</h3>
                    <div class="topMargin row">
                        <div class="col-md-12">
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="topMargin row">
                        <div class="col-md-12">
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                            <div class="col-md-3"><span><i class="fas fa-user-tie iconSize"><span class="attendantName">Info</span></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

the result can be seen here

Answer 1

Your divs of <div class="col-md-12"> should be where you have your row.

Try replacing

<div class="topMargin row">
    <div class="col-md-12">

with

<div class="topMargin">
    <div class="row">

Having several columns inside another column won't work correctly unless those columns are wrapped in a <div class="row">