bootstrap multiple text columns

Question

i am trying to make a responsive multi column text aria with bootstrap. i tried looking online but could not find what i need.

this is an example of what i am trying to do, but i would like to make it responsive that with the screen gets small everything should be on one column http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-rule-width

any pointers will be very much appreciated. thank you.

Testee

go through getbootstrap.com – Triggerhappy

Answer 1

Use CSS media queries to adjust properties for screen width. Example of your solution

@media (min-width: 1200px) {
    .example {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
      -webkit-column-gap: 3em;
      -moz-column-gap: 3em;
      column-gap: 3em;
    }
  }

@media (min-width: 600px) and (max-width: 1200px) {
  .example {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
  }
}

@media (max-width: 600px) {
  .example {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
  }
}

Hauteur

Answer 2

I know this is an old post but those still searching may find this useful. If you add it to your custom.scss or similar and compile then it hooks into Bootstrap breakpoints and enables you to specify the number of columns at each scale for a range of column numbers. In this example you can then apply the class .text-columns-2 for instance comfortable that the number applied will be appropriate for the size of media.

I put this map in my _variables.scss for ease of access

$responsive_text_columns : (
    1: (sm: 1, md: 1, lg: 1, xl: 1),
    2: (sm: 1, md: 1, lg: 2, xl: 2),
    3: (sm: 1, md: 2, lg: 3, xl: 3),
    4: (sm: 1, md: 2, lg: 4, xl: 4),
);

And I put this in my custom.scss

// Responsive Text columns
@each $num_columns, $apply in $responsive_text_columns {
    .text-columns-#{$num_columns} {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 0.7em;
        -moz-column-gap: 0.7em;
        column-gap: 0.7em;
    }
    @include media-breakpoint-up(sm) {
        .text-columns-#{$num_columns} {
            -webkit-column-count: map-get($apply , "sm" );
            -moz-column-count: map-get($apply , "sm" );
            column-count: map-get($apply , "sm" );
            -webkit-column-gap: 0.7em;
            -moz-column-gap: 0.7em;
            column-gap: 0.7em;
        }
    }
    @include media-breakpoint-up(md) {
        .text-columns-#{$num_columns} {
            -webkit-column-count: map-get($apply , "md" );
            -moz-column-count: map-get($apply , "md" );
            column-count: map-get($apply , "md" );
            -webkit-column-gap: 1em;
            -moz-column-gap: 1em;
            column-gap: 1em;
        }
    }
    @include media-breakpoint-up(lg) {
        .text-columns-#{$num_columns} {
            -webkit-column-count: map-get($apply , "lg" );
            -moz-column-count: map-get($apply , "lg" );
            column-count: map-get($apply , "lg" );
            -webkit-column-gap: 1.2em;
            -moz-column-gap: 1.2em;
            column-gap: 1.2em;
        }
    }
    @include media-breakpoint-up(xl) {
        .text-columns-#{$num_columns} {
            -webkit-column-count: map-get($apply , "xl" );
            -moz-column-count: map-get($apply , "xl" );
            column-count: map-get($apply , "xl" );
            -webkit-column-gap: 1.5em;
            -moz-column-gap: 1.5em;
            column-gap: 1.5em;
        }
    }
}

UPDATE Or to make it even more efficient you could put this in your _variables.scss

$responsive_text_columns : (
    1: (sm: (cols: 1, gutter: 0rem), md: (cols: 1, gutter: 0rem), lg: (cols: 1, gutter: 0rem), xl: (cols: 1, gutter: 0rem)),
    2: (sm: (cols: 1, gutter: 0rem), md: (cols: 1, gutter: 0rem), lg: (cols: 2, gutter: 1.2rem), xl: (cols: 2, gutter: 1.5rem)),
    3: (sm: (cols: 1, gutter: 0rem), md: (cols: 2, gutter: 1rem), lg: (cols: 3, gutter: 1.2rem), xl: (cols: 3, gutter: 1.5rem)),
    4: (sm: (cols: 1, gutter: 0rem), md: (cols: 2, gutter: 1rem), lg: (cols: 4, gutter: 1.2rem), xl: (cols: 4, gutter: 1.5rem)),
);

And this in custom.scss

// Responsive Text columns
@each $num_columns, $apply in $responsive_text_columns {
    .text-columns-#{$num_columns} {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 0em;
        -moz-column-gap: 0em;
        column-gap: 0em;
    }
    @each $scale in ("sm", "md", "lg", "xl")
    {
        @include media-breakpoint-up($scale) {
            .text-columns-#{$num_columns} {
                -webkit-column-count: map-get(map-get($apply , $scale ), "cols");
                -moz-column-count: map-get(map-get($apply , $scale ), "cols");
                column-count: map-get(map-get($apply , $scale ), "cols");
                -webkit-column-gap: map-get(map-get($apply , $scale ), "gutter");
                -moz-column-gap: map-get(map-get($apply , $scale ), "gutter");
                column-gap: map-get(map-get($apply , $scale ), "gutter");
            }
        }
    }
}

Safranine

Answer 3

Litle SCSS snippet for BS5:

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint);
  @include media-breakpoint-up($breakpoint) {
    @for $i from 1 through 4 {
      .text-col#{$infix}-#{$i} {
        column-count: $i;
      }
    }
  }
}

Flibbertigibbet

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Bawdy