Bootstrap 4

Hello friends, today we will learn Bootstrap. For Better user interface frontend developers are made attractive design in websites, so users attract to come on that website. Few years ago frontend developer use “CSS” for create attractive site but day to day so many features are came and improve the design and attractive site design. A “CSS” are written in three way first is inline, second is internal and third one is external. User has need to do very hard and long css for create attractive design. For easy solution and less code and attractive design Bootstrap is best. Bootstrap is an open source front-end framework for fast web development, Pre-made HTML/CSS templates & classes, JavaScript widgets & plug-in and responsive layout. There are different versions are available in Bootstrap. Currently Bootstrap 3 is working in development. A Bootstrap 4 is come with new features or new classes.We will see advantages, css components, JavaScript widgets of Bootstrap 4.

Advantages

• It is a compatible with the browser.
• Fast development
• It is good for developer to that lack design or UI skills.
• Very easy to learn.

Way to Use Bootstrap

• Include the CDN
• Download Required Files
• By NPM Package Manager
• By Bower Package Manager

Components of CSS

• Forms and Input groups
• Tables
• List Groups
• Cards
• Progress Bars
• Alerts
• Navbar and Menus
• Button and Button Groups
• Pagination
• Media Objects
• Utility Classes
• Badges

Widgets of JavaScript

• Carousel Slider
• Collapsible Accordion
• Modal
• Tooltips
• Popovers

What’s New in Bootstrap 4?

Sass CSS Pre-Compiler

• Moved Less to Sass
• As of v3 a Sass port was created and maintained
• In the web dev community Sass is favored
• Use of Libsass to compile faster

Button Styles and Flat Design

• Flat style over gradient
• More subtle looking
• More color of classes
• Example ( .btn-outline-*) class

Improved Grid System & Layout

• Changes in the underlying architecture
• Used rem & em units instead of pixels
• New –xl tier for extra large icons
• Flexbox used in Grid
• Use margin auto classes instead of “offset-md-x”

Flexbox

• Includes utilities of flexbox
• For Manage grids, navigation, components and more used flexbox.
• "For Example :
  I m flexbox
  "
• "Classes: (.d-flex , .d-inline-flex, .d-sm-flex, .d-md-flex, etc. )"

Cards

• Panels, wells and thumbnails are replace with cards
• Get same behavior with modifiers
• .card-body instead of .well
• Use .card-title for titles
• Image headings

Form Changes

• Dropped the .form-horizontal class
• Use .col-form-label for labels
• Use .form-control-lg and .form-control-sm to increase or decrease the size of an input control
• Uses .form-text class instead of .help-block

Some Other Changes

• Bigger fonts and headings
• Dropped support for IE8 + IE9
• Reboot Module
• Inversed table (.table-inverse)
• Glyphicons dropped (Font-awesome recommended)