How to Add Bootstrap to Ghost


Bootstrap is a widely used open-source front-end framework that helps to make styling your website easier. Here is how you add Bootstrap to Ghost:

If you are new to creating or editing a theme, check our our theme basics posts for information on how themes work with Ghost

Using Bootstrap CDN

If you want to use the CDN for Bootstrap rather than needing to download and host the files yourself, here is how you do that:

The links below may become outdated versions of Bootstrap. Check to get the latest version here.

  1. Open up your default.hbs file in a text editor of your choice.
  2. In the <head> section of your themes, along with where all the other css files are linked, add the following line:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    
  3. Now we need to add the Bootstrap scripts. Look in this file to see if the scripts are located either at the beginning or the end of your theme. Casper has all the scripts at the end of the default.hbs file. Where your other scripts are located, add the following line:

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    

That is all you need to do when adding Bootstrap as a CDN. Now either re-upload your theme, or restart Ghost to see the changes. If you would like to add the files directly to Ghost, we have those steps below.

Adding Bootstrap Directly

  1. Head to getbootstrap.com and download Bootstrap.
  2. Unzip the file that was downloaded. Inside you will see three folders, css, fonts, and js. These are the files you are going to use.
  3. SSH or FTP into where you are hosting Ghost (or open it up locally if you are hosting on your own computer).
  4. Change directories to access the files of the current Ghost theme you are using.

    /path/to/ghost/content/themes/name_of_theme
    
  5. Inside the themes folder, you will see an "assets" folder. This is where all of the bootstrap files will go, so go ahead and change directories into this "assets" folder.
  6. Now we want to upload the Bootstrap files. We do not need to upload everything, just a few of the files. Inside the "assets" folder, you will see other folders (css, js, fonts). We will be putting the Bootstrap files in there.
    Go ahead and upload bootstrap.min.css and bootstrap-theme.min.css into the css folder inside your Ghost theme. Also upload bootstrap.min.js into the js folder. And lastly, take all the files inside the Bootstrap fonts folder and put them in the Ghost fonts folder (do not overwrite the directory, just put the files in).

    If you are using FTP you should be able to just drag and drop the files into the correct location, or use the programs built in upload feature. If you are using SSH, the scp command is your best bet. Here is an example scp command:

    scp /path/to/local/bootstrap/file.js user@your_ghost_server.com:/path/to/ghost/content/themes/your_theme/assets/js/.
    
  7. Now that the files are uploaded, you can access them from inside your theme just like you would any other scripts. Here is an example of what you would add to your default.hbs file to load Bootstrap into your theme:

    <link rel="stylesheet" type="text/css" href="{{asset "css/bootstrap.min.css"}}" />
    

    and

    <script type="text/javascript" src="{{asset "js/bootstrap.min.js"}}"></script>
    
  8. Once you have made whatever changes you want to make, make sure your restart Ghost. None of these files or changes will get loaded until Ghost has been restarted.

Bootstrap is now installed! Check out our next post on how to add a menu to Ghost using Bootstrap!

That is all you need to do when adding Bootstrap as a CDN. Now either re-upload your theme, or restart Ghost to see the changes. If you would like to add the files directly to Ghost, we have those steps below. ####Adding Bootstrap Directly 1. Head to [getbootstrap.com](http://getbootstrap.com/) and download Bootstrap. 2. Unzip the file that was downloaded. Inside you will see three folders, `css`, `fonts`, and `js`. These are the files you are going to use. 3. SSH or FTP into where you are hosting Ghost (or open it up locally if you are hosting on your own computer). 4. Change directories to access the files of the current Ghost theme you are using. /path/to/ghost/content/themes/name_of_theme 5. Inside the themes folder, you will see an "assets" folder. This is where all of the bootstrap files will go, so go ahead and change directories into this "assets" folder. 6. Now we want to upload the Bootstrap files. We do not need to upload everything, just a few of the files. Inside the "assets" folder, you will see other folders (`css`, `js`, `fonts`). We will be putting the Bootstrap files in there. Go ahead and upload `bootstrap.min.css` and `bootstrap-theme.min.css` into the `css` folder inside your Ghost theme. Also upload `bootstrap.min.js` into the `js` folder. And lastly, take all the files inside the Bootstrap `fonts` folder and put them in the Ghost `fonts` folder (do not overwrite the directory, just put the files in). If you are using **FTP** you should be able to just drag and drop the files into the correct location, or use the programs built in upload feature. If you are using **SSH**, the `scp` command is your best bet. Here is an example scp command: scp /path/to/local/bootstrap/file.js user@your_ghost_server.com:/path/to/ghost/content/themes/your_theme/assets/js/. 7. Now that the files are uploaded, you can access them from inside your theme just like you would any other scripts. Here is an example of what you would add to your `default.hbs` file to load Bootstrap into your theme: and 8. Once you have made whatever changes you want to make, make sure your restart Ghost. None of these files or changes will get loaded until Ghost has been restarted. Bootstrap is now installed! Check out our next post on how to add a menu to Ghost using Bootstrap!