“Good design is obvious. Great design is transparent.” — How we use Bootstrap to add responsiveness to our apps

The term ‘Responsive Design’ (or anything related to design for that matter) at first may seem like a
push-over for most programmers!! CSS guru on-call!! But since the last few applications we wrote
we leveraged Bootstrap and made the PSD files provided by the designer responsive without a CSS
guru.
OK! What is responsive design?!? It is an approach aimed at crafting sites to provide an optimal
viewing experience irrespective of the device … whether the web page is projected on a 110-inch
screen for a trade-showor a 10″ tablet or even a smartphone with smaller screen size.
Move over designer … Welcome Bootstrap !! (no hard feelings to any designer … since we must
absolutely and completely co-exist for any modern application – but the point here is to have less
dependence on a designers’ eyes. )
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile
first’s projects on the web. It has featured to tackle every aspects of responsive design and able to
handle almost all controls that are used in modern we development technology. It has plug and play
functionality and with very little knowledge of HTML and Web designing you can meet the goal of
developing responsive application. The image below shows the versatility of the framework.

To use it in your environment you need three scripts to be included in your master HTML page or the
specific page you are looking to implement the responsiveness.
1. <!– Latest compiled and minified CSS –
><linkrel=”stylesheet”href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.c
ss”>
2. <!– Optional theme –
><linkrel=”stylesheet”href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-
theme.min.css”>
3. <!– Latest compiled and minified JavaScript –> <script
src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”></script>
Bootstrap directory structure

It supports almost all modern browsers and below is the extensive support of Bootstrap with some
common browsers as per their documentation … you can find more here –
(http://getbootstrap.com/getting-started/)
I’m outlining our usage of the framework: We are working on an MVC 5 application to be deployed
in MS Azure platform the code for the page “_Layout.cshtml” is outlined below.
Features of Bootstrap is handled with a predefined class which you can call as per requirement and
use it with ease.
<!DOCTYPE html>

<html class=””>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>@ViewBag.Title – mGuard</title>
<link href=”~/Styles/ControlsStyle.css” rel=”stylesheet” />
@Styles.Render(“~/Content/css”)
@Scripts.Render(“~/bundles/modernizr”)
</head>
<body>
@*To Use Nav Bar*@
<div class=”navbar navbar-inverse navbar-fixed-top”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse”data-target=”.navbar-collapse”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>Brand</a>
</div>
<div class=”navbar-collapse collapse”>
@if (Request.IsAuthenticated)

{
<ul class=”nav navbar-nav”>
@*To call Dropdown Feature with link buttons and its items*@
<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”role=”button” aria-
expanded=”false”>Setup <b class=”caret”></b></a>
<ul class=”dropdown-menu” role=”menu”>
<li>@Html.ActionLink(“Customer”, “Create”, “Customer”)</li>
<li>@Html.ActionLink(“Users”, “Index”, “Home”)</li>
<li>@Html.ActionLink(“Category”, “Index”, “Home”)</li>
<li>@Html.ActionLink(“Status”, “Index”, “Home”)</li>
<li>@Html.ActionLink(“Priority”, “Index”, “Home”)</li>
</ul>
</li>
<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”role=”button” aria-
expanded=”false”>User <b class=”caret”></b></a>
<ul class=”dropdown-menu” role=”menu”>
<li>@Html.ActionLink(“Login”, “Index”, “Home”)</li>
<li>@Html.ActionLink(“Forget Password”, “Index”, “Home”)</li>
<li>@Html.ActionLink(“Reset Password”, “Index”, “Home”)</li>
<li>@Html.ActionLink(“Sign Up”, “Index”, “Home”)</li>
<li>@Html.ActionLink(“Confirm Registration”, “Index”,”Home”)</li>
</ul>
</li>
<li>@Html.ActionLink(“Create Issue”, “Index”, “Home”)</li>

<li>@Html.ActionLink(“Dashboard”, “Index”, “Home”)</li>
<li>@Html.ActionLink(“Reports”, “Index”, “Home”)</li>
<li>@Html.ActionLink(“About”, “About”, “Home”)</li>
</ul>
}
@Html.Partial(“_LoginPartial”)
</div>
</div>
</div>
<div class=”container body-content”>
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year – Medullus Systems, LLC</p>
</footer>
</div>
@Scripts.Render(“~/bundles/jquery”)
@Scripts.Render(“~/bundles/bootstrap”)
@RenderSection(“scripts”, required: false)
</body>
</html>

When viewed on our screen in the lab
When I pull it up on my cell.

For the purposes of simplicity we have outlined a basic example of our Boot Strap initiative. There is
a lot that you can accomplish with Bootstrap. Given the traction gained by the Framework, there are
various add-ons and the development community is vibrant and ‘responsive’ too (no pun intended!). I
would recommend you to try out their playground — (http://www.bootply.com/new).
Given the ease of use and the hassle-free adaption ‘Bootstrapping’ has become a must in most (if
not all) web-apps. And if you are in a rush to make you application Live then using this framework
can buy you time to develop that fancy app!!

“Good design is obvious. Great design is transparent.” — How we use Bootstrap to add responsiveness to our apps

More Related Content

What's hot (20)

Similar to “Good design is obvious. Great design is transparent.” — How we use Bootstrap to add responsiveness to our apps (20)

Recently uploaded (20)

“Good design is obvious. Great design is transparent.” — How we use Bootstrap to add responsiveness to our apps