Add SPFx Web Part to a Full Width Column

Introduction

In the communication site we can create a Full width Column that allows us to add a web part that will have full On the communication website, we can create a full width column that allows us to add a web part that will be full width. Once created, we will see a list of Web Parts that can be added to the section, not all Web Parts can be added to a Full Width Column Section.

Here the screenshot how it look like after added a Full with Column to a page.

How to allow an custom SPFX web part can be add to a Full width Column

We can allow our SPFx web part to be added to Full width Column, for that we must have to add a new property to our web part manifest file, called “supportsFullBleed“, this property is type boolean and have to set to true.

Here sample of manifest file with property enable.

{
 
 "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "bd3165a7-de0f-46bf-b961-7c07b0a5b7ad",
  "alias": "NewsWebPart",
  "componentType": "WebPart",
  "supportsFullBleed": true, 
  "version": "*",
  "manifestVersion": 2,
  ...
 
}

After deploy the web part , and fi we go to our page that have a Full Width Column Section, you will see our web part in a list of web parts allowed to add.

Here a sample:

Thanks for reading!