W3W

Bootstrap4 - Spinners

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>W3W Tutorial</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CDN libraries Start-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- CDN libraries END -->
</head>
<body>
<div class="container">

    <h4>Spinners</h2>
    <div class="spinner-border"></div>
    
    <h4>Growing Spinners</h2>
    <div class="spinner-grow text-muted"></div>

    <h4>Spinner Buttons</h2>                                 
    <button class="btn btn-primary">
      <span class="spinner-border spinner-border-sm"></span>
    </button>
  
    <button class="btn btn-primary">
      <span class="spinner-border spinner-border-sm"></span>
      Loading..
    </button>
   
    <h4>Disabled Spinner Buttons</h2>
    <button class="btn btn-primary" disabled>
      <span class="spinner-border spinner-border-sm"></span>
      Loading..
    </button>
    
    <button class="btn btn-primary" disabled>
      <span class="spinner-grow spinner-grow-sm"></span>
      Loading..
    </button>

</div>
</body>
</html>

Result:



Bootstrap4 - Progress Bar

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>W3W Tutorial</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CDN libraries Start-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- CDN libraries END -->
</head>
<body>
<div class="container">

    <h4>Progress Bar With Percentage Label</h2>
    <div class="progress">
      <div class="progress-bar" style="width:70%">70%</div>
    </div>
   
    <h4>Animated Progress Bar</h2>
    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
    </div>

    <h4>Multiple Progress Bars</h2>
    <div class="progress">
      <div class="progress-bar bg-success" style="width:60%">
        Normal
      </div>
      <div class="progress-bar bg-warning" style="width:1 0%">
        Warning
      </div>
      <div class="progress-bar bg-danger" style="width:20%">
        Danger
      </div>
    </div>

</div>
</body>
</html>

Result:


Bootstrap4 - Image Shapes

Code:

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>W3W Tutorial</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CDN libraries Start-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- CDN libraries END -->
</head>
<body>
<div class="container">

  <h2>Circle</h2>         
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMwqhV_yefzlPcqFUmdQDweua2ZeC5v9QcSOR6Fbv0Lj2h9AVAa_MU9kYevrOFUDMQi8Suf6rLJAfIA2N7ltYU-UTLmNIpLSamk2ceXxTcyQ-ISj4G_rxNb8BzgS4feu-kuQXwdgZo9E/h120/nature.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">

  <h2>Rounded Corners</h2>       
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMwqhV_yefzlPcqFUmdQDweua2ZeC5v9QcSOR6Fbv0Lj2h9AVAa_MU9kYevrOFUDMQi8Suf6rLJAfIA2N7ltYU-UTLmNIpLSamk2ceXxTcyQ-ISj4G_rxNb8BzgS4feu-kuQXwdgZo9E/h120/nature.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
 
  <h2>Thumbnail</h2>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMwqhV_yefzlPcqFUmdQDweua2ZeC5v9QcSOR6Fbv0Lj2h9AVAa_MU9kYevrOFUDMQi8Suf6rLJAfIA2N7ltYU-UTLmNIpLSamk2ceXxTcyQ-ISj4G_rxNb8BzgS4feu-kuQXwdgZo9E/h120/nature.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">

</div>
</body>

</html>

Result:



Bootstrap4 - Badge

Code:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>W3W Tutorial</title>
<meta charset="utf-8">

  <!-- CDN libraries Start-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- CDN libraries END -->

</head>
<body>
<div class="container">
  <h2>Bootstrap Badge</h2>

  <button type="button" class="btn btn-primary">
    Message <span class="badge badge-light">5</span>
  </button>
  <button type="button" class="btn btn-danger">
     Task <span class="badge badge-light">3</span>
  </button>

</div>
</body>
</html>

Result:


Bootstrap4 - Button Group

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>W3W Tutorial</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

   <!-- CDN libraries Start-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- CDN libraries END -->

</head>
<body>
<div class="container">
  <h2>Bootstrap Button Group</h2>
  <p>The .btn-group class help to make a button group</p>

<h4>Horizontal</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Contact</button>
  </div>

</div>
</body>
</html>


Result:

Vertical:

<h4>Vertical</h3>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Contact</button>
  </div>

Result:














Horizontal with Dropdown Menus:

 <h4>Horizontal with Dropdown Menus</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
         Contact
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Location</a>
        <a class="dropdown-item" href="#">Email</a>
      </div>
    </div>
  </div>

Result:
Horizontal Split Dropdown:

<h4>Horizontal Split Dropdown</h3>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Home</button>
        <button type="button" class="btn btn-primary">About</button>
      <button type="button" class="btn btn-primary">Contact</button>
      <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Location</a>
        <a class="dropdown-item" href="#">Email</a>
      </div>
    </div>

Result:

 Vertical Split Dropdown:

<h4>Vertical Split Dropdown</h3>
      <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">Home</button>
        <button type="button" class="btn btn-primary">About</button>
        <div class="btn-group">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
             Contact
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Location</a>
            <a class="dropdown-item" href="#">Email</a>
          </div>
        </div>
      </div>

Result:



Bootstarp4 - Button Styles

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>W3W Tutorial</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- CDN libraries Start-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- CDN libraries END -->

</head>
<body>

<div class="container">
  <h2>Bootstrap Button Styles</h2>
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-link">Link</button>   
</div>

</body>

</html>

Result:





Subscribe to: Comments (Atom)

Popular Posts

Recent Posts

Text Widget

Copyright © W3W