Bootstrap Components for Neos CMS (Fusion Components and AFX) – based on Bootstrap 4.1 (https://getbootstrap.com/)

Map your content NodeTypes to the presentational components like this:

prototype(Medienreaktor.Site:Content.Button) < prototype(Neos.Neos:ContentComponent) {
    renderer = Medienreaktor.Bootstrap:Component.Button {
        content = Neos.Neos:Editable {
            property = 'text'
            block = false
        }
        href = ${q(node).property('link')}
        [email protected] = Neos.Neos:ConvertUris {
            forceConversion = true
        }
        theme = ${q(node).property('theme')}
    }
}

The resulting HTML is a Bootstrap button component:

<a href="http://" class="btn btn-primary">Your Button Text</a>

See the component fusion files for the complete API of all properties. In case of the button component, there are e.g. outline and size properties you can set either using NodeType properties or in your ContentComponent definition.

• Container
• Grid (rows and cols)
• Media

• Blockquote
• Code
• Figure
• Heading
• Image
• Lead
• List
• Picture

• Alert
• Badge
• Breadcrumb
• Button
• Button group
• Card
• List group
• Nav
• Navbar
• Pagination

• Close icon
• Embed responsive

This is work-in-progress. More components will be added from time to time.