2

I have created a HTML page using bootstrap and custom CSS. Assigned it as SharePoint master page but the SharePoint content is coming below the footer. Below are the HTML code, I used.

I am new to designing as well as SharePoint

<title>Master Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">

<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>   


<header>
    <div class="header-wrapper">
        <div class="site-name">
            <h1>sitename</h1>       
        </div>
    </div>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse" id="mynavbar">
                    <ul class="nav navbar-nav"> 
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Account</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                    </ul>
                </div>
            </div>
        </nav>
</header>

<footer>
    <div class="footer-wrapper">
        <div class="site-content">
            <div class="container">
                <div class="row">
                    <div class="block col-md-2 col-sm-6"></div>
                    <div class="block col-md-2 col-sm-6"></div>
                    <div class="block col-md-2 col-sm-6"></div>
                    <div class="block col-md-3"></div>
                    <div class="block col-md-3">
                    </div>
                </div>
            </div>
        </div>
        <div class="copy-right">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        CopyRights(c)
                        <a href="#">www.abc.com</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

Improve this question
2
  • I gues u didn't copy your seatlle.master from SP and changed it. In the default masterpage of SharePoint are different placeholders for such as content, header, menus etc. Try to copy the default masterpage and change it the way you like.
    – Chris K
    May 23, 2017 at 10:09
  • tip - place your <footer> tag just above the closing body tag </body>
    – Gautam Sheth
    May 23, 2017 at 10:27

1 Answer 1

Reset to default
0

you please check where are this tags in your master page. this tags should be align with your design <div id="s4-workspace"> <div id="s4-bodyContainer">

and <div data-name="ContentPlaceHolderMain"> this should place your sharepoint content. please check below the modified html

<div data-name="ContentPlaceHolderMain"> <div class="site-content">
            <div class="container">
                <div class="row">
                    <div class="block col-md-2 col-sm-6"></div>
                    <div class="block col-md-2 col-sm-6"></div>
                    <div class="block col-md-2 col-sm-6"></div>
                    <div class="block col-md-3"></div>
                    <div class="block col-md-3">
                    </div>
                </div>
            </div>
</div>
Improve this answer

Your Answer

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

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