CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designgrid-system
goodguy_cakephp
goodguy_cakephp

Reputation: 243

Creating a new twitter-bootstrap responsive column size

Atm I'm using col-lg, col-md, col-sm and col-xs

happens that col-xs is set to width 768px, I guess.

How can I create a new col-xxs or something smaller for eg. width 480px ?

Upvotes: 4

Views: 4101

Answers (3)

McNab
McNab

Reputation: 6777

Just had exactly the same need and wondered why I had never had it before. This is a pretty in-depth discussion about it;

https://github.com/twbs/bootstrap/issues/10203

And I found the most useful gist to be from Jakobud here;

https://github.com/twbs/bootstrap/issues/10203/#issuecomment-42162250

Gists;

SCSS: https://gist.github.com/Jakobud/c057577daddbde4dd709

LESS: https://gist.github.com/wdollar/135ec3c80faaf5a821b0

I can't speak for the LESS version, I used the Sass version and it's been excellent.

Upvotes: 1

mare
mare

Reputation: 13083

Unfortunately @4dgaurav's answer is not enough to introduce new breakpoints when working with Bootstrap's LESS source. There's more code to just overriding variables.

If you are using LESS you could use these two additional breakpoints which work (tested!): https://github.com/brgrz/bootstrap-breakpoints

HTH

Upvotes: 0

Adam Youngers
Adam Youngers

Reputation: 6759

You can use the following to accomplish this. I personally link to the bootstrap CDN in my projects and keep a local version of bootstrap so I can tap into its mixins for my site specific styles which is where I would place the following...

@media (max-width: $screen-xs-min) {
  @include make-grid(xxs);
}

Upvotes: 2

Related Questions