Bootstrap is a framework to design mobile friendly websites. Using modern technologies and battle tested is a good start also for small sites.
It’s good for prototyping, to quickly deliver small projects, and probably – I don’t have experience on this – also for bigger ones.
I usually get the source via CDN, so that I don’t have to download copies, and possibly users already have a cached copy (remembering to add JQuery as well).
https://code.jquery.com/jquery-1.12.4.min.js <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
The Grid concept
The framework has a 12-column grid accessed through classes. There is a special class, the container class, that encloses rows and columns. It also adds a padding of 15px, so not to be used if this is unwanted!
The container can be fluid (adjusts to the size of the device) or fixed-width (depends on the size of the device, adjusting to media query breakpoints). Both fluid and fixed-width are classes provided by Bootstrap.
Rows are sort of horizontal break for columns. They are intended to work with columns.
Quite easy to get as a concept, remembering the basic 12-column idea. Class is called col-SIZE-SPAN (where size is when it turns to single column, and span the number of columns 1 to 12). Example:
Size can be xs, sm, md, lg (768, >992 >1200 respectively). With medium (md) size, the screen has to be at least 992 pixels not to render as a single column.
The clearfix class as usually happens with CSS will fix problems with floats. In addition to this there is the powerful responsive utility classes. Example:
block could be inline too, or visible could be hidden (in this case removing –block).