What is the difference between bootstrap.min.css and bootstrap.css?
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.
Solution 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.
Solution 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.
Solution 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.