0

I am struggling to get bootstrap to work with SharePoint. I have requirements that don't allow me to use the Responsive Bootstrap codeplex project.

This issue appears to be that my col- tags are not working within SharePoint to resize the content on a page. Have others run into this issue, and if so, how did you resolve it?

Update: It is working when resizing a browser, but when I load it on a Mobile phone, it is like the media query is not getting detected. Here is the code for my default.aspx page (which inherits from the default master page).

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="WebPartPageExpansion" content="full" />

   <%--Add your CSS styles to the following file--%>
<%--Bootstrap core CSS--%>
<%-- <link href="../Content/bootstrap.min.css" rel="stylesheet" />--%>
<%-- Custom styles--%>
<link href="../Content/App.css" rel="stylesheet" />


</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">

</asp:Content>

    <%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<%-- Container start. Note: Proper display on a Mobile device requires disabling the site feature "Mobile Browser View" which is SharePoint's default basic view of lists and libaries for Mobile devices  --%>
 <div class="container" data-ng-app="app">
<div>
    <p id="message">
        <%-- The following content will be replaced with the user name when you run the app - see App.js --%>
        initializing...
    </p>
</div>
    <div data-ng-view></div>
    <hr>
    <footer>         
    </footer>
      </div>
<%-- Container end --%>

<%-- Supporting JS files placed at bottom for performance --%>

<%-- Libraries --%>
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/SP.RequestExecutor.js"></script>
<%-- Angular Core --%>
<script src="../Scripts/angular.min.js"></script>
<%--  AngularUI Bootstrap for Responsive Web Design and styling options. Dependent on bootstrap.css but all JS is bootstrap refined for Angular: https://angular-ui.github.io/bootstrap/ --%>
<%--<script src="../Scripts/ui-bootstrap-tpls-0.12.0.min.js"></script>--%>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<%-- Custom paging directive as documented: https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination --%>
<script src="../Scripts/dirPagination.js"></script>

<%-- application specific js files --%>
<%-- App initilization --%>
<script src="../Services/services.js"></script>
<script src="../Controllers/controllers.js"></script>
<script src="../App.js"></script>

</asp:Content>

2 Answers 2

2

I've previously gotten bootstrap to work in SharePoint without the responsive bootstrap project...

Make sure your content is inside of a "container" element. All of your content should go inside of a .container or .container-fluid element, but you MUST use the container element for grid elements (such as columns)

http://getbootstrap.com/css/#overview-container

The problem is either that bootstrap and all of its appropriate assets are not being loaded (you can inspect this via the browser debug tools) or that your markup is not correctly formatted for bootstrap.

To start debugging this, I would begin with static HTML that definitely works outside of SharePoint, then work your way up toward the full app you've described (with markup generated by angular)

Here is the grid layout from the bootstrap example page, try using this static markup in your page source and see if it works:

  <div class="container">
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
  </div>
5
  • I had container added as followed, and just tried container-fluid, but it doesn't work. Note that I am using AngularJS to load views: <div class="container-fluid" data-ng-app="app"> <div> <p id="message"> <%-- The following content will be replaced with the user name when you run the app - see App.js --%> initializing... </p> </div> <div data-ng-view></div> <hr> <footer> </footer> </div>
    – Kode
    Mar 18, 2015 at 16:35
  • I've added some troubleshooting steps above, start with the basics (static HTML) then work your way toward figuring out why your angular app isn't working like you expect.
    – John-M
    Mar 18, 2015 at 16:42
  • That appears to work. I believe I need to hone more closely in on my tables. Will check back in momentarily
    – Kode
    Mar 18, 2015 at 16:45
  • I have been testing, but tables don't seem to be "responding" well. I may convert them to divs.
    – Kode
    Mar 18, 2015 at 17:56
  • I have found that I need to declare the col-xs as SharePoint does not seem to be respecting the default that bootstrap provides.
    – Kode
    Mar 18, 2015 at 19:18
1

I have found the answer to my issue. I was missing the viewport tag, so on mobile devices it was not rendering properly. See my edited initial post as it is now included. Here is the viewport tag that should be included in the header:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.