Designers need a solid foundation that gives us almost everything a typical website would require but is flexible enough for customization

1. Omkarsoft
website design and development Bangalore

2. Know the reason behind choosing
Bootstrap as CSS framework

3. Why Developers designed CSS Framework?
• Designers need a solid foundation that gives us almost
everything a typical website would require but is flexible
enough for customization.
• Thanks to hundreds of hours spent by some developers
and companies, we now have dozens of CSS
Frameworks to choose from.
• Among all the available CSS frameworks out there,
Bootstrap is the most widely used.

4. Why should we choose Bootstrap?
The Following are the great reasons to choose Bootstrap
1.Easy to Start:
Bootstrap offers LESS files for those of us who know how to use
it, but it also provides the plain old CSS file for those don’t
want to use CSS pre-processing.
2. Saves Time:
The Bootstrap libraries offer ready-made pieces of code that
can pump life into a website.
Web developer doesn’t have to spend time laboriously working
out and writing code.
3. Offers Best Grid System:
Bootstrap is built on responsive 12-column grids, layouts and
components.
Offsetting & Nesting of columns is also possible in both fixed
and fluid width layouts.

5. Very easy to handy when you want to hide some content
based on screen size.
Whether you need a fixed grid or a responsive, its only
matter of a few changes.
4. Integration:
If we want to style a table, all you need to do is take the
styles you need and copy them to the CSS file you’re
working with.
Integration is simple, fast and easy to accomplish and once
you’re done you can play with your design to your heart’s
content.

6. 5. Provided Basic Styling:
A website has many different
elements such as Headings,
lists, tables, buttons, forms, etc.
All these fundamental HTML
elements have been styled and
enhanced with extensible
classes.
The HTML elements for which
styles are provided are:
 Typography
 Code
 Tables
 Forms
 Buttons
 Images
 Icons

7. 6. Pre styled Components:
Styling of every single element
follows a consistent theme
and if you know LESS, then
customizing it takes just few
minutes.
Some of the pre styled
components are listed below
• Dropdowns
• Button Groups
• Navigation Bar
• Breadcrumbs
• Labels & Badges
• Alerts
• Progress Bar

8. 7.Responsiveness:
Bootstrap is responsive. Bootstrap adapts to the change in
platforms with super speed and efficiency.
8. Bundled JavaScript plugins:
Numerous JavaScript plugins are bundled in the bootstrap
package.
If your project requires sliders, tabs, accordions, then you no
longer have to try and test numerous different plugins
across the web. Adding these functionalities is just a
matter of adding few lines of code.
9. Good Documentation:
It provides a great documentation with examples and demo
that makes it more easier for even someone new.
10.Future Compatibility:
For instance both HTML5 and CSS3 are things that are going
to be big in the future. It has the potential to become a
yardstick for web developers in the years to come.

9. Download Bootstrap Files:
• Download the files from
https://github.com/twbs/bootstrap and after
unzipping, include the files in the head of your HTML
document.
• The example HTML document includes the bootstrap
framework with its default styling and every single
components and JavaScript plugins.

10. Documentation:
• Bootstrap’s documentation is impressive. Become familiar with elements of
bootstrap by using the documentation.
• Bootstrap gives you a head start because you don’t have to play with
everything to learn and instead can find information on just about
anything through the documentation.
• Demo: http://getbootstrap.com/getting-started/#examples
• Download: http://getbootstrap.com
• Documentation: http://getbootstrap.com/getting-started

11. Bootstrap themes:
Few bootstrap themes and templates were mentioned
below :
• Unify – Responsive Website Template
• REEN – Made for Designers – Portfolio
• Kanzi – Multi-Purpose Template
• Boomerang – Multipurpose Template
• Ace – Responsive Admin Template

12. If you downloaded the Bootstrap
source code then the file
structure would be as follows:
• The files under less/, js/, and
fonts/ are the source code for
Bootstrap CSS, JS, and icon
fonts (respectively).
• The dist/ folder includes pre-
compiled bootstrap section.
• docs-assets/, examples/, and all
*.html files are Bootstrap
documentation.
Bootstrap Source Code:

13. Conclusion:
• Bootstrap is designed to work equally well on both
desktop and mobile devices.
• Don’t get the idea that Bootstrap forces you to use a
limited number of layouts and special features.
• It’s actually quite flexible.

14. Thank You
OMKARSOFT
website design and development Bangalore
published by www.omkarsoft.com