You are on page 1of 12

 Bootstrap Overview – Introduction

 File Structure
 Grid System
 CSS Overview
 Tables
 Forms
 Buttons
 Images
 Helper Class
Bootstrap is a powerful mobile first front-end
framework for faster and easier web development. It uses
HTML, CSS and JavaScript.
Bootstrap was developed at Twitter. It was released as
an open source product in August 2011 on GitHub. Its a
framework to encourage consistency across internal tools.
Before Bootstrap, various libraries were used for interface
development, which led to inconsistencies and a high
maintenance burden.
Mobile first approach:
Since Bootstrap 3, the framework consists of Mobile first
styles throughout the entire library instead 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 responsive design in the chapter Bootstrap
Responsive Design Provides a clean and uniform solution for
building an interface for developers.
CSS: Bootstrap comes with feature of global CSS settings,
fundamental HTML elements styled and ehanced with extensible
classes, and an advanced grid system. This is covered in detail in
the section Bootstrap with CSS.
Components: Bootstrap contains over a dozen reusable
components built to provide dropdowns, navigation, alerts,
popovers, and much more. This is covered in detail in the section
Layout Components.
 JavaScript Plugins: Bootstrap contains over a dozen custom
jQuery plugins. You can easily include them all, or one by one.
This is covered in details in the section Bootstrap Plugins. 

Download Bootstrap
 There are two ways to start using Bootstrap on your own web site.
 Download Bootstrap from http://getbootstrap.com/.
 Include Bootstrap from a CDN
https://www.bootstrapcdn.com/legacy/bootstrap/
 BootstrapCDN is a public content delivery network. It enables users to load CSS, JavaScript
and images remotely from its servers. 
 Bootstrap 4 is the newest version of Bootstrap; with new components, faster
stylesheet and more responsiveness.
 Bootstrap 4 supports the latest, stable releases of all major browsers and
platforms. However, Internet Explorer 9 and down is not supported.
 Bootstarp 4 supported browser versions:
 Chrome 45+
 Firefox 38+
 Opera 30+
 Internet Explorer 10+
 Edge 12+
 iOS 9+
 Safari 9+
PRECOMPILED BOOTSTRAP
Once the compiled version Bootstrap is downloaded, extract the
ZIP file, and you will see the following file/directory structure:

As you can see there are compiled CSS and JS (bootstrap.*), as well as
compiled and minified CSS and JS (bootstrap.min.*). Fonts from Glyphicons are
included, as is the optional Bootstrap theme.
 You will need to include three files:
 bootstrap.min.css
 jquery.min.js
 bootstrap.min.js
 You must download it and include in you page • For this example, we include from the Internet

https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
  https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
  https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js

You might also like