Bootstrap in Enterprise

Applications

Nikhil Chopra
Madhuri Lad
Agenda
Introduction
Problem Statement
Advantages
Getting Started with Bootstrap
Bootstrap Fundamentals
More about Bootstrap Grid System
Creating layouts in Enterprise Application using Bootstrap
Bootstrap Table Classes, Image Galley and Form Controls
Bootstrap Navbar, Panels and Pagination
Bootstrap And JavaScript
Advanced Bootstrap Concepts
Introduction

• Bootstrap is a free, open source and is the most popular HTML, CSS, and
JavaScript framework developed by Twitter for creating responsive web
applications.
• It includes HTML and CSS based design templates for common user
interface components like Buttons, Dropdowns, Tabs, Navigations, Models,
Accordion, Carousel, Tables etc.
• 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. 

1
What You Can Do With Bootstrap

• Create mobile first responsive websites.

• Quickly create multi-column layout with pre-defined classes.
• Quickly create different types of form layouts.
• Quickly create different variation of navigation bar.
• Create components like accordions, modals, etc. without writing any JS
code.
• Create carousel or image slider to showcase your content.
• Quickly create different types of alert boxes.

2
Advantages of Bootstrap

• Supports responsive design:

One of the greatest advantages of using
bootstrap is that it helps us create
responsive web applications faster and
easier. A responsive web application
automatically adapts to different screen
sizes. A responsive application provides
optimal viewing and interaction
experience i.e. easy reading and navigation
with a minimum of resizing, panning, and
scrolling across a wide range of devices. 

3
Advantages of Bootstrap

• Consistent design: All Bootstrap components share the same design templates
and styles through a central library, so the design and layout of your web pages
will be consistent. The end result is consistent regardless of who’s working on the
project and which web browser is being used. 

• Saves lots of time: You can save lots of time and efforts using the Bootstrap
predefined design templates and classes and concentrate on other development. 
Instead of writing code from the scratch, Bootstrap offers ready made
blocks of code that you can use and customize to suit your application
requirements.

4
Advantages of Bootstrap

• Compatible with Browsers: Bootstrap is created with modern web browsers in

mind and it is compatible with all modern browsers such as Chrome, Firefox,
Safari, Internet Explorer, etc. 

• Easy to Use: Bootstrap is very easy to use. Anybody with the basic working
knowledge of HTML, CSS and JavaScript can start development with Bootstrap.

• Open Source: And the best part is, it is completely free to download and use.

5
Get Started With Bootstrap

• To get started with Bootstrap the first step is

to download Bootstrap from 
http://getbootstrap.com. This website also has
all the documentation you need to get started
with bootstrap. Unzip the ZIP folder and you
should see the following folder structure.
Notice there are 2 sub-folders (CSS & JS).

6
Get Started With Bootstrap

Create first web page with Bootstrap

7
Bootstrap Fundamentals

Viewport
• The viewport is the user's visible area of a web page. This will ensure that your site has no
horizontal scroll – the full site will be visible, and users will not have to zoom on mobile to see the
content.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• A <meta> viewport element gives the browser instructions on how to control the page's
dimensions and scaling.

• The width=device-width part sets the width of the page to follow the screen-width of the
device (which will vary depending on the device).

• The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the
browser.

8
Bootstrap Fundamentals

Containers and Rows

• A container is a class that defines the page size based on the viewport width.   This is
typically applied to one div element which contains the entire contents of the page.  
• Rows may be placed within a .container (fixed-width) or .container-fluid (full-width)
for proper alignment and padding.
• Use rows (.row) to create horizontal groups of columns.
<body>
<div class="container">
<div class="row">Row 1</div>
<div class="row">Row 2</div>
</div>
</body>

9
Grid System
• Bootstrap grid system provides the quick and easy way to create responsive website
layouts for different types of devices like cell phones, tablets, laptops and desktops, etc.
• Bootstrap layouts are based on a 12-column grid.  We use CSS classes to specify the width
of each element. Each HTML element may take up to 12 columns of space. For example,
three equal columns would use three .col-xs-4.
• We can use the .col-xs-* class to create grid columns for extra small devices like cell
phones, similarly the .col-sm-* class for small screen devices like tablets, the .col-md-* class
for medium size devices like desktops and the .col-lg-* for large desktop screens.

10
Grid System

Basic Grid Structure

Following is basic structure of Bootstrap grid:

11
Grid System

• Columns create gutters (gaps between column content) via padding. That padding is
offset in rows for the first and last column via negative margin on .rows.
• If height of any column is taller than the other it doesn't clear properly and break
the layout. To fix this, use the combination of a .clearfix class.

12
 Grid System
