22

I try to place two containers side by side, but they are stacked on top of each other. Even container-fluid class doesn't help.

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

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

Is it possible in Bootstrap?

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Andrey Langovoy
  • 795
  • 2
  • 7
  • 15

3 Answers3

30

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>
Eliezer Bernart
  • 2,386
  • 24
  • 33
Mister Epic
  • 16,295
  • 13
  • 76
  • 147
5

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>
Community
  • 1
  • 1
David
  • 14,205
  • 20
  • 97
  • 144
0

the thing is that container-fluid is now replaced by container http://www.bootply.com/bootstrap-3-migration-guide but this is not the matter. Try the .col-md-offset-* that moves *columns to the right your columns. Check this out http://getbootstrap.com/css/#grid

stamstam
  • 144
  • 9