Responsive Sharepoint master page using BootStrap 3

Making master page responsive in SharePoint is a night mare for me when i started from scratch. Trust me i have gone throw tons of blogs to get a piece of idea to crack sharepoint master page without breaking the layout and functionality. You can change the master page by,

  • Import design package [.wsp]:
    • I dont want to mess up my style library with with design package and dont want to import packages i never going to use.
    • Honestly there is no real documentation how can we can reset site/ remove design package we imported. [Sharepoint is like virgin, once it is done its done!]
  • Use SharePoint default tag/CSS:
    • As always Microsoft documentation sucks so i gave up on that.
    • If you open oslo.html / oslo.master you can see what i mean it has lot of tags and aspx controls i have no time/patience to read through everything. so in leap of faith and messing with master page as below.

As we all know master page is hear of SharePoint site. So with here is a quick dirty tip to change your master page without breaking/ pissing off sharepoint. Just follow this simple steps [Quick dirty tip].

  • Make of copy of oslo master page and rename it as bootstrap [We dont want to mess with sharepoint defaults]
  • Add all required library after meta tag as below,
  • Add jQuery,Bootstrap.js plugins and custom js as below


– Add add Bootstrap 3 CSS & custom css and custom css as below

Make sure all the JS and CSS are loaded properly, most of the time i need to clear cache [ctrl+F5] to get the changes as i make. I dont know its just me or entire universe.


– Paste it on your master page and hit the save button

Quick tip:

Don’t forget to add meta tag in master page as below, which scale down & up on mobile

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Search for these class name to customize master page sections as below,

  • topnavbar – Global navigation
  • searchbox – Search box
  • headtitle – Site title
  • mastfooter – Site footer
  • container – Page content
  • ms-srch-sb-searchImg – Search glass icon in search box

Vola now your master page is responsive like any another divine website out there. Bootstrap has wide community support to back you so build something awesome as you always do.

For complete documentation please refer this SharePoint2013-Bootstrap-3-Documentation-V1.1

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s