If can add Html Code with Code Snippet WebPart. In this control, you can load Html, SVG or CSS code to personlize your page.
Add Modern Script Editor Webpart on a SharePoint
1. Create a new Page ou Edit a SharePoint page
2. Click on + WebPart
3. Select Modern Script
4. Click on Edit markup > {} to display Editor Panel
Bootsrap integration
You can integrate bootstrap in your code, like this sample
<!DOCTYPE html>
<html>
<head>
<title>CodeSandbox Preview</title>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
rel="stylesheet"
/>
<style>
:root {
--title: #000;
--body: #1A1A1A;
--bg: #fff;
--link: #653ffd;
}
@media (prefers-color-scheme: dark) {
:root {
--title: #e5e5e5;
--body: #E6E6E6;
--bg: #0f0e0e;
--link: #edffa5;
}
}
html, body {
margin: 0;
paddng: 0;
overflow: hidden;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family:Inter,-apple-system,'system-ui','Segoe UI',Roboto,Oxygen-Sans,Ubuntu;
background-color: var(--bg);
color: var(--body);
line-height: 1.25rem;
}
.container {
display:flex;
align-items:center;
justify-content:center;
height:100vh;
flex-direction:column;
line-height: 1.4;
max-width: 500px;
margin: 0 auto;
animation: enter 0.8s ease-in-out forwards;
}
.title {
text-align:center;
font-size: 1.5rem;
padding: 20px 10px;
}
.description {
opacity: 0.8;
text-align:center;
max-width:65ch;
color:var(--body);
min-width:200px;
max-width:300px;
padding: 12px;
}
.container-answer {
display: flex;
flex-direction: row;
padding: 10px;
}
a.btn-answer {
margin: 20px;
color: var(--link);
text-decoration: none;
text-align: center;
}
a.btn-answer:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<svg style="width:48px;" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor">
<path clip-rule="evenodd" d="M2 2L14 2V14H2V2ZM12.7727 3.22727V12.7727H3.22727V3.22727H12.7727Z" fill-rule="evenodd"></path>
</svg>
<div class="title">
You are opening a CodeSandbox preview, do you want to continue?
</div>
<div
class="description"
>https://frnqxt.csb.app/</div>
<div class="container-answer">
<a class="btn-answer" id="btn-answer-yes" href="#">Yes, proceed to preview</a>
<a class="btn-answer btn-answer-no" href="/__csb_trust_prompt_reject?previewUrl=https%3A%2F%2Ffrnqxt.csb.app%2F">No, I don't trust this url</a>
</div>
</div>
<script>
const btnAnswerYes = document.getElementById('btn-answer-yes');
btnAnswerYes.addEventListener('click', () => {
document.cookie = "csb_is_trusted=true; Path=/; Secure; SameSite=None; Partitioned; Expires=Sat, 03 May 2025 17:24:16 GMT";
window.location.href="https://frnqxt.csb.app/";
});
</script>
</body>
</html>
Google font
The list of fonts available in SharePoint is limited. You can integrate Google Fonts to enhance the layout of your pages.
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cormorant">
<style>
.myFont {
font-family: "Cormorant";
font-weight: 900;
font-size:xx-large;
font-style: normal ;
}
</style>
</head>
<h1 class="myFont">My title with a Google Font</h1>