bootstrap is not working in my laptop

Question

I am using asp.net application with bootstrap in my office in my office desktop my website page is perfectly fitting to desktop monitor screen whereas in my laptop screen the screen becoming very bold.

#header {
    margin-top:0px;
    height:120px;
    width:auto;
    background-image:url('http://localhost:5172/Images/sd.jpg');
    /*border:dashed;*/
    border-top-color:green;
}
 #header ul{
            list-style:none;
            height:32px;
   float:right;
            width: 611px;
            margin-top:83px;
            display:block;
}
         #header ul li{
            background-color:red;
            border:1px solid white;
            width:120px;
            height:35px;
            line-height:35px;
            text-align:center;
            float:left;
            position:relative;
        }
         #header ul li a{
            text-decoration:none;
            color:white;
            display:block;
        }

         #header ul li a:hover
            {
            background-color:gold;
        }
         #header ul ul{
            display:none
            
        }

         #header ul li:hover > ul
        {
                display:block;
        margin-top: 0px;
        }
#body {
    height:750px;
    width:auto;
}
#tableBody {
            width: 100%;
            height: 750px;
            background-color: #CC6600;
}

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="CSS/StyleSheet.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .auto-style1 {
            width: 4500px;
        }
        .auto-style2 {
            color: maroon;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width:1100px;margin:0 auto">
            <tr style="width:1100px;height:50px">
                <td style="width:60px">
                    <img src="Images/MyLogo.png" style="width: 100px" />
                </td>
                <td class="auto-style1">
                    <marquee>
                            <asp:Label  ID="Label5m" runat="server" Font-Bold="True" Font-Names="Arial Black" ForeColor="#109AC1" Text="Hello Guys I am Ghayaz My website will be updated soon...........stay with us"></asp:Label></marquee>
                </td>
                <td style="width:900px;text-align:right">
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/youtube.png" Width="30px" />&nbsp;&nbsp<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/FB.png" Width="37px" />&nbsp;&nbsp<asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/LINKEDIN.png" Width="36px" />
                    &nbsp;</td>
            </tr>
            <tr style="width:1100px;height:40px;background-color:#5f98f3">
                <td colspan="3">
                    <div id="header">
                  <ul>
            <li><a href="#" class="auto-style2"><strong>HOME</strong></a></li>
            <li><a href="#" class="auto-style2"><strong>About</strong></a></li>
            <li><a href="#" class="auto-style2"><strong>Tutorials</strong></a>
                    <ul>
                        <li><a href="#" class="auto-style2"><strong>SALES AND DISTRIBUTION</strong></a></li>
                        <li><a href="CSHARP.aspx" class="auto-style2"><strong>C-SHARP</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>SQL</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>WCF</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ASP.NET</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ADO.NET</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>LINQ</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ENTITY FRAMEWORK</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ASP.NET MVC</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>WPF</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ABAP</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>ETL</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>SSIS</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>SSAS</strong></a></li>
                        <li><a href="#" class="auto-style2"><strong>SSRS</strong></a></li>
                    </ul>
            </li>
            <li><a href="#" class="auto-style2"><strong>IntervieQuestions</strong></a></li>
            <li><a href="#" class="auto-style2"><strong>ContactUs</strong></a></li>
            </ul>
                        <span class="auto-style2"><strong>SAP TUTORIALS AND MICROSOFT TUTORIALS</strong></span></div>
                </td>
            </tr>
            <tr style="width:1100px;height:300px">
                <td colspan="3">
                    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                    <asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick"></asp:Timer>
                    <asp:Image ID="Image1" runat="server" />
                            </ContentTemplate>
                        </asp:UpdatePanel>
                </td>
            </tr>
            <tr style="width:1100px">
                <td colspan="3">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr style="width:1100px;height:20px">
                <td colspan="3">

                </td>
            </tr>
        </table>
    </div>
    </form>
    <script src="Scripts/jquery-3.1.0.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</body>
</html>

have you tried using any older versions of JQuery? this issue maybe because bootstrap does not support JQuery 3.1. try using an older one like JQuery 2.4... — Prashanth Benny, Sep 25 '16 at 08:52
Prashanth no actually its my first time i am using bootstrap i am very new to it. — sandhiya, Sep 25 '16 at 08:55
currently, i see that you are using JQuery version 3.1, download version 2.2 of Jquery or provide the CDN from [here](https://code.jquery.com/jquery/) 2.2.4 would be fine — Prashanth Benny, Sep 25 '16 at 08:59
Prashanth what is this
in div tab? why we are using it?is this coming from jquery or bootstrap framework or it is user define?http://www.codeproject.com/Articles/815916/Create-an-ASP-NET-Web-Forms-Application-using-Boot — sandhiya, Sep 25 '16 at 09:00
jumbotron is a bootstrap class. for a better reference, just have a look at this site here www.w3schools.com/bootstrap/ its a very easy tutorial — Prashanth Benny, Sep 25 '16 at 09:02
so for every control we need this bootstrap class like in my webpage there are many tags like form,div,labelcontrol,buttoncontrol,imagecontrol,table,tr,td so for every tag i have to take bootstrap class? — sandhiya, Sep 25 '16 at 09:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/124145/discussion-between-prashanth-benny-and-sandhiya). — Prashanth Benny, Sep 25 '16 at 11:01

score 1 · Accepted Answer · answered Sep 28 '16 at 07:47

                                    <div class="input-btn-toolbar" style="width: 103%; background-color: #000000; padding-left: 8px; padding-top: 8px; padding-bottom: 8px; height: 100%;">

                                         <asp:TextBox style="text-transform: uppercase; font-size: 23px; text-align: center;" ID="txtReg" runat="server" type="text" class="form-control"  placeholder="Enter Registration"></asp:Textbox>

                                        <asp:LinkButton runat="server" OnClick="ButtonSearch_Click" Text="Search" CssClass="btn Jumbt btn-custom" style="color:white" > <i aria-hidden="true" class="glyphicon glyphicon-search"></i>&nbsp;&nbsp;Search</asp:LinkButton>&nbsp;&nbsp;

                                       <asp:Button runat="server" OnClick="ButtonEnterTyreSize_Click" Text="Enter Tyre Size" CssClass="btn Jumbt btn-custom " style="color:white" Width="130px"  />
                                     </div>
                                 </div>

score 0 · Answer 2 · answered Sep 28 '16 at 07:41

0

Sandhiya you should provide bootstrap class in all asp.net controls then it works.

answered Sep 28 '16 at 07:41

Ghayaz Dot Net Apps Developer

77
1
2
11

2

how to add bootstrap class in asp.net control – sandhiya Sep 28 '16 at 07:41
2

My First Bootstrap Page

Resize this responsive page to see the effect!
– Ghayaz Dot Net Apps Developer Sep 28 '16 at 07:44

score 0 · Answer 3 · answered Sep 28 '16 at 07:56

First thing to note is that you have to add Meta tag for page scaling in the Head section of the Master page. Below is the meta tag.

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

The above tag will allow the page to check whether it is a mobile device, or a tablet, or a computer etc.

After this, make sure that jquery reference is added before bootstrap files reference. Below is the example.

<script src="~/jquery/1.12.4/jquery.min.js"></script>
<link href="~/css/bootstrap.min.css" rel="stylesheet">
<script src="~/js/bootstrap.min.js"></script>

In case the above is same, then check that the main <div> in the body tag is decorated with class container like below:

<div class="container"></div>

Write everything inside this <div> tag, this will set the page margin as per Bootstrap standards.

Please comment in case of any further help.

bootstrap is not working in my laptop

3 Answers3

My First Bootstrap Page