Bootstrap4 .col always takes 100% and stacks vertically (bootstrap grid not working)

Question

I am trying to create a simple page with Bootstrap 4. There will be a left sidebar and a content area, each of which is a column w/in a row (per bootstrap grid system). However, even when adjusting the left column to smaller classes ("col-3", "col-sm-4", etc) the column takes up 100% of the row width. Curiously, the content within the first column will decrease in size according to the smaller column class, but no matter what class is selected, the margin increases until the first column fills the full row and pushes the second column to a new line.

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-6">
            <button type="button" class="btn btn-light" style="width: 100%;">Client 1</button><br>
            <button type="button" class="btn btn-light" style="width: 100%;">Client 2</button><br>
            <button type="button" class="btn btn-light" style="width: 100%;">Client 3</button><br>
            <button type="button" class="btn btn-light" style="width: 100%;">Client 4</button><br>
        </div>
        <div class="col-6">
            <p> Some test content</p>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col">
            <button type="button" class="btn btn-light" style="width: 100%;">Client 1</button><br>
            <button type="button" class="btn btn-light" style="width: 100%;">Client 2</button><br>
            <button type="button" class="btn btn-light" style="width: 100%;">Client 3</button><br>
            <button type="button" class="btn btn-light" style="width: 100%;">Client 4</button><br>
        </div>
        <div class="col">
            <p> Some test content</p>
        </div>
    </div>
</div>

The first and second code blocks should yield the same result. Side-by-side columns of 1/2 the container div's width. However, I get stacked columns in both instances. There is one difference though.

In the first block of code, I get a first column that is 50% of the container's width, buttons filling that width, and a margin of the other 50%. With column 2 stacked underneath at 100% container width.

In the second block of code, I get 2 columns stacked vertically - each 100% width.

I am at a loss, any help is greatly appreciated.

When testing your html in jsfiddle.net, I get two columns side by side, and not stacked columns as your questions suggests. See: jsfiddle.net/vicvipe/w1dtaufg — Ismael Padilla

tc1234 tc1234 · Accepted Answer · 2019-06-23T21:32:10

Embarrassing, but I figured out the answer... There was a second stylesheet loaded to format another contributor's content. This stylesheet also contained a row class, which was superseding bootstrap's row class and yielding the incorrect results.

Thank you for your input!

Bootstrap4 .col always takes 100% and stacks vertically (bootstrap grid not working)

1 Answers