CODEWITHSUNDEEP
csstwitter-bootstrapfullcalendar
cbmeeks
cbmeeks

Reputation: 11420

How can design a full screen calendar view in Twitter Bootstrap?

I need to design a calendar view and I would like to use Twitter Bootstrap since I am used to using it for smaller projects.

But the 12 column span system doesn't seem to fit right on creating a calendar view.

So if I have a row that is span12, and I want to create a sub-row, I need 7 evenly spaced boxes for the calendar. I can't see how I can do this.

I thought about just creating a span12 and then just applying my own CSS inside it. Bypassing the Bootstrap system.

Any suggestions?

Thanks

Upvotes: 4

Views: 4378

Answers (1)

Sherbrow
Sherbrow

Reputation: 17379

Why don't you try downloading a grid-only, customized to 7 columns, bootstrap ? You may want Grid system and Layout

Here : http://twitter.github.com/bootstrap/customize.html

Then you just add your own selector in front of the few rules in the style sheet created, and you should have your very own 7 columns grid.

For the fluid grid, if you need it, just be sure that

@gridColumns*@fluidGridColumnWidth + (@gridColumns-1)*@fluidGridGutterWidth <= 100

The variables you are interested in are

  • @gridColumns : number of columns
  • @gridColumnWidth : width of one static column
  • @gridGutterWidth : width of the space between the static columns
  • @fluidGridColumnWidth : width of one fluid column
  • @fluidGridGutterWidth : width of the space between the fluid columns

Total width of a static container will be given as

@gridColumns*@gridColumnWidth + (@gridColumns-1)*@gridGutterWidth

Enjoy !

Upvotes: 6

Related Questions