Html Bootstrap Columns stacking not side by side

Question

Hi y'all I'm trying to understand why my columns are stacking on top of each other instead of being side by side. Here's a screenshot of my page: Everything above the shopping cart I want to be to the right of the main page content like a side bar but I'm struggling to make that happen

And here is my html

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-9 col-md-6 col-lg-8">
            <app-grocery-sidebar></app-grocery-sidebar>
        </div>
        <div class="col-sm-9 col-md-6 col-lg-8">
            <recipes></recipes>
        </div>
    </div>
   
</div>

Answer 1

The bootstrap grid system has 12 columns per row. If the total number of columns is greater than 12, then the spare columns will wrap into the next row.

In your example, for small screens you have 2 x col-sm-9 classes, which makes a total of 18 columns. For medium screens you have 2 x col-md-6 classes, which makes a total of 12 columns, so it should work fine for this screen size, each column should have the same width. For large screens you have 2 x col-lg-8 classes, which makes a total of 16 columns.

You need to decide what % of the screen you want your sidebar to take up on large screens. For example, say you want it to take 25% of the screen, then you should give col-lg-3 to the sidebar and col-lg-9 to the recipes. If you want this to be the case on all screen sizes, then use col-3 and col-9 respectively.

If you want to give 33% of the screen to you sidebar, then you should use col-lg-4 and col-lg-8 respectively.

col-lg-2 and col-lg-10 will give 16.6% of the screen to the sidebar and 83.3% of the screen to the recipes.

col-md-6 for both, will give each element equal width of the screen on medium sized screens.

If you want all columns to take up equal space, you can also just use the col class on each element.

Read more on the Bootstrap docs for their Grid system .