Fork me on GitHub

Project Notes

Bootstrap

About Bootstrap.

Notes

Bootstrap v3 Packaging Options

Official download and Installation options

  • Compiled CSS and JS (direct download or CDN via jsDelivr)
  • Source files (LESS) to compile Bootstrap with your own asset pipeline
  • Source files ported to SASS to compile Bootstrap with your own asset pipeline
  • Package managers
    • bower
    • npm
    • Composer (PHP)
    • bundler: official bootstrap Sass gem (Bootstrap 3)

Unofficial options:

  • less-rails-bootstrap - The less-rails-bootstrap project hooks into less-rails and less.rb, making Bootstrap’s source LESS files, compiled CSS, and JavaScript files available in the Rails 3.x and 4.x asset pipeline.

Bootstrap v4 Packaging Options

Official download and Installation options

  • Compiled CSS and JS (direct download or CDN via jsDelivr)
  • Source files (LESS) to compile Bootstrap with your own asset pipeline
  • Source files ported to SASS to compile Bootstrap with your own asset pipeline
  • Package managers
    • npm
    • yarn
    • Composer (PHP)
    • NuGet (.NET)
    • bundler: official bootstrap Sass gem (Bootstrap 4)

Bootstrap v5 Packaging Options

Official download and Installation options:

  • Compiled CSS and JS (direct download or CDN via jsDelivr)
  • Source files (SASS) to compile Bootstrap with your own asset pipeline
  • Package managers
    • npm
    • yarn
    • Composer (PHP)
    • NuGet (.NET)
    • bundler: official bootstrap gem (Bootstrap 4 and 5)

Difference between Bootstrap v3 and Bootstrap v4

Component Bootstrap v3 Bootstrap v4 Bootstrap v5
CSS source file LESS SASS SASS
CSS Unit px rem  
Font Size 14px 16px  
Grid System It is based on 4 tier grid system (xs, sm, md, lg) It is based on 5 tier grid system (xs, sm, md, lg, xl) It has 6 tier (xs, sm, md, lg, xl, xxl).
Color It has limited colors. It has limited colors. Extra colors added with the looks, A card improved color palette. there are various shades available to choose.
Jquery It has jquery and all related plugins. It has jquery and all related plugins. Jquery is removed and switched to vanilla JS with some working plugins
Internet Explorer   supports both IE 10 and 11 doesn’t support IE 10 and 11
Form elements   Radio buttons, checkboxes have different look in different OS and browsers. The form uses whatever default browsers provide. The look of form elements will not change, on different OS or browser. The forms can be customized and form controls can be added, they would not depend on browser.
Utilities API   We cannot modify utilities in bootstrap 4 Bootstrap 5 gave freedom to modify and also create our own utility
Gutter   We use .glutter with fontsize in px We use .g* with fontsize in rem
Vertical Classes   Columns can be positioned relative Columns cannot be positioned relative
Bootstrap Icons glyphicons doesn’t have its own SVG icons, we have to use font-awesome for icons have its own SVG icons
Panels/Cards panels, thumbnails and wells The card deck is used to create an isset of cards with equal width and height. Card deck class in removed in bootstrap
Static Site Generator   uses Jekyll software uses Hugo software as it is fast static site generator
Dropdown Structure Created using <ul> and <li> Created with <ul> or <div>  
Images class .img-responsive .img-fluid  
flexbox grid   this makes easier to implement vertical designs, and the columns and rows can easily be implemented. the classes justify-center-content can directly be used to align according to the requirement advanced grid system is made available , also columns don’t have relative positions.
Tables use .table-responsive class in <div> tag use .table-responsive class in <table> tag  
Offsetting Columns col-md-offset-4 offset-md-4  
Form Control Size .input-lg increases size while .input-sm decreases size .form-control-lg increases size while .form-control-sm decreases size  
Button Sizes .btn-xs class is available .btn-sm and .btn-lg classes are there and the .btn-xs class is not  
Jumbotron Full Width .jumbotron-fluid class is not used on full-width jumbotrons .jumbotron-fluid class for full-width jumbotrons is used in this It doesn’t support jumbotron.
Carousel Item carousel items are arranged using .item class It uses .carousel-item class for arranging carousel items.  
Navbar   We have inline-block property and we will get white dropdown as default for dropdown-menu-dark class. Inline-block property is removed and we will get black dropdown as default for dropdown-menu-dark class.
Inline Navs Do not have .nav-inline class Inline navs are displayed by using the .nav-inline class  
Styles It has .btn-default and .btn-info available classes for buttons Have different classes for buttons like: .btn-secondary, .btn-light and . btn-dark.  
Checkboxes and Radio Buttons .radio, .radio-inline, .checkbox, or .checkbox-inline classes are available for radio and checkbox. .form-check, .form-check-label, .form-check-input, or .form-check-inline are the classes used to display radio and checkbox.  

Credits and References

About LCK#264 webjavascript
Project Source on GitHub Return to the Project Catalog

This page is a web-friendly rendering of my project notes shared in the LittleCodingKata GitHub repository.

LittleCodingKata is my collection of programming exercises, research and code toys broadly spanning things that relate to programming and software development (languages, frameworks and tools).

These range from the trivial to the complex and serious. Many are inspired by existing work and I'll note credits and references where applicable. The focus is quite scattered, as I variously work on things new and important in the moment, or go back to revisit things from the past.

This is primarily a personal collection for my own edification and learning, but anyone who stumbles by is welcome to borrow, steal or reference the work here. And if you spot errors or issues I'd really appreciate some feedback - create an issue, send me an email or even send a pull-request.