Twitter Bootstrap Question posted in

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

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

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

In Bootstrap Sass (I’m using it part of React), 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.

Tags:

3

Answers


  1. 0

    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 !

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    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:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search