55

What should I use between bootstrap.min.css or bootstrap.css?

I am confused between the two files because bootstrap.css is readable i.e. scrollable up & down. But the bootstrap.min.css is hard to edit since you can only scroll it left and right.

cwiggo
  • 2,541
  • 9
  • 44
  • 87
Haxor
  • 601
  • 2
  • 7
  • 10
  • 13
    I would suggest not editing bootstrap.min.css but instead create a new style sheet for your website/application, that can be used to override the styles in question. – DrBeza Apr 29 '14 at 15:09
  • 1
    Thanks @DrBeza, I'm now overriding. – Haxor Apr 29 '14 at 15:33
  • I really recommend you taking a look here: http://bootstrapbay.com/blog/customize-bootstrap/ – Ignacio Soler Garcia Feb 25 '15 at 19:09
  • possible duplicate of [Include both bootstrap.min.css and bootstrap.css or any one?](http://stackoverflow.com/questions/20560454/include-both-bootstrap-min-css-and-bootstrap-css-or-any-one) – amphetamachine Mar 19 '15 at 14:53

5 Answers5

73

bootstrap.min.css has been minified. This means all the whitespace and other extra characters have been removed. This is commonly done for use in production, to reduce the size of the file. When developing, it is usually helpful to use the unminified version, since, as you said, it is readable.

The way it works is that it takes all variables (for example number, tableName) and converts it to shorter names (in this example, it renames number to a, and tableName to b), so that the file becomes a little smaller (from 220 MB to 219 MB), that's essentially what it's doing, of course it does more, but this is one part where you can grasp what it does.

That's why there's no white spaces, because a whitespace takes up 0.1 MB and it's best without it.

EDIT: As mentioned by DrBeza in a comment, if your intention is to modify the bootstrap.css file, it is much better practice to create a separate .css file and add your own css rules that override the defaults. This way, if you update to a newer version of bootstrap, you can simply swap out the bootstrap files, instead of needing to edit the new bootstrap.css to move your modifications over to it.

Web Developer
  • 333
  • 4
  • 17
forgivenson
  • 4,394
  • 2
  • 19
  • 28
  • Thanks! So it depends on the developer what they will use. – Haxor Apr 29 '14 at 15:09
  • 2
    You typically "use" both. Developers have various ways of using a non-minified version of a file during development for easy debugging and then changing the code to point to the minified file in production to reduce the transported file-size to the end-user. – Kevin Nelson Apr 29 '14 at 15:57
25

They have exactly the same function, but the .min.css version has been minified, meaning all whitespace has been removed to reduce file size and increase speed.

The normal .css is better for development if you want to edit and play around with the content, but if you are definitely not going to modify the file, use the .min.css for slightly better performance.

Sean Francis N. Ballais
  • 2,338
  • 2
  • 24
  • 42
Marco Prins
  • 7,189
  • 11
  • 41
  • 76
3

The main diversity between bootstrap.min.css and bootstrap.css is spacing. In bootstrap.min.css file, All the white spaces has been removed where In bootstrap.css file, white spaces are there. So obviously file size will be larger as compare to bootstrap.min.css. For that reason, As a Developer, We should use bootstrap.min.css.

Mohit Patel
  • 31
  • 5
0

The Gist is this: Use bootstrap.css when developing, and use bootstrap.min.css when you're done developing (ie: change all instances in your code that points to bootstrap.css to bootstrap.min.css) for faster loading and better UX for the end user.

Fouad Boukredine
  • 1,495
  • 14
  • 18
0

Use online Code formatter type in google or Bing like Code formatter enter image description here

it makes much better for scroll it left and right.

Nigus Abate
  • 11
  • 3