Nesting of Grid Columns
• The Bootstrap grid columns are nestable.
Formula for placing the columns will be
the same, i.e. the sum of column
numbers should be equal to 12 or less
within a single row.
Offsetting the Grid Columns
• We can also move grid columns to the
right for alignment purpose using the
column offset classes like .col-md-offset-
*, .col-sm-offset-*, etc.
• These classes offset the columns by
simply increasing its left margin by
specified number of columns.

13
Bootstrap Tables

Basic Table Styling

• .table class – Add .table class to create tables with basic styling that has
horizontal dividers and small cell padding (8px by default)
• .table-striped class – Add class .table-striped to create table with alternate
background like zebra-stripes.

Responsive Table
• Create responsive tables to enable horizontal scrolling on small devices (screen
width under 768px). Viewing responsive tables on other devices having screen
width larger than 768px, we will not see any difference.
• Place the table inside a <div> element and apply the class .table-responsive on it.

14
Bootstrap Images
• Easily style images using the Bootstrap built-in classes such as making the
round cornered or circular images, or give them effect like thumbnails.
• Make the images responsive by just adding the class .img-responsive to the
<img> tag.
• The Bootstrap responsive embed classes can be applied directly to the
<iframe>, <embed>, <video>, and <object> elements to make the video or
slideshow embedded in a web page responsive without affecting its original
aspect ratio.

15
Form Controls
• Vertical Form : This is the default Bootstrap form layout in which styles are
applied to form controls without adding any base class to the <form> element or
any large changes in the markup.
• Horizontal Form : In horizontal form layout labels are right aligned and floated to
left to make them appear on the same line as form controls. Steps to achieve this
layout as follows.
• Add the class .form-horizontal to the <form> element.
• Wrap labels and form controls in a <div> element and apply the class .form-
group.
• Use Bootstrap's predefined grid classes to align labels and form controls.
• Add the class .control-label to the <label> element.
• Inline Form : Sometimes you might require to place the form controls side-by-side
to compact the layout. You can do this easily by adding the Bootstrap class .form-
inline to the <form> element.

16
Bootstrap Nav Components

• Bootstrap provides an easy and quick way to create basic nav components like
tabs and pills which are very flexible and elegant. All the Bootstrap's nav
components, tabs and pills, share the same base markup and styles through the
base .nav class.

17
Creating Pills Nav with Bootstrap

• Similarly you can create a basic pill based navigation using the base class .nav-
pills instead of .nav-tabs, without any further change in markup.

18
Creating Bootstrap Tabs and Pills Nav with Dropdown
Menus

• You can add dropdown menus to a link inside tabs and pills nav with a little extra
markup. The four CSS classes .dropdown, .dropdown-toggle, .dropdown-menu
and .caret are required in addition to the nav classes to create a simple
dropdown menu.

19
Bootstrap Navbar

• You can use the Bootstrap navbar component to create responsive navigation
header for your website or application. These responsive navbar initially
collapsed on devices having small viewports like cell-phones but expand when
user click the toggle button.

20
Bootstrap Panels

• Sometimes you might require to place your content in box for better
presentation. In such situation the Bootstrap panel component can be very
useful. In most basic form the panel component applies some border and
padding around the content.

21
Creating Pagination with Bootstrap

• Pagination is the process of organizing content by dividing it into separate pages.

22
Advanced Bootstrap Concepts
Bootstrap Modals
• Modal is a dialog box or popup window that is used to provide important
information to the user or prompt user to take necessary actions before moving on.
• Bootstrap gives you option further to scaling a modal up or down. You can make
modals larger or smaller by adding an extra class .modal-lg or .modal-sm on .modal-
dialog.
Modal’s Methods -
• .modal(options) – Activates the content as a modal.
• .modal('toggle') - Toggles a modal window manually.
• .modal('show') - Open a modal window manually.
• .modal('hide') - Hide a modal window manually.
• .modal('handleUpdate') - Readjusts the modal's position to counter the jerk
that is occurring due to the appearance of the viewport scrollbar.

23
Advanced Bootstrap Concepts
Bootstrap Carousel
• The carousel known as slideshow or image slider is used for showcasing the
huge amount of contents within a small space on the web pages.
• It is a dynamic presentation of contents
• It has three components - carousel indicators (small circles), carousel controls
(previous and next arrows) and the carousel items or slides.
Carousel’s Methods -
• .carousel(options) - Initializes the carousel with options.
• .carousel('cycle') - Start carousel for cycling through the items from left to right.
• .carousel('pause') – Stops the carousel from cycling through items.
• .carousel(number) – Cycles the carousel to a particular frame.
• .carousel('prev') – Cycles the carousel to the previous item.
• .carousel('next') – Cycles the carousel to the next item.

24
Questions?
Thank you!