How to add SPFx webpart to full-width column

Along with the SharePoint communication sites, we also got updated site page with layouts that include full-width column, but not all custom webparts are fit for that full width layout section.

Site page full-width column layout

So if we create new modern site page, we can see under "section layout" few options including the Full-width column. SharePoint full-width column SPFx web part

It is not yet presented in the local or online workbench provided for the developers to build their custom webpart, but we can still test it directly on the SharePoint page. When I attempted to add one of mine custom SPFx webparts there I ended with the screen below where is stated that only webparts that support full with would be listed.
SharePoint full-with column does not show custom SPFx web parts

Quick investigation on how to make a custom webpart available in the list of full-width webparts

Quick reverse engineering shows interesting stuff in the SharePoint JavaScript files on a site page.

e.isFullWidthControl = function(t) {
    if (t && t.controlType === d.default.WebPartZone) {
            var e = t;
            return e.webPartManifest && e.webPartManifest.supportsFullBleed || -1 !== h.indexOf(e.webPartId)
        return !1
As we can see it is a setting called "supportsFullBleed" in the webpart manifest so let's open the manifest.

The webpart schema is located at

We can find the "supportsFullBleed" setting in there (You might need to update your sp @microsoft node modules to the latest if you do not see it):
"supportsFullBleed": {
          "type": "boolean",
          "title": "Supports full bleed display experience",
          "description": "If set to \"true\", this web part supports and has been tested for full bleed experience."

Let's now add support for full-width column layout in a custom SPFx webpart

- Open the SPFx solution folder
- Navigate to src/webparts/<yourCustomSpfxWebpart>
- Open the webpart manifest YourCustomSpfxWebpart.manifest.json
- Add the "supportsFullBleed": true setting.

  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",

  "id": "d0645794-bb69-4873-a867-6cb7a3e414b9",
  "alias": "ReactSearchRefinerWebPart",
  "componentType": "WebPart",
  "version": "*",
  "manifestVersion": 2,
  "supportsFullBleed": true

Package the solution, deploy to SharePoint online, make it available for your site. Create new modern page, add full-width column layout and the custom webpart should be there.
custom SPFx web part listed in the Site Page full-width column section
There is the final result.
custom SPFx web part added to Site Page full-width column


We can now add full-width column SPFx webparts now and seems that Office 365 team cares about the developers more than ever before adding key features we need to deliver high quality products.

Sharing is caring

Posted on

Tags: SharePoint, SPFx, OfficeDevPnP, Communication Sites, SitePage, ClientSidePage, Office365, FullWidth webpart, supportsFullBleed

Bamba | 29 Nov 2017

Hello, is it possible to add full-width column web part on page of team site ?

Velin Georgiev | 29 Nov 2017

Hi Bamba,

Not yet. That option is not available in a Site Page within a Team Site. It is only available in Communication Sites for now. I do not know if they will make it available for Team sites.

Bamba | 29 Nov 2017

Hello Velin,
Is it a way to get the modern pages ( FullWidth webpart) of a communication site when we have already a collection of site ? Thanks