Thursday, 4 August 2016

Bootstrap Modal

Bootstrap Modal 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>


output:
Bootstrap Modal
Bootstrap Modal

Posted by at No comments:

Wednesday, 3 August 2016

Bootstrap Alert code

Bootstrap Alert Code 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>Bootstrap alert code </title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  9.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13.   <h2>Bootstrap Alerts </h2>
  14.   <div class="alert alert-success">
  15.     <strong>Success!</strong> This alert box could indicate a successful or positive action.
  16.   </div>
  17.   <div class="alert alert-info">
  18.     <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  19.   </div>
  20.   <div class="alert alert-warning">
  21.     <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  22.   </div>
  23.   <div class="alert alert-danger">
  24.     <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  25.   </div>
  26. </div>
  27. </body>
  28. </html>
Bootstrap alert code
Bootstrap Alert Code

Posted by at No comments:

Bootstrap Responsive table

Bootstrap Responsive table Code 
<!DOCTYPE html>

 <html lang="en">

 <head>
  <title>Bootstrap  Table Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

 <body>

 <div class="container">
  <h2>Responsive Table</h2>
 <div class="responsive-table">
  <table class="table">
    <thead>
      <tr class="info">
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr><tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
    </tbody>
  </table>
 </div>
</div>

 </body>
</html>

 output:


Posted by at No comments:

Bootstrap Responsive table

Bootstrap Responsive table Code 
<!DOCTYPE html>

 <html lang="en">
<head>
  <title>Bootstrap  Table Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="container">
  <h2>Responsive Table</h2>
 <div class="responsive-table">
  <table class="table">
    <thead>
      <tr class="info">
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
 <tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr><tr class="success">
        <td>Gaurav</td>
        <td>yadav</td>
        <td>gauravyadav10118@gmail.com</td>
      </tr>
      <tr class="danger">
        <td>Praveen</td>
        <td>Yadav</td>
        <td>Praveenyadav@gmail.com</td>
      </tr>
      <tr class="info">
        <td>Arun </td>
        <td>Yadav</td>
        <td>arunyadav@gmail.com</td>
      </tr>
    </tbody>
  </table>
 </div>
</div>

 </body>
</html>

 output:


Posted by at No comments:

Latest Bootstrap 3.3.7 Download

Currently release Bootstrap 3.3.7 with some new classes and new features ..
Free download bootstrap 
Click Here  Free Download Latest Bootstrap File 
Posted by at No comments:
Subscribe to: Posts (Atom)