CODEWITHSUNDEEP
javascripttwitter-bootstrapresponsive-design
maxime1992
maxime1992

Reputation: 23793

Bootstrap artcile style

I often wonder if it's possible to build a responsive article with Bootstrap WITHOUT dividing content.

For example at the beginning it seems pretty simple : enter image description here

Basically it would be a row with 4 columns (let's say col-lg-3).

You would have to divide your text in 4 parts. Legit ... But i can't ask my users to divide their text.

Is there a good library out here to do that ?

I tried to write an angular module but i'm not happy with the result because I count how many words I have and I divide it by 4, 3, 2, 1 based on screen size.

The problem is that some words are longer than others and i end up with columns longer than others. If you have any idea i would be glad to hear !

EDIT : I made an angular directive to build responsive articles in a mater of seconds : Github, Plunkr

<multiple-columns col-xs="1" col-sm="2" col-md="3" col-lg="4" justify="true" text="Lorem ipsum ..."> </multiple-columns>

Upvotes: 1

Views: 31

Answers (1)

user3495690
user3495690

Reputation: 576

Yes, this can be done quite easily through CSS - no plugin required! Although, it is not supported in IE 9.

See http://www.w3schools.com/css/css3_multiple_columns.asp

Also make sure to check out the example: http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-count

Upvotes: 1

Related Questions