Bootstrap on only one page

Hi all,

I have a page where I use bootstrap.
Currently I only have it injected via its CDN link in the injected code section.
I was going to download the full file and just put it directly in my theme code so it would not have to make a network request.

But I only use it on one page for design reasons, would it be possible somehow to only load it for that one page via the network request? Or would it be better to just add it to the theme which might increase the load times of all pages?

You have code injection for each page and post in Ghost Admin, so you can include the link for your specific page only. Another possibility would be to add the compiled css in code injection if you want to avoid the network request (again for your specific page).

1 Like

Thanks adding the url worked for the specific page. I tried just adding the code but got:

Update failed: Header code cannot be longer than 65535 characters.

You need the whole bootstrap code? I guess then your better off adding the code in the page-{yourpage}.hbs if you have a separate template for it or go with the link instead.

But my assumption is you would not need the whole bootstrap code base and it would be better to just add what you need from it.

So your main concern is to reduce network requests. So if you create a page template in your theme and then use a custom header on it with just bootstrap then it will solve your issue.

You can in fact add the Bootstrap file to your theme and then only load it up for that one page (as well as any other possible times you might want to use it).

First off, add the internal tag #bootstrap to the post you have in mind. Then, in whichever file you have your CSS loaded from, add the following:

{{#post}}{{#has tag="#bootstrap"}}
    <link rel="stylesheet" href="{{asset "css/bootstrap.min.css"}}">
{{/has}}{{/post}}

Then all you’ll have to do in the present/future when you want to utilize that Bootstrap CSS file is add the internal #bootstrap tag to the post/page.

1 Like

This sounds good, how can I add the internal tag to a post and a page?

Differentiating a regular tag by an internal tag is done by adding a hash to the beginning of the tag name. Hence #bootstrap instead of bootstrap.

If you’re saying you don’t know how to add tags in general, basic usage of Ghost can be found on the Ghost Help Center page.

Thank you that makes sense.
I have uploaded the bootstrap file in my theme folder in: /assets/styles/bootstrap.css
The issue is I cannot get this to work (Right now I am just testing if I can get it working from the injected code. It sees to not pick up the path?

<link href="assets/styles/bootstrap.css" rel="stylesheet" id="bootstrap-css">

Add a forward slash in front of assets?

1 Like

Thanks I have tried ./ but / worked!

1 Like