Bootstrap

➢ Bootstrap is the popular HTML, CSS and JavaScript framework for developing a responsive
and mobile friendly website.

➢ It is available for free download and use.

➢ It is a front-end framework used for easier and faster web development.

➢ It includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many others.

➢ It can also use JavaScript plug-ins.

➢ It facilitates you to create responsive web designs.

➢ Bootstrap is more than efficient to create a responsive and mobile first website but it is not
the best in the industry. There is an alternative of Bootstrap named W3.CSS which is smaller,
faster, and easier to use.
[email protected] 2
 Advantages of Bootstrap

➢It is very easy to use.

➢Anybody having basic knowledge of HTML and CSS can use
Bootstrap.

➢It facilitates users to develop a responsive website.

➢It is compatible on most of browsers like Chrome, Firefox,

Internet Explorer, Safari and Opera etc.

[email protected] 3
 Contents of Bootstrap Package
➢ Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, and background.

➢ CSS: Bootstrap comes with the feature of global CSS settings, fundamental HTML elements style
and an advanced grid system.

➢ Components: Bootstrap contains a lot of reusable components built to provide iconography,

dropdowns, navigation, alerts, pop-overs, and much more.

➢ JavaScript Plugins: Bootstrap also contains a lot of custom jQuery plugins. You can easily include
them all, or one by one.

➢ Customize: Bootstrap components are customizable and you can customize Bootstrap's
components, LESS variables, and jQuery plugins to get your own style.

[email protected] 4
 Why Bootstrap?
➢ Mobile first approach − Bootstrap 3, framework consists of Mobile first styles throughout the
entire library instead them of in separate files.

➢ Browser Support − It is supported by all popular browsers.

➢ Easy to get started − With just the knowledge of HTML and CSS anyone can get started with
Bootstrap. Also the Bootstrap official site has a good documentation.

➢ Responsive design − Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles. More
about the responsive design is in the chapter Bootstrap Responsive Design.

➢ Provides a clean and uniform solution for building an interface for developers.

➢ It contains beautiful and functional built-in components which are easy to customize.

➢ It also provides web based customization.

➢ And best of all it is an open source.

[email protected] 5
Downloading Bootstrap

[email protected] 6
 Example

[email protected] 7
 Container

➢In Bootstrap, container is used to set the content's margins dealing with
the responsive behaviors of your layout.
➢It contains the row elements and the row elements are the container of
columns (known as grid system).
➢The container class is used to create boxed content.
➢There are two container classes in Bootstrap:
1. container
2. container-fluid

[email protected] 8
Container Structure

[email protected] 9
Container Example

[email protected] 10
 Buttons
➢ There are seven styles to add a button in Bootstrap.

➢ Use the following classes to achieve the different button styles:

1. .btn-default
2. .btn-primary
3. .btn-success
4. .btn-info
5. .btn-warning
6. .btn-danger
7. .btn-link
8. .btn-secondary
9. .btn-dark
10. .btn-light
[email protected] 11
 Example

[email protected] 12
Button Size Example

[email protected] 13
Button Enable-Disable Example

[email protected] 14
Button Outline / Bordered Buttons

[email protected] 15
 Grid System

➢Wikipedia definition of Grid goes like..

“In graphic design, a grid is a structure (usually two-dimensional) made up of a series of
intersecting straight (vertical, horizontal) lines used to structure the content. It is widely
used to design layout and content structure in print design. In web design, it is a very
effective method to create a consistent layout rapidly and effectively using HTML and
CSS.”

➢As defined by the official documentation of Bootstrap for grid

system..
“Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales
up to 12 columns as the device or viewport size increases. It includes predefined classes
for easy layout options, as well as powerful mixins for generating more semantic
layouts.”

[email protected] 16
 Mobile First Strategy

• Content
• Determine what is most important.

• Layout
• Design to smaller widths first.

• Base CSS address mobile device first; media queries address for tablet, desktops.

• Progressive Enhancement
• Add elements as screen size increases.

[email protected] 17
 Grid System
➢ The Bootstrap Grid System allows up to 12 columns across the page.

➢ You can use all 12 columns individually or you can groups the columns together to create wider
columns.

➢ Bootstrap Grid System is responsive and the columns are re-arranged automatically according to
the screen size.

[email protected] 18
 Grid Classes

➢There are four classes in Bootstrap Grid System:

1. xs (for phones)

2. sm (for tablets)

3. md (for desktops)

4. lg (for larger desktops)

➢You can combine the above classes to create more dynamic and flexible
layouts.

[email protected] 19
 Media Queries in Grid System
➢ Media query is a really fancy term for "conditional CSS rule".

➢ It simply applies some CSS, based on certain conditions set forth. If those conditions are met, the style is
applied.

➢ Media Queries in Bootstrap allow you to move, show and hide content based on the viewport size.

[email protected] 20
Basic Structure of Grid

[email protected] 21
 Grid Example

[email protected] 22
 Grid Options
Extra small devices Small devices Tablets Medium devices Large devices Desktops
Phones (<768px) (≥768px) Desktops (≥992px) (≥1200px)
Collapsed to start, Collapsed to start, Collapsed to start,
Grid behavior Horizontal at all times horizontal above horizontal above horizontal above
breakpoints breakpoints breakpoints
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12 12 12 12
Max column width Auto 60px 78px 95px

30px 30px 30px 30px

Gutter width (15px on each side of a (15px on each side of a (15px on each side of a (15px on each side of a
column) column) column) column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes
[email protected] 23
 Table

[email protected] 24
Striped and Bordered Table

[email protected] 25