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>