Can't set a bootstrap column to display none

Question

I have two columns which should be 9 spaces and 3 spaces at col-sm and above. At any width below that, I need first column to take up all 12 spaces, and I want the other column to not even display and take up no space anywhere. Should be easy but I can't seem to figure out how to do it reading bootstrap docs. I've tried a number of different col settings and none of them work and the 3 space column always displays wrapped underneath the 9 space column and still only takes up 3 spaces. Here's the last unsuccessful try. There's some sort of subtlety that I am missing

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-12 col-sm-9">
        </div>
        <div class="d-col-none d-sm-block col-sm-3">          
        </div>
    </div>
</div>

score 4 · Accepted Answer · answered Aug 05 '19 at 13:37

4

You should read the Bootstrap Display Documentation and you will see that d-col... isn't existing.

You should writed-none or d-xl-none:

As such, the classes are named using the format:

.d-{value} for xs

.d-{breakpoint}-{value} for sm, md, lg, and xl.

answered Aug 05 '19 at 13:37

Arthur

4,870
3
32
57

I've been reading the documentation and since I knew that "col" meant anything under sm (xs), I mistakenly added it to the display property. Thanks – Bobh Aug 05 '19 at 13:43
`col` say `column` but NOT under sm. When you write `col` the system understand `col-{default-breakpoint}` who is alway the minimum (`xs`). So `d` and `col` (and others) works the same way with breakpoint – Arthur Aug 05 '19 at 13:45

score 0 · Answer 2 · answered Aug 05 '19 at 13:37

0

Try adding col-xs-12 to the first column and hidden-xs on the second column.

answered Aug 05 '19 at 13:37

hudson

144
2
7

Is didn't found any documentation for `hidden-{breakpoint}` on boostrap – Arthur Aug 05 '19 at 13:47

Can't set a bootstrap column to display none

2 Answers2