<tutorialjinni.com/>

Bootstrap 4 Introduction

Posted Under: Bootstrap, Bootstrap 4 Tutorial For Beginners , Tutorials on Mar 1, 2020
Bootstrap 4 Introduction
Bootstrap is the world's most popular library of front-end components for developing responsive, mobile-first web projects. Bootstrap 4 is the latest version of Bootstrap and is an open source tool set for HTML, CSS, and JS development. With its Sass variables and a large number of mixins, responsive grid systems, extensible prefabricated components, and a powerful jQuery-based plugin system, you can quickly prototype or build your entire app for your ideas. Anyone with a basic knowledge of HTML and CSS and use start developing and leveraging the power of Bootstrap.

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 is the latest version of Bootstrap. Compared with Bootstrap 3, it has more specific classes and turns some related parts into related components. At the same time, the volume of Bootstrap.min.css has been reduced by more than 40%. Bootstrap 4 also dropped support for IE8 and iOS 6, and now only supports browsers of IE9 and above and iOS 7 and above. If you need a previous browser for this, use Bootstrap 3. A very basic Bootstrap example depicting mobile first behaviour.

Bootstrap 4 Example

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.tutorialjinni.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://cdn.tutorialjinni.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.tutorialjinni.com/popper.js/1.16.1/umd/popper.min.js"></script>
  <script src="https://cdn.tutorialjinni.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
  <h1>My first Bootstrap page</h1>
  <p>Reset the browser size to see the effect!</p> 
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>first row</h3>
      <p>Novice Tutorial</p>
      <p>Learn not only technology, but also dreams!</p>
    </div>
    <div class="col-sm-4">
      <h3>The second column</h3>
      <p>Novice Tutorial</p>
      <p>Learn not only technology, but also dreams!</p>
    </div>
    <div class="col-sm-4">
      <h3>Third column</h3> 
      <p>Novice Tutorial</p>
      <p>Learn not only technology, but also dreams!</p>
    </div>
  </div>
</div>
</body>
</html>


imgae