bootstrap col does not work when it should take up half of the row

Question

I want to use Bootstrap grid system for my layout. I wanted to allocate left side of page for my cards and right side for other stuff, but what I'm seeing is that it's taking up whole width for my cards:

<div class="container-fluid">
    <div class="row">
        <div class="col-6" *ngFor="let t of rslt">
            <mat-card  class="cards">{{t.turbine_name}}</mat-card>
        </div>
        <div class="col-8">
            right side
        </div>
    </div>
</div>

For my cards I have the following css:

.cards{
    margin: 1px;
    height: 50px;
    width: 150px;
}

I have around 100 cards which take whole the page and on the bottom of the page I see the right side. What am I doing wrong?

You're repeating the column element when you should be repeating the card. The column is just a container. — isherwood, Aug 12 '20 at 14:25
@isherwood thanks i did that now i see page seperation is as i expected,now how can i put n cards on eaxh row?its showin 3 cards per row now,i want to put 8 cards per row — , Aug 12 '20 at 15:22

David Liang · Answer 1 · 2020-08-12T14:29:15.547

1

You can only fit 12 columns in a row with the Bootstrap grid system. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

The exact wording is in Bootstrap documentation: https://getbootstrap.com/docs/4.5/layout/grid/#column-wrapping

So in your case, since you have a for loop to generate cards that take up 6 columns each (col-6), in theory you can fit 2 cards per row:

demo: https://jsfiddle.net/davidliang2008/nd72h5jf/5/

There are column breaks you can use to control how many cards you want per row for each pre-defined break points.

Now from reading your comments, I think what you want is to use the first <div class="col-6" /> to define 50% split for your left and right side of the page. And then within the left side, you want all your cards there, like this:

demo: https://jsfiddle.net/davidliang2008/nd72h5jf/7/

edited Aug 12 '20 at 14:29

answered Aug 12 '20 at 14:08

David Liang

20,385
6
44
70

you mean i can put 6 cards?each card can take one column?if so what should i do now? – Aug 12 '20 at 14:09
The total number of columns will have to add up to 12. You can do the calculations. For your code example I see you have a for loop for your cards, each of which will take up 6 columns. That's what that 6 stands for `col-6`. So you should see only 2 cards per row. Please see the Bootstrap documentation and you will get a clearer understanding. – David Liang Aug 12 '20 at 14:12
yes i know that,col-6 means 6 columns,my row is 12,so i want half of my page width to be allocated to my cards in which ,each row should show 6 cards,i dont know why it shows 20 cards in each row!and why are saying it should show 2! – Aug 12 '20 at 14:18
1

Unless I don't understand what `ngFor*` is, you have it on `
`. That means FOR EACH CARD, you will generate one `
`. EACH of that is ALREADY 6 columns. A row is JUST 12 columns. If you do 12/6, you can get 2 cards per row. Now I kind of get where you went wrong. You want half of the page for the cards. Using `
` has no problem at all for THAT HALF PAGE LAYOUT. Then inside left column, you will need to define another new row and columns for your cards. – David Liang Aug 12 '20 at 14:24
The cards have a fixed widths but he had the for loop on `
` not the cards. So each time it will generate 6 columns for a card. – David Liang Aug 12 '20 at 14:30
ngFor i should loop through my list im using angular,thats why im using *ngFor,othewise how can write all my lists in cards? – Aug 12 '20 at 15:15
`{{t.turbine_name}}`? If you just want to generate the cards within the 6 columns on the left. Or you follow my suggestion in one of my comments above: have the first `col-6` as the layout of your left and right page layout, and define a new row inside that 50% wide column, then you can use your old code to generate `
` for each card. Please read my example and comments one more time to ensure you got what I meant. – David Liang Aug 12 '20 at 15:39

bootstrap col does not work when it should take up half of the row

1 Answers1