[FIXED] Implementing the COREui Admin Template to match the demo

Issue

I am learning web development and I am trying to use the COREui 4.0.1 Bootstrap admin template in an existing Symfony 5.3 project instead of standard Bootstrap 5 components and utilities. I am trying to get the page to look like https://coreui.io/demo/free/3.4.0/.

The project was created using symfony new my_project_name --full. I added Bootstrap CSS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#css and JS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#bundle to my base.html.twig.

Steps that I took:

• Create a new controller
• Create an associated view using a twig template
• Replaced the Bootstrap JS with https://coreui.io/docs/4.0/getting-started/introduction/#bundle and CSS with https://coreui.io/docs/4.0/getting-started/introduction/#css in my base.html.twig

What I was expecting:

• When accessing the controller/view I would see https://coreui.io/demo/free/3.4.0/

The actual result:

• Minor styling changes (from COREui rather than original Bootstrap) but no layout changes

Solution

The CoreUI CSS and JS that you have added to your project is to be used in the same way that you would use Bootstrap components and utilities i.e. adding to existing HTML elements.

Viewing the page source at the demo you provided at https://coreui.io/demo/free/3.4.0/ shows the HTML elements that you would need to have in your own project, that would then have CoreUI (in this case) CSS and JS components applied to them.

Using that demo https://coreui.io/demo/free/3.4.0/, if you wanted a side navigation bar you would need to have a HTML element like:

<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
    <div class="c-sidebar-brand d-lg-down-none">
...

Answered By - user3668514