Using Twitter Bootstrap with MVC 4 (ASP.NET MVC)

Brief Description:

  • Free open source collection of tools for creating websites and web applications.
  • Open source since August 2011.
  • Contains HTML and CSS based design templates
  • Relatively incomplete support for HTML5 and CSS3 but
  • It’s compatible with all major browsers 
  • It is the most popular project in GitHub. February 2012
  • Responsive Design: Adjust size dynamically (since version 2.0)

Download the twitter boot strap here http://twitter.github.io/bootstrap/

The file bootstrap.zip contains 3 folders: css, img, js

css folder (4 files):
bootstrap
bootstrap-min
bootstrap-responsive
bootstrap-responsive-min

img folder (2 files):
glyphicons-halflings-white.png
glyphicons-halflings.png

js folder (2 files):
bootstrap.js
bootstrap.min.js

How to include bootstrap in MVC project.

You need to create folders for  css, img and js. Then copy the corresponding files from bootstrap.zip
It should look like this:

Content
   bootstrap
     css
        bootstrap
        bootstrap-min
        bootstrap-responsive
        bootstrap-responsive-min
     img
        glyphicons-halflings-white.png
        glyphicons-halflings.png
Scripts
   bootstrap
     bootstrap.js
     bootstrap.min.js

Here is a picture:

project

In the file Views\Shared\_Layout.cshtml add these lines:

After <link href=”~/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />

<link href="~/Content/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

and after the line @Scripts.Render(“~/bundles/jquery”)

<script src="~/Scripts/bootstrap/bootstrap.min.js"></script>

Complete code listing (Added code is between comments @*Twitter Bootstrap *@)

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>@ViewBag.Title - My ASP.NET MVC Application</title>
      <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

      @*Twitter Bootstrap {*@
      <link href="~/Content/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
      <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
      @*Twitter Bootstrap }*@

      <meta name="viewport" content="width=device-width" />
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
   </head>
   <body>
      <header>
         <div class="content-wrapper">
            <div class="float-left">
               <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
               <section id="login">
                  @Html.Partial("_LoginPartial")
               </section>
               <nav>
                  <ul id="menu">
                     <li>@Html.ActionLink("Home", "Index", "Home")</li>
                     <li>@Html.ActionLink("About", "About", "Home")</li>
                     <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                  </ul>
               </nav>
            </div>
         </div>
      </header>
      <div id="body">
         @RenderSection("featured", required: false)
         <section class="content-wrapper main-content clear-fix">
            @RenderBody()
         </section>
      </div>
      <footer>
         <div class="content-wrapper">
            <div class="float-left">
               <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
         </div>
      </footer>

      @Scripts.Render("~/bundles/jquery")

      @*Twitter Bootstrap {*@
      <script src="~/Scripts/bootstrap/bootstrap.min.js"></script>
      @*Twitter Bootstrap }*@

      @RenderSection("scripts", required: false)
   </body>
</html>

That’s it. You can now use the bootstrap like this

<!DOCTYPE html>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="~/Content/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"/>

<div class="container">
   <div class="row">
      <div class="span5">5 Units wide</div>
      <div class="span4">4 Units wide</div>
      <div class="span3">3 units wide</div>
   </div>
</div>
@* it must sum like 12 units *@
Advertisements
This entry was posted in MVC and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s