CODEWITHSUNDEEP
csstwitter-bootstrapsassmixinsbootstrap-4
a53-416
a53-416

Reputation: 3965

How to make columns in Twitter bootstrap sass (alpha 4)

I'm trying to use the make-col() Sass mixin provided by Bootstrap. http://v4-alpha.getbootstrap.com/layout/grid/. What I'm trying to do is create two columns. With compiled classes, I'm able to do:

<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-9"></div>
</div>

And I get two divs that are floated next to each other in any window size larger than sm.

In Bootstrap Sass (I'm using it in a React project), when I do:

    .row {
        @include make-row()
    }
    .left {
        @include make-col(3)
    }
    .right {
        @include make-col(9);
    }

It does float the two next to each other, but when I shrink the screen down, the two don't block out. They remain floated. How do I get Bootstrap to mirror the above example when using mixins?

As an aside, from the documentation: @mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) - What exactly is size? Is it the number of columns? I'm confused because there is also a $columns variable.

Upvotes: 4

Views: 7070

Answers (3)

ˈvɔlə
ˈvɔlə

Reputation: 10273

Update

In Bootstrap 4.1<, there are mixins available for accomplishing grid system specific tasks. Those are the column related functions:

@include make-col-ready()
@include make-col($size, $columns: $grid-columns)
@include make-col-offset($size, $columns: $grid-columns)

Example usage

HTML

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

SASS

.example-container {
    width: 800px;
    @include make-container();
}
.example-row {
    @include make-row();
}
.example-content-main {
    @include make-col-ready();

    @include media-breakpoint-up(sm) {
        @include make-col(6);
    }
    @include media-breakpoint-up(lg) {
        @include make-col(8);
    }
}
.example-content-secondary {
    @include make-col-ready();

    @include media-breakpoint-up(sm) {
        @include make-col(6);
    }
    @include media-breakpoint-up(lg) {
        @include make-col(4);
    }
}

Sources:

Upvotes: 9

B.U
B.U

Reputation: 139

There is no detailed information on col mixins. From my experiments:

There are no mixins to create sm, md, lg col's in BS4. Instead one can extend the col-* classes.

Ex:

.product-gallery-list-item {
  @extend .col-md-6;
}

Upvotes: -1

Sahbi Belgacem
Sahbi Belgacem

Reputation: 674

I think you need a wrapper to your columns, or a parent container.

<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-9"></div>
</div>

Use the make-row mixin for that.

$size is used to control the width of your columns.

Hope it helps !

Upvotes: -3

Related Questions