CODEWITHSUNDEEP
twitter-bootstrapresponsive-designtwitter-bootstrap-3grid-layout
alekosot
alekosot

Reputation: 701

How can I add extra column classes in Bootstrap 3?

Bootstrap 3 changed the previous approach of span classes for the grid system for the more explicit col-xs, col-md, etc. An excellent improvement imo, but still I find that I would like to add extra column classes. In specific, I want to create a column class for something between col-md and col-lg.

I know that I can change the LESS variables in order to change the lengths of the standard column classes, but I do not want to modify them. Instead I want (if possible) to add extra classes for different screen sizes.

Any suggestions on how to do that? I did some research, but since Bootstrap 3 is quite new, I didn't find anything of that sort.

Upvotes: 1

Views: 3671

Answers (2)

Tom
Tom

Reputation: 3656

You can also take more of a hands off approach and not alter any of the LESS or CSS at all:

http://tmaiaroto.github.io/gridline/

... Put that on your page and use data attributes to adjust the number of columns on the fly and row by row. You don't need to adjust the classes at all, you'll just get new ones, so something like "col-md-24" will just work as if it was always defined.

Upvotes: 1

Sean Ryan
Sean Ryan

Reputation: 6056

Well, that would be less Bootstrap and more LESS. It wouldn't necessary be difficult, just time consuming. That being said, if I wanted to create an in between size (say col-mdlg-*), here is what I would try to do:

  1. Create a new .less file, and @import in the bootstrap.less file. This will allow you to use all of the Bootstrap specific variables and mixins.

  2. After that, copy in some of the grid stuff from grid.less for either md or lg below that import, ensuring to get both the default stuff at the top (delete the xs, sm, and md/lg, depending on which one you chose), as well as the size specific stuff at the bottom, and change the classes to your new class name.

  3. At the top of the size specific stuff, you would see this:

    @media (min-width: @screen-desktop) {
  .container {
    max-width: @container-desktop;
  }
  //rest of specific stuff here
}

    You would want to change the @screen-desktop to an actual value that is the minimum screen width you want it to trigger, and then @container-desktop to an actual value that is the max width for the container.

  4. Compile new less file and/or hook up your code to the output, and enjoy your new styles.

Upvotes: 5

Related Questions