Bootstrap 4 Setup

Bootstrap 4 Setup

Learn how to setup Bootstrap 4 Resources for your Project

You can setup Bootstrap 4 by 2 Ways 

1 . By Downloading and using resources from the Bootstrap website 

2. Using Resources hosted on Content Distribution Network(CDN)

To Use CDN resources, simply copy and paste the links specified below

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<!--  Bootstrap 4 CSS files, Must be added within the <head> element -->

<!-- JavaScript Files, add at the bottom within the element </body>, with order : jquery before bootstrap-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

The CSS Files must be added in the <head> section, while the javascript files must be added at the bottom just before the end tag of element <body>.

The order of Files must be jquery before bootstrap, because all of the Bootstrap javascript depends upon jquery

Bootstrap 4 Basic Template

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta Tags must be the first within <head> element -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!--CSS Files of Bootstrap Framework -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
  </head>
  <body>
    <h1>Hello There! Welcome to Bootstrap Tutorials</h1>

    <!-- The Order of Files is Critical : 1. jQuery 2.Bootstrap JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
  </body>
</html>

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman