CodeIgniter Forums
CI 4 integration with Bootstrap 5 - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: Installation & Setup (https://forum.codeigniter.com/forumdisplay.php?fid=9)
+--- Thread: CI 4 integration with Bootstrap 5 (/showthread.php?tid=83020)



CI 4 integration with Bootstrap 5 - Kenneth Kipchumba - 09-12-2022

Apart from using CDN or manually downloading Bootstrap files, what would be the best way to integrate Bootstrap 5 into a version controlled Ci 4 Application so that it will be easy to bring in its updates in future ?


RE: CI 4 integration with Bootstrap 5 - captain-sensible - 09-12-2022

it depends whether your going straight for ready css or scss which has certain advantages over css. So you can either change values of bootstrap or another way is to override them. if you go for scss you will need something like grunt or gulpfile to compile scss back into css.

My current approach is to use scss ; i also use fontawesome . The way I tie it all together is via one style sheet which inside i have :

Code:
@import url("bootstrap.css");
@import url("custom.css");
@import url("font-face.css");


Its in that order for a purpose. Anything in custom can over ride that which I want to of bootstrap.

Now if you go to packagist.org you can use composer to say get scss : https://packagist.org/packages/twbs/bootstrap

Or alternatives: https://packagist.org/packages/twitter/bootstrap . Using composer update should update anything in the composer.json file which you get when first using composer for anything.

For js I just downloaded and put in a dir called js , which is inside public. I have

Code:
[andrew@darkstar:kursaal.org/public]$ tree -L 1 js                                                                                                            (09-12 09:01)
js
├── bk
├── bootstrap.bundle.js
├── jquery-3.5.1.min.js
├── jquery-migrate-3.3.0.js
├── jquery-migrate.js
└── popper.js

1 directory, 5 files
[andrew@darkstar:kursaal.org/public]$


in my layout i also have :

Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

can't remember why but it fixed some issues.

So in summary if you go composer route, you can install CI4 that way and also other stuff. When you run composer update , it will update everything thats in composer.json IF updates are available and for CI4 , if the CI4 update is appropriate for your version of php .


RE: CI 4 integration with Bootstrap 5 - MGatner - 09-12-2022

For smaller projects or libraries where I don’t want to use a bundler I often use asset-packagist.org. You can check out my composer.json file for an example: https://github.com/tattersoftware/codeigniter4-frontend

You might also be interested in that library, or it’s parent Tatter\Assets; at least should have some helpful examples.


RE: CI 4 integration with Bootstrap 5 - alexsunny123 - 10-18-2022

thanks my issue has been fixed.