Bootstrap framework not responsive for asp.net webform

Question

I want to use bootstrap v2.3.2 for my asp.net webform based website. I am following this tutorial link . So far it looks fine but the web page is not resizing when i re-size the browser window. It just remain the same size as if it is not Responsive page.

This is my following code of ASP.Net MasterPage.aspx & Default.aspx page

MasterPage.aspx

<head runat="server">
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../styles/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="../styles/english_css.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<!-- Master Page -->
<div>
<!-- Container -->
    <div class="container">
<!-- Header -->
        <div class="row-fluid">
            <div class="span12">
                <div class="header-row1">
                </div>
            </div>
         </div>
<!-- Header -->
        <div class="row-fluid">
            <div class="span12">
            <!-- Content  -->
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>
            <!-- Content -->
            </div>
        </div>
<!-- Footer -->
        <div class="row-fluid"><div class="span12"><h1>Footer Section</h1></div></div>
<!-- Footer -->
      </div>
 <!-- Container -->
</div>
<!-- Master Page -->
</form>
<script type="text/javascript"  src='<%# ResolveUrl ("~/script/jquery-1.10.2.min.js") %>'></script>
<script type="text/javascript"  src='<%# ResolveUrl ("~/script/bootstrap.min.js") %>'></script>
</body>
</html>

Default.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/en/SiteMasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="row-fluid"><div class="span12"><h1>Content Area</h1></div></div>
</asp:Content>

I am actually looking for a asp.net web-form template like one as show in image.

enter image description here

I am just a beginner for bootstrap & hopeful of learning it. I would appreciate if some can help me out in why this is not working.

In example they are just using bootstrap.css for the example & it seem sto work for them. For me it works when i use bootstrap-responsive.css but adds width of 1200px while i want 1000px.

What is different between thos css files.

Help in this regard is appreciated.

UPDATE: I had to add both version of bootstrap.css in case i am using v2 otherwise i can use only `bootstrap. Problem now i have is that i want to have width of main container at 1000px. How can i change it

omma2289 · Answer 1 · 2013-08-14T16:20:40.773

3

Bootstrap 2 offers two options, you can download all CSS compiled in a single file from the customize section, otherwise the responsive components are placed in the separate file bootstrap-responsive.css

To override the container's width you need to add this to your CSS:

@media (min-width: 1200px){
    .container, 
    .navbar-static-top .container, 
    .navbar-fixed-top .container, 
    .navbar-fixed-bottom .container {
        width: 1000px;
    }
}

edited Aug 14 '13 at 16:20

answered Aug 14 '13 at 06:59

omma2289

54,161
8
64
68

+1, They are actually baking the responsive functionality into the core for Version 3, which is currently available. If you are still early in the project, I would highly recommend making the switch to Version 3. It adds a lot of functionality in terms of design of the grid on mobile devices. – joshrathke Aug 14 '13 at 07:22
I have just started on design today & though of using v3 first but of the v3 details page it talks about issues with IE & we might need to use ` respond.js` & other compatibility issue with windows phone . so that put me on a back-foot from using V3, You seems to be using bootstrap for some time. do you still recommend using v3 – Learning Aug 14 '13 at 07:27
@KnowledgeSeeker look at new [grid system](http://getbootstrap.com/css/#grid) and decide if that kind of functionality is something you actually need for your project, if you just want your site to "look right" on mobile then Bootstrap 2 will work fine, but if you want to actually customize and adequate your design for mobile then I would recommend using v3 for the flexibility it offers – omma2289 Aug 14 '13 at 16:22

Bootstrap framework not responsive for asp.net webform

1 Answers1

Linked