How to make Bootstrap 4 look like Bootstrap 3?

Asked

Viewed 87 times

1

Assuming I’m using Bootstrap 3 in a project and want to upgrade it to version 4, but keeping the look of Bootstrap 3 (buttons with gradients, shadows, etc).

Is there any way to do this the easy way? The SASS pre-processor has some configuration to help with this?

1 answer

1


Bootstrap itself provides full official documentation for migrating from version 3 to 4 as you can see here!

https://getbootstrap.com.br/docs/4.1/migration/

There are a number of differences between one version and another, among them the Grid which in V3 was based on Float and V4 is in Flex, Besides in V3 he was in LESS now is in SCSS. Javascript from one version to the other has changed, and the bootstrap.js V3 does not work in V4 and vice versa, including V3 nor did the popper.js, already in V4 it is practically mandatory if you want the navbar, dropdowns and collapses function properly...

Here is a list of more than 30 changes between one version and the other


About letting each other look the same

Yes, it may be possible to keep the V3 look on V4, but I believe it will take as much override which would not even be worth migrating just for the "visual aspect". Version 4 is based on REM and not and PX, That alone would be a pain in the ass to be calculating, and as an LESS and the other is SCSS you would have to do a lot of recompilations...

Comparison between the Standard Form of V3 x V4

inserir a descrição da imagem aqui

In the image above you can notice that the label has bold, the side spacing of the container V4 is larger, as is the padding in the input and vertical spacing between one element and another.

Logically you can get around this by CSS, but is it worth it? You would basically have to go to SCSS and change the values in REM for PX to the same extent as version 3 and then compile the bootstrap.css, beyond these basic changes you would have to change the theme of Colors etc....

See that you would need to change the value of the color variables, because they are not exactly the same...

inserir a descrição da imagem aqui


OBS: According to her own Bootstrap in 2019 should be released Version 5, so in case you’re thinking of migrating I recommend you wait a few more months. Source in their official blog: https://blog.getbootstrap.com/#branches-Hugo-and-jquery

  • 1

    Great explanation and great suggestion about the validity of migrating version.

  • @Thiagokrempser because the version 5 should be released later this year, better wait a little etc... It was worth the force

Browser other questions tagged

You are not signed in. Login or sign up in order to post.