Articles

Bootstrap Lesson Intro

Introduction to Bootstrap Tutorials Bootstrap

Free tutorial learn how to use Twitter Bootstrap

When you first start using bootstrap CSS, it is important to note the file structure.
The pre-complied Bootstrap folder structure will look like the below once unzipped.
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
It comes with both minified versions as well as without the minification. Minified version can perform better, so they are the preferred files to use.
As you can see the bootstrap files include CSS, JavaScript and font files.
Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.
Supported browsers
Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 8-11. More specific support information is provided below.

Chrome

Firefox

Internet Explorer

Opera

Safari

Android

 Supported

 Supported

N/A

 Not Supported

N/A

iOS

 Supported

N/A

 Not Supported

 Supported

Mac OS X

 Supported

 Supported

 Supported

 Supported

Windows

 Supported

 Supported

 Supported

 Supported

 Not Supported

** please review Internet Explorer version options as some IE may not be fully supported.
Before you begin...
As a default bootstrap using the font-size of 14px and the line-height of 1.428
Additionally the P element have a margin at the bottom approx 10px.
Bootstrap you should include a container element to be able to wrap the site contents within it.
The first type of container has a class named contained. This is used for responsive fixed with projects.
<div class="container"></div>
The second type of a fluid container. This is used for full screen width proejcts that span the entire width of the viewport.
<div class="container-fluid"></div>

 

***
Do Not Sell My Personal Information