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:

<!DOCTYPEhtml>
 
<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <title>@ViewBag.Title</title>
    <linkhref="~/Content/bootstrap.min.css"rel="stylesheet"/>
    <linkhref="~/Content/bootstrap-theme.min.css"rel="stylesheet"/>
</head>
<body>
    <navclass="navbar navbar-default">
        <divclass="container-fluid">
            <divclass="navbar-header">
                <buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1">
                    <spanclass="sr-only">Toggle navigation</span>
                    <spanclass="icon-bar"></span>
                    <spanclass="icon-bar"></span>
                    <spanclass="icon-bar"></span>
                </button>
                <aclass="navbar-brand"href="#">Brand</a>
            </div>
            <divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1">
                <ulclass="nav navbar-nav">
                    <liclass="active"><ahref="#">Link <spanclass="sr-only">(current)</span></a></li>
                    <li><ahref="#">Link</a></li>
                    <liclass="dropdown">
                        <ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-expanded="false">Dropdown <spanclass="caret"></span></a>
                        <ulclass="dropdown-menu"role="menu">
                            <li><ahref="#">Action</a></li>
                            <li><ahref="#">Another action</a></li>
                            <li><ahref="#">Something else here</a></li>
                            <liclass="divider"></li>
                            <li><ahref="#">Separated link</a></li>
                            <liclass="divider"></li>
                            <li><ahref="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <formclass="navbar-form navbar-left"role="search">
                    <divclass="form-group">
                        <inputtype="text"class="form-control"placeholder="Search">
                    </div>
                    <buttontype="submit"class="btn btn-default">Submit</button>
                </form>
                <ulclass="nav navbar-nav navbar-right">
                    <li><ahref="#">Link</a></li>
                    <liclass="dropdown">
                        <ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-expanded="false">Dropdown <spanclass="caret"></span></a>
                        <ulclass="dropdown-menu"role="menu">
                            <li><ahref="#">Action</a></li>
                            <li><ahref="#">Another action</a></li>
                            <li><ahref="#">Something else here</a></li>
                            <liclass="divider"></li>
                            <li><ahref="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <divclass="container">
        <divclass="row">
            <divclass="col-md-4 well">&nbsp;</div>
            <divclass="col-md-4 well">&nbsp;</div>
            <divclass="col-md-4 well">&nbsp;</div>
        </div>
        <divclass="row">
            <divclass="col-md-7 well">&nbsp;</div>
            <divclass="col-md-3 well">&nbsp;</div>
        </div>
        <divclass="row">
            <divclass="col-md-2 well">&nbsp;</div>
            <divclass="col-md-8 well">&nbsp;</div>
            <divclass="col-md-2 well">&nbsp;</div>
        </div>
        <divclass="row">
            <divclass="col-md-3 well">&nbsp;</div>
            <divclass="col-md-4 well">&nbsp;</div>
            <divclass="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