PortiBlog

Responsive 3 columns Web Part zones using Bootstrap 3

10 september 2014

If you would like to make your SharePoint site responsive, Responsive SharePoint developed by CodePlex project would be a good start.

It comes with two popular responsive frameworks, Twitter Bootstrap (2 and 3) and Zurb Foundation (4) and converted them to work in both SharePoint 2013 and SharePoint 2010.

This provides you a Master page, looking like seatle.master, with top and left navigations that behave responsively, along with some Page layouts with responsive grids.

Responsive SharePoint site 

The following shows you how to define an area in a Page Layout with three columns of Web Part zones, that stack on top of each other when shown on smaller devices.

(For more information about Bootstrap grid system, please read Bootstrap 3 Grid system.)

In your custom Page Layout, put following code:


    <div class="row">
  <div class="col-md-4">
     <WebPartPages:WebPartZone ... >
         <ZoneTemplate></ZoneTemplate>
     </WebPartPages:WebPartZone>
  </div>
  <div class="col-md-4">
     <WebPartPages:WebPartZone ... >
          <ZoneTemplate></ZoneTemplate>
     </WebPartPages:WebPartZone>
  </div>
  <div class="col-md-4">
     <WebPartPages:WebPartZone ... >
          <ZoneTemplate></ZoneTemplate>
     </WebPartPages:WebPartZone>
  </div>
</div>
    

class="col-md-4" makes a 4/12 width column of the container, horizontal layout on medium devices, stacked on mobile devices and tablet devices (the extra small to small range)

The followings are available grid classes.

  • .col-xs-##: Extra small devices (phones, less than 768px)
  • .col-sm-##: Small devices (tablets, 768px and up)
  • .col-md-##: Medium devices (desktops, 992px and up)
  • .col-lg-##: Large devices (large desktops, 1200px and up)

.col-xx-## class must be put within a .row class.

You can apply these principle also to Display templates of Content by Search Web Parts and to xslt style sheets of Content by Query Web Parts.

Enjoy!

 

Submit a comment