Bootstrap 3


Web page by Kevin Harris of Homer IL

Please contact Kevin Harris of Homer IL concerning this web site

"Starting with version 3.0, Bootstrap adopted a mobile first design philosophy, emphasizing responsive design by default."

The information from the Wildermuth, Allen, and Sheriff courses was used together to make the website which is an ASP.NET Web Forms site using Bootstrap 3.3.7.

Introduction to Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap is an open-source front end framework originally developed by Mark Otto and Jacob Thornton at Twitter. Bootstrap is the most-starred project on GitHub, with over 90K stars and more than 38K forks. Bootstrap 2 was released in 2012 with support for responsive design. Bootstrap 3 was released in 2013 moving to a mobile first approach. The first alpha version of Bootstrap 4 was released in late 2015. Bootstrap has CSS and HTML template for themes and interface components.

Bootstrap is not tied to any frameworks. It is used with .Net, Ruby on Rails, Python, etc. Bootstrap is modular and you can choose which modules you want and build custom versions of Bootstrap. Bootstrap contains most of the components typically required by websites. It contains jQuery plugins for many components and effects (e.g. alert, dropdowns, modals, carousel, tooltips, etc.). However it may need to be enhanced with external jQuery plugins (e.g. jQueryUI) for advanced components (e.g. auto-completion). Bootstrap uses normalize.css for cross-browser rendering.

Bootstrap can be downloaded from Get Bootstrap. It can be obtained in various forms. All that is needed to get a full version in the project is the "dist" folder which contains the CSS, fonts, and JS folders which are put into your project and linked to your web pages. You can also obtain a version which includes the source code, including the less files which generate the CSS and various other components. You can also selectively create a version of Bootstrap to download which only includes the features you wish to use, such as only including the grid layout but not the other components. The JavaScript in Bootstrap has a dependency on jQuery, so this will also need to be linked in before the bootstrap .js file. Typically you would link in the "bootstrap.min.css" and "site.css" (which contain your overrides or enhancements to the Bootstrap CSS), and possibly bootstrap-theme.min.cs for customized Bootstrap themes. Also jQuery, then bootstrap.min.js would also be linked into your page. Sometimes these are linked into the "Master Page" or "Layout Page" so they are available to all other pages which use these templates which overlay your individual content pages.

Grid Layout

The screen layout in Bootstrap is based on 12 grid units making up a logical row. A screen can be set up with any combination of column units that add up to 12 per row. For example if you wish to have 3 screen columns, you might set it ups as (.col-xx.4 + .col-xx.4 + .col-xx.4) or (.col-xx.3 + .col-xx.6 + .col-xx.3). The columns response by floating left when the screen is resized. Bootstrap contains classes which control the appearance of the HTML elements. Common abbreviations are used in classes. For sizing, it uses xs, sm, md, lg. Color elements may contain: active success, primary, warning, and danger. The responsive size levels used by Bootstrap are:

  • Grid type for screen size:
  • > .col-lg-xx: >= 1200px
  • > .col-md-xx: >= 992px
  • > .col-sm-xx: >= 768px
  • > .col-xs-xx:




Glyphicons and font images can be inserted into buttons or other elements.


Bootswatch Provides Free Themes

Bootstrap allows the look of websites to be easily changed with themes. The Bootswatch site contains several free themes which can be downloaded into your MVC project. The site also has a sandbox link to JS Fiddle where you can view the results of custom themes as you create them. There as also several sites which sell custom themes for Bootstrap, such as {wrap}bootstrap.

Using Bootstrap in MVC

I purchased the MetroMan theme from for $4, downloaded the theme zip file, and unzipped the file. Clicking on the index.html file runs the website with the MetroMan theme. To integrate the MetroMan theme into my MVC 5.2.3 project, I did the following.

  1. Moved the MetroMan HTML into the .cshtml file. First move the page header and footer, from index.html into _Layout.cshtml.
  2. Remove all the contents from _Layout.cshtml.

  3. Remove all the contents from \home\Index.cshtml except for the top three lines containing ViewBag.Title.

  4. Copy from index.html, the top 183 lines (down to where "Header ends" into _Layout.cshtml.

  5. Add @RenderBody() after the lines just copied into _Layout.cshtml.

  6. Copy from index.html, after the @RenderBody(), the footer (line number 793) down to the end of the file into _Layout.cshtml.

  7. From the theme js folder, copy all the JavaScript files (except for jquery.js, bootstrap.js, bootstrap.min.js), and paste into the Scripts folder of the project (did replace respond.js).

  8. Inside the project's Content folder create a new folder called Templates. From the MetroMan code, copy the assets, css, fonts, and img folders into the new Templates folder in the project.

  9. In _Layout.cshtml, change the reference to the css folder just copied. Replace "css/ with "~/Content/Templates/css/ (8 occurrences).

  10. In _Layout.cshtml, change the reference to the JavaScript files. Replace "js/ with "~/Scripts/ (14 occurrences). Note in code had to replace jquery.js with jquery-2.1.4 to match file in project.

  11. In _Layout.cshtml, change the reference to the home page. Replace index.html with ~/Home/Index (4 occurrences).

  12. In _Layout.cshtml, change the title and other references to MetroMan.

  13. In Index.cshtml, copy the body from index.html. That is all content between the header and the footer (lines 185 - 791).

  14. In Index.cshtml, change the reference to the img folder just copied. Replace "img/ with "~/Content/Templates/img/ (15 occurrences).

  15. In _Layout.cshtml, find "Main navigation" (line 105) and update the links to support desired pages. That is, change the "page.html" reference to "~/Home/Page".

  16. In Home controller, add UnderConstruction action method.

        public class HomeController : Controller
            public ActionResult UnderConstruction()
                return View();

  17. In Home controller, right-click on UnderConstruction text in action method and select add, View, Empty controller. The UnderConstruction.cshtml view is created in the Views/Home folder.

  18. Find Underconstruction image and move to project. Then in UnderConstruction.cshtml view, add img tag with src="~/Content/Templates/imgsrc="~/Content/Templates/img/site_under_construction.gif" alt="Under Construction"

  19. Individual Pages - find the pages you wish to keep and copy the middle contents to inidividual .cshtml pages. Create new pages using exist pages as examples and templates.

Font Awesome

.Font Awesome

Bootstrap uses Font Awesome to provide scalable vector icons. Font Awesome include over 600 scalable graphics that scale well and require no JavaScript. Font-Awesome can be included as a .css file in the _Layout.cshtml view, or it can be delivered through a CDN. Awesome fonts can be inserted with the i tag: <i> tag

    <!-- Font awesome CSS -->
    <link href="~/Content/Templates/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="">