Bootstrap

Details Snippets

Core

Definition

Bootstrap (B): most popular HTML, CSS, and JS free front end framework for easier and faster responsive mobile first development of the websites, using many ready-made browsers compatible templates.

Elements

Grid and containers

Grid system [bootstrap , w3schools]: series of containers (can be nested), rows, and columns for setting of the page layout, using fully responsive  flexboxes [mozillacss-tricks].

<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-{size}-{span}">

Grid: 12 unit columns in each row, across the container’s width:
col-*          (container width < 576px, portrait phones)
col-sm-*   (576 ≤ container width < 768px, landscape phones)
col-md-*   (768 ≤ container width < 992px, tablets)
col-lg-*   (992 ≤ container width < 1200px, desktops)
col-xl-*   (1200 ≤ container width, large desktops)
* – number of covered unit columns in spanned column .col
At setted breakpoints (576 , 768 , 992 , 1200 px) will be rearrange the columns dispositions.

Topics

Bootstap Topics Links (to the w3schools)

Bootstrap 3

Bootstrap 4 Basics

Include Containers Grid Basic Typography Colors Tables Images Jumbotron Alerts Buttons Button Groups Badges Progress Bars Spinners Pagination List Groups Cards Dropdowns Collapse Navs Navbar Forms Inputs Input Groups Custom Forms Carousel Modal Tooltip Popover Toast Scrollspy Utilities Flex Icons Media Objects Filters

Bootstrap 4 Grid

Grid System Stacked/Horizontal Grid XSmall Grid Small Grid Medium Grid Large Grid XLarge Grid Examples

Bootstrap 4 Theme

Basic Template

Bootstrap Topics Overview

Basics 1 2 3 (start), Layouts 1, 2, 3 (containers, breakpoints, Z-index, utilities, grid, columns, responsive classes, alignment, reordering, nesting, Sass mixins, customizing the grid), Content 1, 2 ,3 (reboot, typography 1, 2, 3, code, images, tables, figures), Components 1, 2 ,3 (alerts, badge, breadcrumb, buttons, button group, card, carousel, collapse, dropdowns, forms, input group, jumbotron, list group, media object, modal 1, navs, navbar, pagination, popovers, progress, scrollspy, spinners, toasts, tooltips), Utilities 1, 2 ,3 (borders, clearfix, close icon, colors, display, embed, flex, float, image replacement, overflow, position, screenreaders, shadows, sizing, spacing, text, vertical align, visibility), Miscellaneous (approach 1, icons 1)

Sources

Useful links

Learn

(a) tutorialsw3schools tutorialrepublic tutorialspoint quackit devdocs BitDegree video01(coursetro) video02(w3newbie)
(b) ebookssincfusion
(c) exercises / examtutorialspoint w3schools – quiz w3schools – certificate (online certification, $95)

Practice

(a) documentsBootstrap4.3.x (Bootstrap3.3.7)
(b) tools:  15Tools/Playgrounds Pigendo(builder) Build OnlineEditor01
(c) best practice: getBootstrap  (templates: pages sources or downloads) 10CommonMistakes (3.3.7) bestpractice tips&tricks01 tips&tricks02 TipsTricks03

Selected Books (ebooks collected)

author, title, edition, pages, publisher, ISBN, Amazon: price, evaluation / reviewes, record date

  1. Rahman F. S.: Jump Start Bootstrap: Get Up to Speed With Bootstrap in a Weekend, 1st. 180. SitePoint, 201. 0992279437, $22.22. 4.3 / 18. 2018 04 28.
  2. Rahman F. S.: Bootstrap for Rails. 176, Packt Publishing, 2015. $29.99. 178398726X. 2.5 / 2. 2018 04 28.
  3. Copeland D. B.: Rails, Angular, Postgres, and Bootstrap: Powerful, Effective, Efficient, Full-Stack Web Development, 2nd. 344. Pragmatic Bookshelf, 2017. 1680502204. $17,5. 3.8 / 5. 2018 01 15.
  4. Spurlock J.: Bootstrap: Responsive Web Development, 1st. 128. O’Reilly Media, 2013. 1449343910. $14.76. 3.1 / 27. 2018 04 30.
  5. Moreto S., Lambert M.: Bootstrap 4 – Responsive Web Design, 1st. 1136. Packt Publishing, 2017. B073SB4X15. $71.99. 0 / 0. 2018 04 30.
  6. Moreto S.: Bootstrap By Example. 324. Packt Publishing, 2016. 1785288873. $34.99. 2.5 / 2. 2018 04 30.
  7. Cochran D., Whitley I.: Bootstrap Site Blueprints, 1st. 304. Packt Publishing, 2014. 1782164529. $44.99. 3.8 / 8. 2018 04 30.
  8. Lambert M.: Bootstrap Site Blueprints Volume II. 328. Packt Publishing, 2016. 1782164529. $49.99. 4.5 / 2. 2018 04 30.
  9. Magno A.: Mobile First Bootstrap. 92. Packt Publishing, 2013. 1783285796. $34.99. 3.1 / 6. 2018 04 30.
  10. Niska C.: Extending Bootstrap. 110. Packt Publishing, 2014. 1782168419. $22.99. 3.3 / 9. 2018 04 30.
  11. Lyn K.: Bootstrap 3.3: A Guide Book for Beginners to Learn Web Framework Fast! 186. CreateSpace Independent Publishing Platform, 2016. 1532718810. $9.59. 3.8 / 6. 2018 04 30.
  12. Feng B.: Make Bootstrap Themes. 269. Kindle, 2017. B072PHG6K2. $6.24. 4.1 / 6. 2018 04 30.
  13. Imsirovic A.: Bootstrap 4 Cookbook: Solutions to common problems faced in Responsive Web Design. 338. Packt Publishing, 2017. 178588929X. $44.99. 3.7 / 3. 2018 02 14.
  14. Kyrnin J.: Bootstrap in 24 Hours, Sams Teach Yourself, 1st. 432. Sams Publishing, 2015. 0672337045. $22.79. 4.5 / 5. 2018 02 14.

Details Snippets