Giri Giri - 4 months ago 25
CSS Question

How to remove unused styles from twitter bootstrap?

My bootstrap stylesheet size is around 120kb.

But I'm only using 25% of that stylesheet code.

I don't want that span* class. I tried it by customizing it in bootstrap customize page.

I unchecked grid system, But I still see

span1 - span12 class
in forms, tables and responsive layouts.

Can someone help me to remove those codes?

Answer

Are you more concerned about the impact of the file size on the loading time for your users? Or want to make it easier for you to read/understand the CSS if it's shorter?

Either way, I suggest you don't spend too much time worrying about removing every single extra CSS style. Uncheck the elements of Bootstrap that you don't plan on using and download the customized version. For the live/production version of your site, use a minimized version of the CSS which will further reduce the file size.

If you just want to keep the code more simple for your use, that's definitely understandable but the Bootstrap team has done a great job of organizing it. Spend a little time with it.

Consider that trying to completely remove all span* references will remove functionality that you might use like controlling the width of form fields. These can be very useful, even if you're not using the grid.