Login

tarcisiodev1 · 04-26-2024, 05:17 PM

What is the best way to integrate Bootstrap 5 into a version controlled Ci 4 Application? How can I integrate Sass and Bootstrap to compile new classes and variables in the best way?

Bosborne · 04-27-2024, 03:20 AM

This does not directly answer this question, but since you also mentioned minimization in a different thread, I will share what I have chosen to do.

Minification is only one optimizing step, especially when using external libraries such as Bootstrap. Minification removes white spaces to reduce load size, but you also end up loading the whole library. Usually the majority of it is unused.

Personally, I chose to use tailwindcss as my library along with webpack. For development, the whole library is available but for production, only the parts of the library used in my project are minimized to be used in production. It involves a little more work when moving to production, but it igreatly reduces any library overhead in the project.

vimkaf · 04-29-2024, 03:44 AM

Bootstrap is a static asset and should be included the same way you include a CSS / JS file. Compile your saas and link the built CSS to your view.

**InsiteFX** · 04-29-2024, 04:21 AM

This is one of my layouts, should give you and idea on how to include Bootstrap.

PHP Code:
<!doctype html>
<html lang="en">

<head>

 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 <meta name="author" content="">
 <meta name="description" content="">
 <meta name="keywords" content="">

 <link rel="icon" href="<?= base_url('assets/favicon.ico');?>">

 <title>Layout</title>

 <!-- Bootstrap CSS -->
 <link href="<?= base_url('assets/bootstrap/css/bootstrap.min.css');?>" rel="stylesheet">
 <link href="<?= base_url('assets/bootstrap/icons/font/bootstrap-icons.css');?>" rel="stylesheet">

 <!-- Application CSS -->
 <link href="<?= base_url('assets/css/web-app.css');?>" rel="stylesheet">

 <?= $this->renderSection('pageStyles') ?>

</head>

<body>

 <?= view('_navbar') ?>

 <main role="main" class="container">

 <?= $this->renderSection('main') ?>

 </main><!-- /.container -->

 <!-- Optional JavaScript; choose one of the two! -->

 <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
 <script src="<?= base_url('assets/jquery/jquery-3.7.1.min.js');?>"></script>
 <script src="<?= base_url('assets/bootstrap/dist/js/bootstrap.bundle.min.js');?>"></script>

 <?= $this->renderSection('pageScripts') ?>

</body>
</html> 

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009. ( Skype: insitfx )

captain-sensible · 05-01-2024, 09:17 AM

what i do is have my sass code same level as app, public then i use "grunt" to watch and convert to css and stick it as .css in public/css directory. IN that directory i have my custom.css from the sass , bootstrap.css, font-face.css and "style.css" inside style.css i have

Code:
@import url("bootstrap.css");

@import url("custom.css");

@import url("font-face.css");

So i just then reference one stylesheet the style.css in layout header, because using import the rest is pulled in. Also by importing bootstrap.css first anything in custom that matches stuff in bootstrap will be over written, so no need to edit anything in bootstrap nor mess about with bootstrap sass to css

if im allowed to post link to source forge , you can look at how i integrated everything

CMS CI4 I use Arch Linux by the way