What is the difference between bootstrap.min.css and bootstrap.css?

Question

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.

Answer 1

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.

Answer 2

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.