"
ASP.NET (snapshot 2017) Microsoft documentation and samples

Building beautiful, responsive sites with Bootstrap

By Steve Smith

Bootstrap is currently the most popular web framework for developing responsive web applications. It offers a number of features and benefits that can improve your users’ experience with your web site, whether you’re a novice at front-end design and development or an expert. Bootstrap is deployed as a set of CSS and JavaScript files, and is designed to help your website or application scale efficiently from phones to tablets to desktops.

Getting started

There are several ways to get started with Bootstrap. If you’re starting a new web application in Visual Studio, you can choose the default starter template for ASP.NET Core, in which case Bootstrap will come pre-installed:

Bootstrap in starter template solution view
Bootstrap in starter template solution view

Adding Bootstrap to an ASP.NET Core project is simply a matter of adding it to bower.json as a dependency:

[!code-jsonMain]

   1:  {
   2:    "name": "asp.net",
   3:    "private": true,
   4:    "dependencies": {
   5:      "bootstrap": "3.3.6",
   6:      "jquery": "2.2.0",
   7:      "jquery-validation": "1.14.0",
   8:      "jquery-validation-unobtrusive": "3.2.6"
   9:    }
  10:  }

This is the recommended way to add Bootstrap to an ASP.NET Core project.

You can also install bootstrap using one of several package managers, such as Bower, npm, or NuGet. In each case, the process is essentially the same:

Bower

bower install bootstrap

npm

npm install bootstrap

NuGet

Install-Package bootstrap

[!NOTE] The recommended way to install client-side dependencies like Bootstrap in ASP.NET Core is via Bower (using bower.json, as shown above). The use of npm/NuGet are shown to demonstrate how easily Bootstrap can be added to other kinds of web applications, including earlier versions of ASP.NET.

If you’re referencing your own local versions of Bootstrap, you’ll need to reference them in any pages that will use it. In production you should reference bootstrap using a CDN. In the default ASP.NET site template, the *_Layout.cshtml* file does so like this:

[!code-htmlMain]

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8" />
   5:      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   6:      <title>@ViewData["Title"] - WebApplication1</title>
   7:   
   8:      <environment names="Development">
   9:          <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
  10:          <link rel="stylesheet" href="~/css/site.css" />
  11:      </environment>
  12:      <environment names="Staging,Production">
  13:          <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
  14:                asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
  15:                asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
  16:          <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
  17:      </environment>
  18:  </head>
  19:  <body>
  20:      <div class="navbar navbar-inverse navbar-fixed-top">
  21:          <div class="container">
  22:              <div class="navbar-header">
  23:                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  24:                      <span class="sr-only">Toggle navigation</span>
  25:                      <span class="icon-bar"></span>
  26:                      <span class="icon-bar"></span>
  27:                      <span class="icon-bar"></span>
  28:                  </button>
  29:                  <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication1</a>
  30:              </div>
  31:              <div class="navbar-collapse collapse">
  32:                  <ul class="nav navbar-nav">
  33:                      <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
  34:                      <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
  35:                      <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
  36:                  </ul>
  37:                  @await Html.PartialAsync("_LoginPartial")
  38:              </div>
  39:          </div>
  40:      </div>
  41:      <div class="container body-content">
  42:          @RenderBody()
  43:          <hr />
  44:          <footer>
  45:              <p>&copy; 2016 - WebApplication1</p>
  46:          </footer>
  47:      </div>
  48:   
  49:      <environment names="Development">
  50:          <script src="~/lib/jquery/dist/jquery.js"></script>
  51:          <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
  52:          <script src="~/js/site.js" asp-append-version="true"></script>
  53:      </environment>
  54:      <environment names="Staging,Production">
  55:          <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
  56:                  asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
  57:                  asp-fallback-test="window.jQuery">
  58:          </script>
  59:          <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
  60:                  asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
  61:                  asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
  62:          </script>
  63:          <script src="~/js/site.min.js" asp-append-version="true"></script>
  64:      </environment>
  65:   
  66:      @RenderSection("scripts", required: false)
  67:  </body>
  68:  </html>

[!NOTE] If you’re going to be using any of Bootstrap’s jQuery plugins, you will also need to reference jQuery.

Basic templates and features

The most basic Bootstrap template looks very much like the *_Layout.cshtml* file shown above, and simply includes a basic menu for navigation and a place to render the rest of the page.

Basic navigation

The default template uses a set of <div> elements to render a top navbar and the main body of the page. If you’re using HTML5, you can replace the first <div> tag with a <nav> tag to get the same effect, but with more precise semantics. Within this first <div> you can see there are several others. First, a <div> with a class of “container”, and then within that, two more <div> elements: “navbar-header” and “navbar-collapse”. The navbar-header div includes a button that will appear when the screen is below a certain minimum width, showing 3 horizontal lines (a so-called “hamburger icon”). The icon is rendered using pure HTML and CSS; no image is required. This is the code that displays the icon, with each of the tags rendering one of the white bars:

