CODEWITHSUNDEEP
javascriptcsstwitter-bootstraptwitter-bootstrap-3grid-layout
Below the Radar
Below the Radar

Reputation: 7635

Bootstrap - create 100 columns grid that marry the shape of a circle

I have a container that have the shape of a circle. I would like to create a grid with 100 columns inside it. I would like to have a function that would create that grid with a shape that will marry the shape of the circle.

So far, I have create a square grid (10x10)

for (var i=0; i<10; i++) {
  var $row = $('<div class="row"></div>');
  for (var j=0; j<10; j++) {
    $row.append('<div class="col-xs-1 ' + (j==0 ? "col-xs-offset-1" : "") + ' grid_cell"><span class="glyphicon glyphicon-user"></span></div>');
    }
  $("#grid_1").append($row);
};

See the fiddle: https://jsfiddle.net/vo1npqdx/884/

Is there a mathematical theorem that could help for that issue?

---------------------------------------------------------------EDIT--------------------------------------------------------------

I manage doing something like this placing the cells manually (using switch case). Any way to impove it?

https://jsfiddle.net/vo1npqdx/886/

enter image description here

Upvotes: 2

Views: 195

Answers (1)

Dinesh undefined
Dinesh undefined

Reputation: 5546

I tried using display:flex property. i didn't create 10x10. My method is completely dynamic. please check this fiddle. https://jsfiddle.net/nc3uLy6L/

Upvotes: 2

Related Questions