Show Bootstrap Image Using ASP.NET MVC

Introduction

Bootstrap is a free, open-source UI framework developed by Twitter to create responsive Web Applications.

It includes HTML and CSS based design templates along with the optional JavaScript extensions.

Bootstrap can be used with any server side technology and any platform. You can use it with any web application built with any server side technology like ASP.NET, JAVA, PHP etc.

Description

It helps us to create responsive Web Applications faster and easier. A responsive Web Application automatically adapts to the different screen sizes (i.e. desktop computers, laptops, tablets, mobile phones etc.) i.e easy reading and navigation with a minimum of resizing, panning and scrolling across a wide range of devices. It is a multiplatform support interface.

As Bootstrap is the most popular framework, it has a very large community base and excellent documentation.

Steps

To get started with Bootstrap, the first step is to download Bootstrap from http://getbootstrap.com.
This Website also has all the documentation, which you need to get started with Bootstrap.

Unzip the ZIP folder and you should see the folder structure given below. Notice there are 3 sub-folders (css, fonts & js).

Let us understand the use of each file, folder by folder.

CSS part description

bootstrap.css
This is the core CSS for BootStrap, which defines all the style for the various controls and the components.

bootstrap.css.map
When debugging the minified code, the line numbers do not refer to the orignal files. The file that has the .map extension, which is also called as source map file fixes this problem by allowing the Web debuggers to refer to the original context from where the code was generated. This file is useful during the development.

bootstrap.min.css
This is the compressed version, which means all the whitespaces, line breaks and any other extra characters, which have been removed. As a result, the size of the minified file is smaller than the non-minified file. Minified version is usually used on a production Server for an efficient download, whereas the non minified version is used in the development environment, as it is more readable and easy to debug, if there are issues.

bootstrap.min.css.map
Source map file for bootstrap.min.css

bootstrap-theme.css
As the name suggests, this is the theme for bootstrap. Adding the core bootstrap.css is enough for Bootstrap to work. The theme file is optional and is usually used for a visually enhanced experience. For example, if you want 3D effects, gradients, shadows etc.

bootstrap-theme.css.map
Source map file for bootstrap-theme.css

bootstrap-theme.min.css
Minified version of bootstrap-theme.css

bootstrap-theme.min.css.map
Source map file for bootstrap-theme.min.css

Font part description

There are 5 different font files from Glyphicons. These 5 different files are just different formats of the Glyphicon font to support different Browsers.

JS part description

These JavaScript files are optional.

These are required, if you want to use Bootstrap widgets like picture carousel, dropdown menus, collapsible accordian etc. One important thing to keep in mind is that Boostrap JavaScript has a dependency on jQuery, so a reference to jQuery must also exist on the page, where you want to use Bootstrap.

bootstrap.js
This is the non-minified readable version, which is usually used during the development.

bootstrap.min.js
Minified version of bootstrap.js is optimized for the faster download. This is the version, which is usually used in a production environment.

npm.js
npm is a file from Node.js and is used for npm installing Bootstrap. If you are new to Node.js, don't worry, as this is not going to come in the way to understand Bootstrap.

Note

The viewport meta tag ensures proper rendering and touch zooming on a mobile device.

Step 1

Create a MVC Application named SatyaMVCBootstrapImages.

Step 2

Add the downloaded Bootstrap folder from site mentioned above.

Step 3

Add 4 images in an Images folder. You have to add this new nolder in the project.

Step 4

Add a controller named HomeController.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SatyaMVCBootstrapImages.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
}

Step 5

Add a view named Index.cshtml.

@{
ViewBag.Title = "Satyaprakash Bootstrap Image Show";
}
<title>@ViewBag.Title</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div>
<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash Bootstrap Image Show</h2>
<fieldset>
<legend style="color:orangered">Company Logo Show In Multiple Platform</legend>
<div class="col-lg-3 col-md-4 col-sm-6">
<a href="Images/2.png" class="thumbnail">
<p>C# Corner</p>
<img src="Images/2.png"/>
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<a href="Images/4.png" class="thumbnail">
<p>Google</p>
<img src="Images/4.png"/>
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<a href="Images/5.png" class="thumbnail">
<p>Microsoft</p>
<img src="Images/5.png" />
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<a href="Images/6.jpg" class="thumbnail">
<p>Google</p>
<img src="Images/6.jpg"/>
</a>
</div>
</fieldset>
</div>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
©
<script> document.write(new Date().toDateString()); </script>
</p>
</footer>

Description

Here, I added Bootstrap CSS file to make an effect on an image part.

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

Thus, with these 3 these grid classes in place, we get 4 equal columns on a medium device, 4 equal columns on a large device and 4 equal columns on a small device.

Output

Desktop View

Mobile View

Click an Image name linked to View in thumbnail format.

SUMMARY

What is Bootstrap In ASP.NET MVC?
How to get Bootstarp CSS, font and JS files.
How to apply in View part of ASP.NET MVC.
Check for multiplatform support regarding UI's purpose.

9 Comments

Join the conversation! Your thoughts help the community grow.

Brandon (Bool)7y ago
Added ~/ for the other images to get them to appear. in index.cshtml
- Satyaprakash Samantaray7y ago
  You can do it by using root path concept.
Tridip Bhattacharjee8y ago
One more thing i noticed that you did not mention the meaning of "col-lg-3 col-md-4 col-sm-6" so those who not familiar with bootstrap they may not understand the meaning of this "col-lg-3 col-md-4 col-sm-6" and this is doing actual things as per UI.
- Satyaprakash Samantaray8y ago
  Check other bootstrap article written by me
Tridip Bhattacharjee8y ago
This i got from your code <div class="col-lg-3 col-md-4 col-sm-6"> you said to show 6 images in a row for small screen means for mobile but as per your screen shot one image is showing in row for mobile...why?
- Satyaprakash Samantaray7y ago
  Scroll down the for mobile and read carefully my step-5 code description.
Manav Pandya9y ago
Nice one sir ...............
Saravanakumar Sekaran9y ago
Really amazing article !!!!!!!
- Satyaprakash Samantaray9y ago
  Thanks...............................