Perch and the Bootstrap Framework

Bootstrap can be a really handy framework if you need to put together a site quickly. Perch is a great CMS for rapid development of content managed sites, so it isn’t surprising that we often get asked if Perch plays nicely with Bootstrap.

Perch is an ideal CMS to use with something like Bootstrap. The Bootstrap framework requires classes to be added to various parts of your HTML in order to create the various components. This would be tricky if your content was unstructured, the structured templated approach of Perch makes it really simple.

In this first Perch & Bootstrap solution I have created a set of example templates that turn Bootstrap Components into Perch Templates. A great example of Perch working with Bootstrap components is this Contextual Panel.

<div class="panel <perch:content id="contextual" type="select" label="Panel context" 
options="Default|panel-default,Primary|panel-primary,Success|panel-success,Info|
panel-info,Warning|panel-warning,Danger|panel-danger" />">  
  <div class="panel-heading">
    <h3 class="panel-title">
    <perch:content id="heading" type="text" label="Heading" required="true" title="true" />
    </h3>
  </div>
  <div class="panel-body">
    <perch:content id="content" type="textarea" label="Content" required="true" 
size="m" markdown="true" editor="markitup" />
  </div>
   <perch:if exists="footertext">
    <div class="panel-footer">
    <perch:content id="footertext" type="text" label="Footer text" 
help="An optional footer for the panel" /></div></perch:if>
</div>

In the template I am using a Perch select template tag to provide the content editor with a dropdown list of contexts that they can choose for the panel.

The Panel footer is optional, wrapping it in perch:if Conditionals ensures that we don’t get footer markup and an empty footer if the editor doesn’t have a footer for this Panel.

See the full Solution for all of the templates and watch out for the next Solution in this series where we will take a look at Bootstrap Navigation.