Home > DeveloperSection > Blogs > ASP.NET MVC 4 Bootstrap 3.3.2 in 2 Steps

ASP.NET MVC 4 Bootstrap 3.3.2 in 2 Steps


Bootstrap Bootstrap  Bootstrap Framework 
Ratings:
0 Comment(s)
 1512  View(s)
Rate this:

ASP.NET MVC 4 Bootstrap 3.3.2 in 2 Steps

Hi everyone in this blog I’m explaining about getting start bootstrap step by step with MVC 4.

Description:

In this article, I am writing the step by step instruction on creating your first Twitter Bootstrap with ASP.NET MVC 4 web application. I will guide you through and create Responsive Web Design using Bootstrap.

Step 1 - Create ASP.NET MVC Web Application

  1. Open Visual Studio 2012 and create a new project of type ASP.NET MVC Web Application.
  2. On this project I create a solution called MVCBootstrap.

3.       Press OK, and a new window will appear with several options of template to use on our project.

4.       Select the project type empty.

Step 2 – Install bootstrap package from Nuget Package

  1. Right click the solution and select Manage NuGet packages for solution.
  2. In the Manage NuGet screen, select online Packages section.
  3. Type bootstrap in search box then you find latest bootstrap package.
  4. Now you click install button.

 

Now your project is ready to use with bootstrap.

Now you can add view or layout page and link bootstrap css file in your view or layout page.

Now you can use bootstrap class and template.

HTML Code:

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

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

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

</head>

<body>

    <nav class="navbar navbar-default">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                    <span class="sr-only">Toggle navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand" href="#">Brand</a>

            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">

                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

                    <li><a href="#">Link</a></li>

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li><a href="#">Action</a></li>

                            <li><a href="#">Another action</a></li>

                            <li><a href="#">Something else here</a></li>

                            <li class="divider"></li>

                            <li><a href="#">Separated link</a></li>

                            <li class="divider"></li>

                            <li><a href="#">One more separated link</a></li>

                        </ul>

                    </li>

                </ul>

                <form class="navbar-form navbar-left" role="search">

                    <div class="form-group">

                        <input type="text" class="form-control" placeholder="Search">

                    </div>

                    <button type="submit" class="btn btn-default">Submit</button>

                </form>

                <ul class="nav navbar-nav navbar-right">

                    <li><a href="#">Link</a></li>

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li><a href="#">Action</a></li>

                            <li><a href="#">Another action</a></li>

                            <li><a href="#">Something else here</a></li>

                            <li class="divider"></li>

                            <li><a href="#">Separated link</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

        </div>

    </nav>

    <div class="container">

        <div class="row">

            <div class="col-md-4 well">&nbsp;</div>

            <div class="col-md-4 well">&nbsp;</div>

            <div class="col-md-4 well">&nbsp;</div>

        </div>

        <div class="row">

            <div class="col-md-7 well">&nbsp;</div>

            <div class="col-md-3 well">&nbsp;</div>

        </div>

        <div class="row">

            <div class="col-md-2 well">&nbsp;</div>

            <div class="col-md-8 well">&nbsp;</div>

            <div class="col-md-2 well">&nbsp;</div>

        </div>

        <div class="row">

            <div class="col-md-3 well">&nbsp;</div>

            <div class="col-md-4 well">&nbsp;</div>

            <div class="col-md-5 well">&nbsp;</div>

        </div>

        @RenderBody()

    </div>

</body>

</html>

 

in my next post i'll explain about Bootstrap ScrollSpy, Miscellaneous and Breadcrumbs


Don't want to miss updates? Please click the below button!

Follow MindStick