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

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

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

4. Select the project type empty.

Step 2 – Install bootstrap package from NuGet Package

Right click the solution and select Manage NuGet packages for the solution.
In the Manage NuGet screen, select online Packages section.
Type bootstrap in the search box then you find the latest bootstrap package.
Now you click the 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

blog

ASP.NET MVC 4 Bootstrap 3.3.2 in 2 Steps

Description:

HTML Code:

Anonymous User

Leave Comment

Comments

Liked By