1. Make all tab contents as components
Before creating the tab containers, please make sure to create every tab content into components, please refer to this post (Component)

2. Convert to bootstrap Tabs
- select the target item
- click convert to … / Convert to UI Libraries
- choose
Bootstrap / Tabs
or Bootstrap / Tabs with button id
Bootstrap / Tabs
- Uses Bootstrap's default tab header styling

Bootstrap / Tabs with button id
- Allows you to specify a button ID that will activate different tab content


