# Slim, id, bootstrap and css

**URL:** <https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898>\
**Category:** Questions\
**Created:** [May 8, 2024, 8:48am UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898 "2024-05-08T08:48:29Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![samclia](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@samclia](https://discourse.slimframework.com/u/samclia)\
**Post date:** [May 8, 2024, 8:48am UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/1 "2024-05-08T08:48:29Z")

</div>

Good morning,

English is not my first language, so, please, be patient with my mistakes.  
I have trouble with a page “sejour” in my website.

- I put In the application container DI with the register routes

```auto
$app->setBasePath('/slim-secretariat-web');

```

- the current folder is: /var/www/html/slim-secretariat-web/public. i verified it with

 \<?php echo getcwd(); ?\>
- The URL is: [http://localhost/slim-secretariat-web/sejours/2](http://localhost/slim-secretariat-web/sejours/2)

- the route in the Bootstrap menu is href =“sejours/2”

- the route in config/routes.php:  
`return function (App $app) { ..... $app->get('/sejours/{id}', ControlleurSejours::class . ':requeteSejours'); //récupération des données du séjour };`

- the head.php

```auto
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hôpital SoigneMoi</title>
        <!--élimination de l'icone Favicon -->
        <link rel="icon" href="data:,">
        <!--fichiers css bootstrap -->
        <link rel="stylesheet" link href="assets/css/bootstrap.min.css"> <!-- on se positionne par rapporu au dossier public -->
        <!-- fichier personnel --> 
        <link href="assets/css/styles.css" rel="stylesheet"/> <!-- car on lance la commande php -S localhost -public -->
    </head>

```

With href =“sejours/2” (Vootstrap menu) and /sejours/{id} (routes.php), there is a problem of CSS. With href =“sejour” and /sejours, it’s ok.

 ![Capture d’écran du 2024-05-08 12-58-28](https://canada1.discourse-cdn.com/flex030/uploads/slimframework/original/2X/3/3e9cdb3ab41f05e04ff63cc9082e14302653d36d.png)

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/slimframework/original/2X/2/21406fb8b32dc84f46ccae30d8f3e660326de634.png)  
_Ignore the dates, there is a false date._

Thanks for your help and have good day.

---

<div class="post-metadata">

**Author:** ![odan](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@odan](https://discourse.slimframework.com/u/odan)\
**Post date:** [May 8, 2024, 6:39pm UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/2 "2024-05-08T18:39:54Z")

</div>

Hello @samclia This topic has been discussed many times in this forum.  
Do you use Apache as web server? If so, have you tried this setup?

[https://www.slimframework.com/docs/v4/start/web-servers.html#apache-configuration](https://www.slimframework.com/docs/v4/start/web-servers.html#apache-configuration)

---

<div class="post-metadata">

**Author:** ![samclia](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@samclia](https://discourse.slimframework.com/u/samclia)\
**Post date:** [May 8, 2024, 9:21pm UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/3 "2024-05-08T21:21:28Z")

</div>

Hi Odan!  
Thanks for your reply.  
I use Apache.  
I made it:  
[Run a webstite with the slim apllication](https://discourse.slimframework.com/t/run-a-website-with-the-slim-application/5896/5)  
I created the two .htaccess.  
Good night.

---

<div class="post-metadata">

**Author:** ![odan](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@odan](https://discourse.slimframework.com/u/odan)\
**Post date:** [May 9, 2024, 9:02am UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/4 "2024-05-09T09:02:27Z")

</div>

The **`<base>`** HTML element specifies the base URL to use for all _relative_ URLs in a document.

To tell the browser where the basePath is, you can define a “base” tag like this in your layout template:

```php
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <base href="<?= $basePath ?>/"/>
</head>

```

Or, if you use Twig:

```twig
<base href="{{ base_path() }}/"/>

```

---

<div class="post-metadata">

**Author:** ![samclia](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@samclia](https://discourse.slimframework.com/u/samclia)\
**Post date:** [May 9, 2024, 12:26pm UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/5 "2024-05-09T12:26:00Z")

</div>

It doesn’t work. There is no css.

in the container.php, I put $app-\>setBasePath(‘/slim-secretariat-web’);

```auto
App::class => function (ContainerInterface $container) {
       $app = AppFactory::createFromContainer($container);

       // Configuration de le chemin de la base
       $app->setBasePath('/slim-secretariat-web'); //https://www.slimframework.com/docs/v4/start/web-servers.html
       // Register routes
       (require __DIR__. '/routes.php')($app);

       // Register middleware
       (require __DIR__. '/middleware.php')($app);

       return $app;
   },

```

this the head.php:

```auto
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <base href="<?= $basePath ?>/"> 
        <!--élimination de l'icone Favicon -->
        <link rel="icon" href="data:,">
        <!--fichiers css bootstrap -->
        <link rel="stylesheet" link href="assets/css/bootstrap.min.css"> <!-- on se positionne par rapporu au dossier public -->
        <!-- fichier personnel --> 
        <link href="assets/css/styles.css" rel="stylesheet"/> <!-- car on lance la commande php -S localhost -public -->
    </head>

```

and in after this instruction in a page :  
``

\<?php echo getcwd(); ?\>

```auto
it gives:
/var/www/html/slim-secretariat-web/public
```

---

<div class="post-metadata">

**Author:** ![odan](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@odan](https://discourse.slimframework.com/u/odan)\
**Post date:** [May 9, 2024, 1:33pm UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/6 "2024-05-09T13:33:17Z")

</div>

> [@samclia](#):
>
> It doesn’t work.

Make sure to pass the `basePath` variable into your layout template.  
Please add more details.

> There is no css.

But: `<link rel="stylesheet" link href="assets/css/bootstrap.min.css">`

Are you sure that there is no CSS? Also the second `link` is not a valid CSS tag.

---

<div class="post-metadata">

**Author:** ![samclia](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@samclia](https://discourse.slimframework.com/u/samclia)\
**Post date:** [May 9, 2024, 2:24pm UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/7 "2024-05-09T14:24:32Z")

</div>

Thank you to indicate me the error.  
It works with:

```auto
<base href="<?= "/slim-secretariat-web" ?>/"/> 

```

It doesn’t work with:

```auto
<base href="<?= $basePath ?>/"/>

```

---

<div class="post-metadata">

**Author:** ![samclia](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@samclia](https://discourse.slimframework.com/u/samclia)\
**Post date:** [May 9, 2024, 5:55pm UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/9 "2024-05-09T17:55:10Z")

</div>

I’m thinking I had a dream. The page doesn’t work with the id. I will you give the informations I can give.

---

<div class="post-metadata">

**Author:** ![samclia](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@samclia](https://discourse.slimframework.com/u/samclia)\
**Post date:** [May 9, 2024, 11:38pm UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/11 "2024-05-09T23:38:22Z")

</div>

I’m sorry to be confused.  
I persist:

```auto
<base href="<?= "/slim-secretariat-web" ?>/"/> 

```

works. With

```auto
<base href="<?= $basePath ?>/"/>

```

No CSS work with all the web pages.

Good nigth.

---

<div class="post-metadata">

**Author:** ![samclia](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@samclia](https://discourse.slimframework.com/u/samclia)\
**Post date:** [May 10, 2024, 12:02am UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/12 "2024-05-10T00:02:00Z")

</div>

J’ai un très long message sur une page. Le début suffira peut-être.

1 ( ! ) Warning: Undefined variable $basePath in /var/www/html/slim-secretariat-web/src/Views/head.php on line _4_ Call Stack #TimeMemoryFunctionLocation 10.0003352128{main}

---

<div class="post-metadata">

**Author:** ![odan](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@odan](https://discourse.slimframework.com/u/odan)\
**Post date:** [May 10, 2024, 6:22am UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/13 "2024-05-10T06:22:32Z")

</div>

This is because in this example, $basePath is a template variable that has to be defined and passed from a middleware or controller action.

---

<div class="post-metadata">

**Author:** ![samclia](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@samclia](https://discourse.slimframework.com/u/samclia)\
**Post date:** [May 10, 2024, 7:38am UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/14 "2024-05-10T07:38:05Z")

</div>

So I have to define this variable $pathPath and use it:

```auto
<base href="<?= $basePath ?>/"/>

```

It’ related to

```auto
$app->setBasePath('/slim-secretariat-web');

```

So what can I do to use it?

---

<div class="post-metadata">

**Author:** ![samclia](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@samclia](https://discourse.slimframework.com/u/samclia)\
**Post date:** [May 10, 2024, 6:50pm UTC](https://discourse.slimframework.com/t/slim-id-bootstrap-and-css/5898/15 "2024-05-10T18:50:40Z")

</div>

It’s a little complex.

```auto
<base href="<?= $basePath ?>/"/>

```

is ok. Thanks for your help.