DKR DKR - 29 days ago 18
ASP.NET (C#) Question

Bootstrap is not applying in asp.net master page

I have a master page in asp.net.

Below is complete .aspx file.

CSS is added to div tag using bootstrap. All links are given.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="apage.master.cs" Inherits="Website.apage" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>

<asp:ContentPlaceHolder ID="head" runat="server">

<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="Panel_Main" style="box-shadow: 0 0 02px blue;" class="panel panel-primary">

<div id="Panel_Heading" class="panel-heading">
<table style="width: 100%;">
<tr>
<td>
<div class="text-left">
<h4 style="font-family: Calibri; font-size: xx-large; font-weight: normal; font-style: normal; font-variant: normal; color: #FFFFFF">MyWebsite</h4>

</div>
</td>

</tr>
</table>
</div>
<asp:ContentPlaceHolder ID="childContainer" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>


I am trying to run with a child page. But css is not applied in browser.

I have another masterpage with same configuration which is working fine. But for this page, css is not applied.

Am I missing something here.

Any help is appreciated.

Answer

Try This

Your all Script & all Js Write in Outside the asp:ContentPlaceHolder

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <asp:ContentPlaceHolder ID="head" runat="server">

     </asp:ContentPlaceHolder>

        <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.1.1.min.js"></script>
        <script src="Scripts/bootstrap.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div id="Panel_Main" style="box-shadow: 0 0 02px blue;" class="panel panel-primary">

            <div id="Panel_Heading" class="panel-heading">
                <table style="width: 100%;">
                    <tr>
                        <td>
                            <div class="text-left">
                                <h4 style="font-family: Calibri; font-size: xx-large; font-weight: normal; font-style: normal; font-variant: normal; color: #FFFFFF">MyWebsite</h4>

                            </div>
                        </td>

                    </tr>
                </table>
            </div>
                            <asp:ContentPlaceHolder ID="childContainer" runat="server">
                            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>