- CSS folder
- Fonts folder
- JS folder
Now, all folders have some relevant files which are given below.
- CSS folder – contains six files namely:
- css – this bootstrap CSS file contains the extra spaces to make it more readable and is a bit bigger in size compared with minified version
- min – this bootstrap CSS file has been minified and all of the extra spaces were removed to make the file size a bit smaller
- bootstrap-theme.css – this CSS file contains extended styles such as 3D buttons, gradients and so on. Similar with the regular bootstrap.css file this is the larger file version of this file.
- bootstrap-theme.min.css – this is the minified version of the bootstrap-theme.css file.
- css.map and bootstrap-theme.css.map – these are source maps generated by LESS. The main purpose of these map files is used to link the CSS source code to LESS source code in developer’s tool such as those in Firefox and Chrome.
- Fonts folder – this folder contains 4 format of fonts to support the glyphicons fonts that are available inside boostrap.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Grid Demo with Bootstrap</title> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> </head> <body> </body> </html>
Column Grid System with Bootstrap
Bootstrap covers all devices, so you are free from manage columns by devices. It comes with four grid sizes that breakdown each sizes.
- Extra small devices (col-xs) – for Phones with less than 768px viewport
- Small devices (col-sm) – for Tablets with greater than or equal to 768px viewport
- Medium devices (col-md) – for Desktops with greater than or equal to 992px viewport
- Large devices (col-lg) – for Desktops with greater than or equal to 1200px viewport
Adjusting Column width using offset columns
The next feature of bootstrap is offset – where we can set up spaces between columns. If we have small devices like iPhone or android phone there may be columns will be small. So this feature will manage spaces between that columns for all devices. To create space we have to use offset class along with our grid classes like: col-gridsize-offset-number-of-columns. Now to apply this on our small devices with media screen.
With help of bootstrap we are able to create nesting of rows. These means we can add row within a row and we can set some grid based sizes on that row. Good thing is you can define that rows on 12 columns. So, that all are features are important to make responsive size, and based on that all features – web designer and developer can easily make responsive website in very less time.