basic asp.net setup for twitter bootstrap

Question

I am trying to use twitter bootstrap with asp.net in visual studio 2010 ultimate. i cant find anything that explains how to set it up and why. everything i try doesn't quite work. Most articles are for MVC and im still new to asp.net so i want to start with the basics before i try mvc.

The closest i have got is to get the styles to work, but the javascript doesnt seem to work no matter what example i try. here is the closest i have got. its a mash up of the modal example snippet on the bootstrap website and a few blogs i found about using bootstrap with mvc.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication6.WebForm3" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" href="~/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/bootstrap-responsive.min.css" />


</head>
<body>
    <script type="text/javascript" src="~/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/js/jquery-1.8.2.min.js"></script>
    <form id="form1" runat="server">

        <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

        <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
            </div>
            <div class="modal-body">
            <p>One fine body…</p>
            </div>
            <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
            </div>
            @RenderBody()
        </div>
    </form>
</body>
</html>

The files are all in the locations at the links. im starting to think i need to install some prerequisites or something. The @RenderBody() shows up as text.

i cannot find any examples that work. Any help would be greatly appreciated as ive started going round in circles

i would HIGHLY recommend going with MVC instead. i understand you say that you want to learn the basics, but it's a misconception thinking that asp.net is a simpler version of MVC. They're completely different. While MVC might be a bit more difficult, the knowledge you pick up from learning asp.net will be very little help when moving to MVC. While microsoft doesn't want to call it that (so that the people using asp.net webforms won't feel left behind), MVC is absolutely a replacement for asp.net webforms. — Phil, Oct 30 '12 at 05:05
Hi Thanks for the advice. i do intend on learning mvc very soon as ultimately i just looking to bring my skills up to date and not learning mvc would be silly. i already have some knowlege of asp.net that will get me up to speed very quickly. from there i intend to learn mvc as well as well as doing the same thing with server side software in winforms (which again i have some experience) and then progressing to wpf. although mvc is replacing webforms, this has not happened yet and almost all employers expect both (failing that just web forms for now).any webforms advice would be a lot of help — Paul, Oct 30 '12 at 23:30
if you use NuGET package manager, there is a BootStrap MVC application in there, that should help you get started with layout etc. — kolin, Oct 31 '12 at 11:40

score 3 · Accepted Answer · answered Oct 31 '12 at 11:28

3

This is not an issue with asp.net, you simply need to move the jquery JS file before the bootstrap include.

it will help you greatly if you use a browser with a javascript console such as chrome, the error doesn't always tell you exactly what the problem is but it can help narrow things down.

answered Oct 31 '12 at 11:28

gezpage

441
4
11

1

agreed, get the scripts into the head, and load the jquery before anything else – kolin Oct 31 '12 at 11:43
@kolin Javascripts aren't always best placed in the head, [see some discussion here](http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-putting-just-before-the-body). But best practise says they should be at the bottom of the html or in the head, but not just outside of the head as above! – gezpage Oct 31 '12 at 13:59
Hi Thanks a lot Gez and everybody. changing the order of the javascript includes worked. The debug console is also a very good tip for any beginner. Thanks again Paul – Paul Oct 31 '12 at 19:14

basic asp.net setup for twitter bootstrap

1 Answers1