How to Install Bootstrap with Umbrcao 8

Lets just dive straight into it, How to install Bootstrap in Umbraco 8

Step 1. In your Umbraco 8 back office open up your Master Template.

Step 2. Now in a new browser tab open this site https://www.bootstrapcdn.com/ this is where you can get the most upto date versions of bootstrap.

You need the CSS link and JS links in html format.

Step 3. 

These were the up to date links when i wrote this blog that may not be the case now but they will still work

CSS (copy and paste into your master template head section)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

JS (copy into your master template just before your closing body tag)

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Step 4. Save everything and reload your site you should not see any changes but now you will be able to add bootstrap classes to your html code and it will implement bootstrap CSS styling.

About the author

Nathan Reece

.Net MVC Developer | Umbraco Novice

Hey Guys,

I'm an New Developer with a passion for coding. I absolutely love working with Umbraco CMS and appreciate the Umbraco community even more.

I've got 3 years+ .Net experience and 5 years+ experience working in the Web Develepment industry, both coding and marketing job websites. I wanted to use my skills to help give something back to this awesome community and UmbraJobs.com seems like the right place to do just that.

Follow me on social media

If you're an Umbraco professional, partner, employer, recruiter or a passionate Umbraco community builder then I'm more than happy to hear from you. Follow me on my social media channels and please reach out if you have any needs, want help or consultation with anything Umbraco related or just want a general chat.