Bootstrap 4 - Environment Setup

You can start the usage of Bootstrap 4 on your website by using inclusive of it from CDN(Content Delivery Network) or downloading from getbootstrap.Com.

Using CDN

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.Bootstrapcdn.Com/bootstrap/4.0.0/css/bootstrap.Min.Css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "nameless">

<!-- jQuery Library -->
<script src = "https://code.Jquery.Com/jquery-3.2.1.Narrow.Min.Js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "nameless">

<!-- 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">

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.Bootstrapcdn.Com/bootstrap/4.Zero.0/js/bootstrap.Min.Js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "nameless">
Include the CDN variations of jQuery and Popper.Js (Bootstrap 4 makes use of jQuery and Popper.Js to utilize JavaScript components consisting of modals, tooltips, popovers and so on) earlier than the minified Bootstrap JavaScript, in case you are the use of the compiled model of JavaScript. There are following require jQuery
  • Used for closable alerts

  • Toggle the states via the use of buttons and checkboxes/radio buttons and disintegrate for toggling content

  • Carousel for slides, controls, and signs

  • Dropdowns (makes use of the Popper.Js for ideal positioning)

  • Open and near the Modals

  • For collapsing the Navbar

  • Tooltips and popovers (uses the Popper.Js for best positioning)

Creating First Web Page with Bootstrap four

there are following example of easy web page of Bootstrap 4
<html lang = "en">
        <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta call = "viewport" content = "width=tool-width, initial-scale = 1, cut back-to-fit = no">

        <!-- Bootstrap CSS -->
        <link rel = "stylesheet"
        href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/css/bootstrap.Min.Css"
            integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "anonymous">

        <identify>Bootstrap four Example</name>

        <h2>Hello, world!!! Welcome to Welookups...</h2>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-3.3.1.Narrow.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "nameless">

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "anonymous">

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "nameless">

Try it Yourself »

It will produce the subsequent result −


Hello, world!!! Welcome to Welookups..