It also includes the application name, which appears in the top left. The main navigation menu is rendered by the <ul> element within the second div, and includes links to Home, About, and Contact. Additional links for Register and Login are added by the _LoginPartial line on line 29. Below the navigation, the main body of each page is rendered in another <div>, marked with the “container” and “body-content” classes. In the simple default _Layout file shown here, the contents of the page are rendered by the specific View associated with the page, and then a simple <footer> is added to the end of the <div> element. You can see how the built-in About page appears using this template:

about page
about page

The collapsed navbar, with “hamburger” button in the top right, appears when the window drops below a certain width:

about page with hamburger menu
about page with hamburger menu

Clicking the icon reveals the menu items in a vertical drawer that slides down from the top of the page:

about page with hamburger menu expanded
about page with hamburger menu expanded

Bootstrap sets up the site’s basic typography, colors, and link formatting in its CSS file. This CSS file includes default styles for tables, buttons, form elements, images, and more (learn more). One particularly useful feature is the grid layout system, covered next.

Grids

One of the most popular features of Bootstrap is its grid layout system. Modern web applications should avoid using the <table> tag for layout, instead restricting the use of this element to actual tabular data. Instead, columns and rows can be laid out using a series of <div> elements and the appropriate CSS classes. There are several advantages to this approach, including the ability to adjust the layout of grids to display vertically on narrow screens, such as on phones.

Bootstrap’s grid layout system is based on twelve columns. This number was chosen because it can be divided evenly into 1, 2, 3, or 4 columns, and column widths can vary to within 1/12th of the vertical width of the screen. To start using the grid layout system, you should begin with a container <div> and then add a row <div>, as shown here:

Next, add additional <div> elements for each column, and specify the number of columns that <div> should occupy (out of 12) as part of a CSS class starting with “col-md-”. For instance, if you want to simply have two columns of equal size, you would use a class of “col-md-6” for each one. In this case “md” is short for “medium” and refers to standard-sized desktop computer display sizes. There are four different options you can choose from, and each will be used for higher widths unless overridden (so if you want the layout to be fixed regardless of screen width, you can just specify xs classes).

CSS Class Prefix Device Tier Width
col-xs- Phones < 768px
col-sm- Tablets >= 768px
col-md- Desktops >= 992px
col-lg- Larger Desktop Displays >= 1200px

When specifying two columns both with “col-md-6” the resulting layout will be two columns at desktop resolutions, but these two columns will stack vertically when rendered on smaller devices (or a narrower browser window on a desktop), allowing users to easily view content without the need to scroll horizontally.

Bootstrap will always default to a single-column layout, so you only need to specify columns when you want more than one column. The only time you would want to explicitly specify that a <div> take up all 12 columns would be to override the behavior of a larger device tier. When specifying multiple device tier classes, you may need to reset the column rendering at certain points. Adding a clearfix div that is only visible within a certain viewport can achieve this, as shown here:

narrow and wide viewport grid
narrow and wide viewport grid

In the above example, One and Two share a row in the “md” layout, while Two and Three share a row in the “xs” layout. Without the clearfix <div>, Two and Three are not shown correctly in the “xs” view (note that only One, Four, and Five are shown):

grid without using clearfix
grid without using clearfix

In this example, only a single row <div> was used, and Bootstrap still mostly did the right thing with regard to the layout and stacking of the columns. Typically, you should specify a row <div> for each horizontal row your layout requires, and of course you can nest Bootstrap grids within one another. When you do, each nested grid will occupy 100% of the width of the element in which it is placed, which can then be subdivided using column classes.

Jumbotron

If you’ve used the default ASP.NET MVC templates in Visual Studio 2012 or 2013, you’ve probably seen the Jumbotron in action. It refers to a large full-width section of a page that can be used to display a large background image, a call to action, a rotator, or similar elements. To add a jumbotron to a page, simply add a <div> and give it a class of “jumbotron”, then place a container <div> inside and add your content. We can easily adjust the standard About page to use a jumbotron for the main headings it displays:

jumbotron example
jumbotron example

Buttons

The default button classes and their colors are shown in the figure below.

themed buttons
themed buttons

Badges

Badges refer to small, usually numeric callouts next to a navigation item. They can indicate a number of messages or notifications waiting, or the presence of updates. Specifying such badges is as simple as adding a containing the text, with a class of “badge”:

themed badges
themed badges

Alerts

You may need to display some kind of notification, alert, or error message to your application’s users. That’s where the standard alert classes are useful. There are four different severity levels with associated color schemes:

themed alerts
themed alerts
Our layout already includes a standard navbar, but the Bootstrap theme supports additional styling options. We can also easily opt to display the navbar vertically rather than horizontally if that’s preferred, as well as adding sub-navigation items in flyout menus. Simple navigation menus, like tab strips, are built on top of