Posts

Showing posts from September, 2020

What's new features in Bootstrap4

  1.   Replace LESS with Sass 2.   New Grid System for Smaller Screens 3.  Added Outline Buttons 4.   Brand New Bootstrap Cards 5.   Convert From Normalize.css to Reboot.css 6.   Added New Classes for Spacing 7.   Tooltips and Popovers 8.   Improved Media Queries 13.   Dropped Glyph icons Font

Bootstrap Breakpoints

  // Extra small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media ( min-width : 576px ) { ... } // Medium devices (tablets, 768px and up) @media ( min-width : 768px ) { ... } // Large devices (desktops, 992px and up) @media ( min-width : 992px ) { ... } // Extra large devices (large desktops, 1200px and up) @media ( min-width : 1200px ) { ... } // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` @include media-breakpoint-up ( sm ) { ... } @include media-breakpoint-up ( md ) { ... } @include media-breakpoint-up ( lg ) { ... } @include media-breakpoint-up ( xl ) { ... } // Extra small devices (portrait phones, less than 576px) @media ( max-width : 575 .98px ) { ... } // Small devices (landscape phones, less than 768px) @media ( max-width : 767 .98px ) { ... }...

Difference between Bootstrap 3 and Bootstrap 4:

Basis off Bootstrap 3 Bootstrap 4 Grid System It is based on 4 tier grid system (xs, sm, md, lg). It is based on 5 tier grid system (col, sm, md, lg, xl). CSS File LESS SASS Horizontal Form .row class is not required using grid in forms. .row class is required when using grid in form. Primary Unit px rem Font Size 14px 16px Responsive Image Use .img-responsive class. Use .img-fluid class. Image Alignment Use .pull-right and .pull-left class. You can use .pull-right, .pull-left Offsetting Columns Uses col-*-offset-* classes to offset columns. For example, col-md-offset-4. Uses offset-*-* classes to offset columns. For example, offset-md-4. Flexbox No Yes Generic Class No mt-1, pt-2