how do i add bootstrap to umbraco 11 - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

dev-thandabantu 41 posts 321 karma points

Mar 12, 2023 @ 16:40

How do I add bootstrap to Umbraco 11?

This is probably very easy to do but I have been struggling for the past hour. I have installed bootstrap via the NuGet packager manager in visual studio. Then I added the link element to the header element and then script element to the footer element in the Master template. When I add some bootstrap classes in the Home.cshtml file, the bootstrap styles are not pulling through.

See image below to show the installation of bootstrap and the referencing in the Master template: installation and referencing

and here is where I am adding the bootstrap classes:

@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.HomePage>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@{
    Layout = "Master.cshtml";
}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-primary">@Model.Name</h1>
            <p class="text-secondary">@Model.WelcomeText</p>
            <button class="btn btn-primary">Click me</button>
            <button class="btn btn-outline-secondary">Or me</button>
            <div class="alert alert-warning" role="alert">
                This is a warning message
            </div>
        </div>
    </div>
</div>

Here is the result: result

Kindly assist.

Copy Link

Sam Beynon 8 posts 98 karma points

Mar 13, 2023 @ 08:04

Hi dev-thandabantu,

There are a number of ways to add Bootstrap into your Umbraco project. As you have already used NuGet to pull down the bootstrap package, this is now located within %UserProfile%\.nuget\packages as such, you'll need to copy the relevant files into your project and reference them from your .cshtml file.

An alternative solution is to use the Bootstrap CDN for a quick and easy implementation, however you then rely on an external service to provide the files.

As per the instructions here, you just need to add these two lines into your .cshtml.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

You may also need to include popper -

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

Copy Link

Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Mar 13, 2023 @ 08:57
1
your page layout is not quite right, you are missing a few elements should be more like
```
<html lang="en">
<head>
 ... your styles go here
</head>
<body>
@RenderBody()
<footer>
</footer>
... your scripts go here
</body>
</html>
```
Copy Link
is working on a reply...

Please Sign in or register to post replies