How to place two containers in bootstrap side by side?

You can place independent columns next to each other by wrapping your columns in a parent container and flex box. The columns will automatically have equal widths. Here's an example.

html

<div class="parent-container d-flex">
    <div class="container">
        <div class="row">
            <div class="col">
                Container Left
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col">
                Container Right
            </div>
        </div>
    </div>
</div>

Bootstrap uses a 12-column grid, so each one of your divs will take up a row unto itself. You've also placed each one in a row, and rows will always stack. Try this:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6">
            Container Left
        </div>
        <div class="col-lg-6">
            Container Right
        </div>
    </div>
</div>