Bootstrap 4 is the latest version of Bootstrap, which is the most popular HTML, CSS and JavaScript framework for developing responsive and mobile websites first. Bootstrap 4 is completely free to download and use!

Bootstrap 4 Source CSS files converted to SCSS.

Bootstrap 4 has 5 grid systems (.col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3). Bootstrap 4 has removed the x from the lowest break point. Therefore, (col-) covers all devices.

Bootstrap 4 has changed the offset class (offset-md-4)

Difference Between Bootstrap 4 and Bootstrap Image Responsive

Bootstrap 3 Image: .In Bootstrap 3 we are used this (.img-responsive) class for responsive image.
Bootstrap 4 Image: it has changes the class for responsive image (.img-fluid).

Bootstrap 4 Form Control

Bootstrap 4 has changed to (.form-control-lg) and (.form-control-sm) to increase and decrease the input size. Bootstrap 4 has add, delete and rename classes.

Why use Bootstrap 4?

  • It’s open source
  • Easy to get started
  • Great grid systems
  • Responsiveness
  • Mobile First
  • Consistency
  • Browser support

Using CDN

<!-- Compiled and Minified Bootstrap4 CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap4 JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>
bootstrap 4
%d bloggers like this: