Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint
Home
Q/A
Tools
Coding Ground
Current Affairs
UPSC Notes
Online Tutors
Code Examples
Whiteboard
Net Meeting
Articles
Library
Videos
eBooks

bootstrap4-sizing-width-height

bootstrap 

<html lang="en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
      <style type="text/css">
      </style>
   </head>
   <body>
      <div class="container">
         <h2>Width</h2>
         <div class="w-auto p-3" style="background-color: #aaa;">Width : auto</div>
         <br>
         <div class="w-100 p-3" style="background-color: #aaa;">Width : 100%</div>
         <br>
         <div class="w-75 p-3" style="background-color: #aaa;">Width : 75%</div>
         <br>
         <div class="w-50 p-3" style="background-color: #aaa;">Width : 50%</div>
         <br>
         <div class="w-25 p-3" style="background-color: #aaa;">Width : 25%</div>
         <br>
         <h2>Height</h2>
         <div class="bg-secondary" style="height: 100px; ">
            <div class="h-100 d-inline-block bg-info"  style="width: 120px;">Height : 100%</div>
            <div class="h-75 d-inline-block bg-info" style="width: 120px;">Height : 75%</div>
            <div class="h-50 d-inline-block bg-info" style="width: 120px; ">Height : 50%</div>
            <div class="h-25 d-inline-block bg-info" style="width: 120px;">Height : 25%</div>
            <div class="h-auto d-inline-block bg-info" style="width: 120px;">Height : auto</div>
         </div>
      </div>
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

bootstrap4-shadow-spacing

bootstrap 

<html lang="en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
      <style type="text/css">
      </style>
   </head>
   <body>
      <div class="container">
         <h2>Shadow</h2>
         <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow : using class 'shadow-none'</div>
         <div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow : using class 'shadow-sm'</div>
         <div class="shadow p-3 mb-5 bg-white rounded">Regular shadow : using class 'shadow'</div>
         <div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow : using class 'shadow-lg'</div>
         <h2>Spacing</h2>
         <div class="bg-dark">
            <div class="mx-auto text-white" style="width: 200px;">Content is in center</div>
         </div>
      </div>
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

bootstrap4-border-color

bootstrap 

<html lang="en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
      <style type="text/css">
      </style>
   </head>
   <body>
      <div class="container">
         <h2>Border Color</h2>
         <div class="bordercolor">
            <p>border-primary, border-secondary, border-success</p>
            <span class=""><img src="https://www.tutorialspoint.com/bootstrap/images/download.png" alt="..." class="border border-primary" ></span>&nbsp;
            <span class=""><img src="https://www.tutorialspoint.com/bootstrap/images/download.png" alt="..." class="border border-secondary" ></span>&nbsp;
            <span ><img src="https://www.tutorialspoint.com/bootstrap/images/download.png" alt="..." class="border border-success" ></span>&nbsp;<br><br>
            <p>border-danger, border-warning, border-info</p>
            <span ><img src="https://www.tutorialspoint.com/bootstrap/images/download.png" alt="..." class="border border-danger" ></span>&nbsp;
            <span><img src="https://www.tutorialspoint.com/bootstrap/images/download.png" alt="..." class="border border-warning" ></span>&nbsp;
            <span ><img src="https://www.tutorialspoint.com/bootstrap/images/download.png" alt="..." class="border border-info" ></span>&nbsp;<br><br>
            <p>border-light, border-dark, border-white</p>
            <span ><img src="https://www.tutorialspoint.com/bootstrap/images/download.png" alt="..." class="border border-light" ></span>&nbsp;
            <span><img src="https://www.tutorialspoint.com/bootstrap/images/download.png" alt="..." class="border border-dark" ></span>&nbsp;
            <span><img src="https://www.tutorialspoint.com/bootstrap/images/download.png" alt="..." class="border border-white" ></span><br>
         </div>
      </div>
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

bootstrap4-additive-and-subtractive

bootstrap 

<html lang="en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class="container">
         <br>
         <div class="text-white bg-secondary">
            <h2>Additive</h2>
            <span class="border">border</span>&nbsp;&nbsp;
            <span class="border-top">border-top</span>&nbsp;&nbsp;
            <span class="border-right">border-right</span>&nbsp;&nbsp;
            <span class="border-bottom">border-bottom</span>&nbsp;&nbsp;
            <span class="border-left">border-left</span><br><br>
         </div>
         <div class="text-white bg-secondary">
            <h2>Subtractive</h2>
            <span class="border border-0">border-0</span>&nbsp;&nbsp;
            <span class="border border-top-0">border-top-0</span>&nbsp;&nbsp;
            <span class="border border-right-0">border-right-0</span>&nbsp;&nbsp;
            <span class="border border-bottom-0">border-bottom-0</span>&nbsp;&nbsp;
            <span class="border border-left-0">border-left-0</span>&nbsp;&nbsp;
         </div>
      </div>
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

bootstrap4-positioning-tooltips

bootstrap 

<html lang="en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class="container">
      <br>
      <h2>Positioning Tooltips</h2>
      <br>
      <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
      Tooltip on top
      </button>
      <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
      Tooltip on right
      </button>
      <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
      Tooltip on bottom
      </button>
      <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
      Tooltip on left
      </button>
      </div>
      <script>
         $(document).ready(function(){
              $('[data-toggle="tooltip"]').tooltip();   
         });
      </script>
      <!-- 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>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

bootstrap4-sticky-navigation-bar

bootstrap 

<html lang="en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   <body style="height:2000px">
      <div class="container-fluid">
         <div class="container-fluid" style="margin-top:80px">
            <h4>This is Sticky Navigation Bar...Scroll this page to see the effect</h4>
         </div>
      </div>
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
         <a class="navbar-brand" href="#">Sticky Top</a>
         <ul class="navbar-nav">
            <li class="nav-item active">
               <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Contact</a>
            </li>
         </ul>
      </nav>
      <!-- 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>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

bootstrap4-bottom-fixed-navigation-bar

bootstrap 

<html lang="en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   <body style="height:2000px">
      <div class="container">
         <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
            <a class="navbar-brand" href="#">Fixed Bottom</a>
            <ul class="navbar-nav">
               <li class="nav-item active">
                  <a class="nav-link" href="#">Home</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">About Us</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Contact</a>
               </li>
            </ul>
         </nav>
         <div class="container-fluid" style="margin-top:80px">
            <h4>This is Bottom Fixed Navigation Bar...Scroll this page to see the effect</h4>
         </div>
      </div>
      <!-- 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>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

bootstrap4-navbar-with-form-and-button

bootstrap 

<html lang="en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class="container">
         <h2>Navbar with Form and Button</h2>
         <nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
            <form class="form-inline">
               <input class="form-control mr-sm-2" type="text" placeholder="Search your product">
               <button class="btn btn-info" type="submit">Search</button>
            </form>
         </nav>
      </div>
      <!-- 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>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

bootstrap4-basic-navbar

bootstrap 

<html lang="en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class="container">
         <h2>Basic Navbar</h2>
         <nav class="navbar navbar-expand-sm navbar-dark bg-secondary">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul class="navbar-nav mr-auto">
                  <li class="nav-item active">
                     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#">About Us</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
      </div>
      <!-- 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>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

bootstrap4-closing-disabled-popover

bootstrap 

<html lang="en">
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class="container">
         <h2>Closing Popover</h2>
         <a tabindex="0" class="btn btn-info" role="button" data-toggle="popover" data-trigger="focus" title="Popover" data-content="Click outside to dismiss the popover">Dismissible Popover</a><br><br>
         <h2>Disabled Element</h2>
         <span class="d-inline-block" data-toggle="popover" data-content="This button is disabled">
         <button class="btn btn-info" style="pointer-events: none;" type="button" disabled>Button</button>
         </span>
      </div>
      <script>
         $(document).ready(function(){
             $('[data-toggle="popover"]').popover();  
              $('[data-toggle="tooltip"]').tooltip();
         });
      </script>
      <!-- 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>
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

Previous 1 ... 9 10 11 12 13 14 15 ... 114 Next
Advertisements
Loading...
img img img img img img

Follow

© Copyright 2019. All Rights Reserved.

Newsletter

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.